天天看點

菜鳥的jquery學習記錄 (一) 對form輸入框的必填校驗

跟着項目做了一個小功能,自己不會js和jquery,硬着頭皮寫起了js,後來發現需要對輸入框進行資料必填項校驗,還有一些資料格式校驗等,後來别人看了我寫的一大堆js就笑了,告訴我用jquery的插件就可以了,直接拿過來使用就好,于是就自己寫了一個簡單的校驗,

對于jq  validate網絡上有很多的資源可以去查,在這裡不贅述,閑話少叙,上代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jquery校驗學習 </title>

	<script type="text/javascript" src="../js/lhgdialog/jquery-1.7.1.min.js"></script> 
	<script src="../js/validate/jquery.validate.js" type="text/javascript"></script>
	<script src="../js/validate/messages_cn.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#username").focus();
		$("#inputForm").validate({
			rules: {
				username: {
					required: true
				},
				password:{
					required: true			
				},
				checkboxs:{
					required:true
				},
				radios:{
					required:true
				},
				selectone:{
					required:true
				}
			},
			messages: {
				username: {
					required: "請輸入使用者名"
				},
				password: {
					required: "請輸入密碼"
				},
				checkboxs:{
					required: "請勾選複選框"
				},
				radios:{
					required: "請勾選單選框"
				},
				selectone:{
					required: "請選擇下拉框"
				}
			},
	        errorPlacement: function(error, element) {
	        	if(element.is(':radio')||element.is(':checkbox')) {
	        		//var eid = element.attr("name");不知道為啥從網上找到的會有這一行
	        		error.appendTo(element.parent());
	        	}else{
		            //var selector = "[name='" + element.attr("name") + "']";
		        	//error.insertAfter($(selector)); 這兩句是原來工程裡的代碼,我改成了下面這個也沒錯,
		        	error.insertAfter(element);
	        	}
	        } 
		});
	});

	
	</script>
	<style type="text/css">
	 #forminfo dl dt{width:200px;}
	</style>
</head>
<body>
<div ><input type="button" name="check" value="check" οnclick="validate();"></input></div>
<div id = "content">
	<form id="inputForm" action="study.html" method="post">
		<table>
			<tr>
				<td>username:</td>
				<td>
					<input type='text' name='username' id='username'></input>
				</td>
			</tr>
			<tr>
				<td>技能</td>
				<td>
					<input type="checkbox" name="checkboxs" value="checkbox1">1</input>
					<input type="checkbox" name="checkboxs" value="checkbox2">2</input>
					<input type="checkbox" name="checkboxs" value="checkbox3">3</input>
				</td>
			</tr>
			<tr>
				<td>密碼</td>
				<td>
					<input type='text' name='password' ></input>
				</td>
			</tr>
			<tr>
				<td>單選框</td>
				<td>
					<input type="radio" name="radios" value="checkbox1">1</input>
					<input type="radio" name="radios" value="checkbox2">2</input>
					<input type="radio" name="radios" value="checkbox3">3</input>
				</td>
			</tr>
			<tr>
				<td>下拉框</td>
				<td>
					<select name="selectone" >
						<option value="">請選擇</option><!-- jquery校驗的是value為空的時候會有提示,是以沒有這一行的話這個select校驗永遠為真-->
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				
				</td>
			</tr>
			<tr>
				<td>
				<input type="submit" name="submit"></input>
				</td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>
           

新的問題來了,其實我要在頁面上通過js拼接一個json串,是以我的拼接資料的項不再form裡,拼接好的資料才會在form裡,

那我的問題是,如何通過jquery校驗非form表單的資料呢,雖然實用性不大,但把問題抛出來,希望有大神看到了,指點一下!萬分感謝

update:!

當送出不是通過submit的時候可以嘗試  button 的click方法

$("#form").validate();
$("#btn).click(function(){
    if($("#form").valid()){
     $("#form").submit();
 }
});
           

可以嘗試下,