<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery validate表單驗證插件製作註冊表單驗證提交</title>
<meta name="description" content="jquery validate表單驗證插件製作用戶註冊頁面表單提交驗證，用戶名、手機、密碼、郵箱等表單驗證。通過這款validate表單驗證插件能製作多種表單提交驗證。" />
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<!--<script src="Scripts/jquery.metadata.2.1.js"></script>-->
<script type="text/javascript">
$(document).ready(function () {
$("#signupForm").validate({
rules: {
"firstname": {
required: true,
rangelength: [4, 20]
},
"email": {
required: true,
email: true
},
"password": {
required: true,
rangelength: [4, 20]
},
"confirm_password": {
required: true,
equalTo: "#password"
}
},
messages: {
"firstname": {
required: "請輸入用戶名",
rangelength: "請輸入4-20位字母開頭的字母或數字和下劃線"
},
"email": {
required: "請輸入郵箱地址",
email: "請輸入正確的email地址"
},
"password": {
required: "請輸入密碼",
rangelength: "請輸入4-20位字母開頭的字母或數字和下劃線"
},
"confirm_password": {
required: "請再次輸入密碼",
equalTo: "兩次輸入密碼不一致",
}
}
});
});
</script>
</head>
<body>
<form id="signupForm" method="post" action="">
<table width="100%">
<tr>
<td class="tdcon">用戶名:</td>
<td>
<input type='text' name="firstname" id="firstname" value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td class="tdcon">郵箱:</td>
<td>
<input type='text' name="email" id="email" value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td class="tdcon">密碼:</td>
<td>
<input type='text' name="password" id="password" value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td class="tdcon">確認密碼:</td>
<td>
<input type='text' name="confirm_password" id="confirm_password" value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td></td>
<td>
<button name="Submit" type="submit">同意以下服務條款並註冊</button></td>
</tr>
</table>
</form>
</body>
</html>
如果用的話就可以在class屬性裏面設置設置規則 如:
class="{required:true,minlength:5,messages:{required:'請輸入內容'}}"
class="{required:true,minlength:5,equalTo:'#password'}"使用jquery.metadata.js的例子如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.metadata.js</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.metadata.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery.validator.addMethod("phone", function (val, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(val));
}, "請正確填寫您的電話號碼");
validator = $('#jqueryForm').validate(/*{
focusInvalid: true,
onkeyup: false,
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
},
highlight: function(element, errorClass) { //針對驗證的表單設置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.html(" ").addClass("checked");
},
rules:{
phone:{
required:true,
phone:true
}
}
}*/);
/*$("#btn").click(function(){
validator.resetForm();
}); */
});
</script>
</head>
<body>
<form id="jqueryForm" name="jqueryForm" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tr>
<td>用戶名</td>
<td>
<input type="text" name="username" class="{required:true,minlength:6,maxlength:10}" /></td>
<td></td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" name="password" id="password" class="{required:true,minlength:6,maxlength:10}" /></td>
<td></td>
</tr>
<tr>
<td>確認密碼</td>
<td>
<input type="password" name="repass" class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}" /></td>
<td></td>
</tr>
<tr>
<td>手機號碼</td>
<td>
<input type="text" name="phone" id="phone" class="{required:true,phone:true}" /></td>
<td></td>
</tr>
<tr>
<td>郵箱</td>
<td>
<input type="text" name="email" class="{required:true,minlength:6,maxlength:50,email:true}" /></td>
<td></td>
</tr>
<tr>
<td>
<input type="submit" id="btn" value="提交" />
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>