在網站開發過程中，有時我們需要驗證使用者輸入的資訊是否符合我們的要求，所以我們會對使用者提交的資料進行驗證。驗證分兩次進行，一次是在客戶端，一次在服務端。客戶端的驗證可以提升使用者的體驗。
jquery驗證外掛程式有很多，實現的功能也基本相同。本文介紹的只是jquery驗證外掛程式中的一種jquery.validate
jquery.Validation是一款優秀的jquery外掛程式,它能對客戶端表單進行驗證,並且提供了許多可以自訂的屬性和方法,良好的擴充性。
1.jquery.validate外掛功能
簡單實作客戶端資訊驗證，過濾不符合要求的資訊
2.jquery.validate官方地址
官方網址：http://jqueryvalidation.org/,有詳細的插件使用說明
官方demo：http://jquery.bassistance.de/validate/demo/
3.jquery.validate使用方法
1.引用js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>
2.css樣式，可自訂，簡單的只需要添加error樣式，也可使用官方demo中的樣式。
.error{
color:red;
margin-left:8px;
}
3.js程式碼
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
},
dateformat: "required",
terms: "required"
},
messages: {
firstname: "姓名不能为空",
username: {
required: "用户名不能为空",
minlength: jQuery.format("用户名只少由 {0} 字符组成")
},
password: {
required: "密码不能为空",
minlength: jQuery.format("密码只少由 {0} 字符组成")
},
password_confirm: {
required: "确认密码不能为空",
minlength: jQuery.format("确认密码只少由 {0} 字符组成"),
equalTo: "秘密与确认密码不一致"
},
email: {
required: "邮箱不能为空",
email: "邮箱格式不正确"
},
dateformat: "请选择性别",
terms: " "
},
// the errorPlacement has to take the table layout into account
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());
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
}
});
});
以上的程式碼只使用了外掛程式提供的屬性和方法。也可以自訂驗證方法。如
$.validator.addMethod("checkUserName", function(value) {
//value为验证的值，对应于元素id
//方法代码
}, '用户名格式不正确');
使用自訂方法也非常簡單，只需要 元素id:”checkUserName”
4.使用的html
<form id="signupform" autocomplete="off" method="get" action="">
<table>
<tr>
<td class="label"><label id="lfirstname" for="firstname">姓名</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lusername" for="username">用户名</label></td>
<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword" for="password">密码</label></td>
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label id="lemail" for="email">邮箱</label></td>
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
<td class="status"></td>
</tr>
<tr>
<td class="label"><label>性别</label></td>
<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
<table>
<tbody>
<tr>
<td style="padding-right: 5px;">
<input id="sex_men" name="dateformat" type="radio" value="0" />
<label id="lbl_sex_men" for="dateformat_eu">男</label>
</td>
<td style="padding-left: 5px;">
<input id="sex_women" name="dateformat" type="radio" value="1" />
<label id="lbl_sex_women" for="dateformat_am">女</label>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms">以阅读并同意网站条款.</label>
</div> <!-- /termswrap -->
</td>
</tr>
<tr>
<td class="label"></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="注册" />
</td>
</tr>
</table>
</form>
更多驗證方法的應用請查看http://jqueryvalidation.org/
