jQuery表单验证插件Validator的使用方法
from表单数据的合法性验证是个很常见的需求，jQuery提供了一个插件：jquery validate 官网下载。
若想使用需先引用jquery.validate.js，并且要在jquery.js之后引用。
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script> 把现在写的项目拿来演示一下，其使用了bootstrap框架。
<form class="form-horizontal" id="fillForm" action="javascript:void(0);">
<div class="form-group">
<label for="new_userName" class="col-md-2 control-label">昵称</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" id="new_userName" name="new_userName" class="form-control" placeholder="输入新昵称(昵称确认后不可更改，4-10个字符)">
</div>
</div>
</div>
<div class="form-group">
<label for="new_userPwd" class="col-md-2 control-label">密码</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" id="new_userPwd" name="new_userPwd" class="form-control" placeholder="输入密码(5-15个字符)"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userPwd_twice" class="col-md-2 control-label">确认密码</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" id="new_userPwd_twice" name="new_userPwd_twice" class="form-control" placeholder="请再次输入密码"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userEmail" class="control-label col-md-2">邮箱</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input id="new_userEmail" name="new_userEmail" type="email" class="form-control" placeholder="输入个人邮箱"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userPhone" class="control-label col-md-2">手机</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</span>
<input type="text" id="new_userPhone" name="new_userPhone" class="form-control" placeholder="输入个人手机号"/>
</div>
</div>
</div>
<div class="form-group">
<label for="new_userBirth" class="control-label col-md-2">生日</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input id="new_userBirth" name="new_userBirth" class="form-control" placeholder="选择您的生日(1960~2012)" readonly />
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">性别</label>
<div class="radio col-md-8">
<label class="col-md-2">
<input type="radio" name="new_userGender" id="man" value="man">
男
</label>
<label class="col-md-2">
<input type="radio" name="new_userGender" id="woman" value="woman">
女
</label>
<label class="col-md-2">
<input type="radio" name="new_userGender" id="secret" value="secret" checked>
保密
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">院系</label>
<div class="col-md-8">
<div id="col_and_maj" class="input-group">
<div class="col-md-4">
<select id="new_userCollege" name="new_userCollege" class="form-control col-md-3 prov"></select>
</div>
<div class="col-md-4">
<select id="new_userMajor" name="new_userMajor" class="form-control col-md-3 city"></select>
</div>
</div>
</div>
</div>
<div class="form-group form-button">
<button type="reset" class="btn btn-default col-md-offset-8">重置</button>
<button id="fillFormSubmit" type="submit" class="btn btn-primary">确认</button>
</div>
</form> html文件跟平常一样，主要在js中进行验证：
$(function(){
jQuery.validator.addMethod("regUserName", function (value, element) {
return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value);
}, "注册昵称为4-10位数字、下划线、中文或英文字母，但不能全是数字");
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
//登录帐号合法性验证
jQuery.validator.addMethod("logAccountCheck", function (value, element) {
var length = value.length;
var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "昵称不符合登录规则");
$("#fillForm").validate({
errorElement: 'span',
errorClass: 'help-block',
focusInvalid: false,
rules: {
new_userName: {
required: true,
regUserName: true,
minlength: 4,
maxlength: 10
},
new_userPwd: {
required: true,
rangelength: [5, 15]
},
new_userPwd_twice: {
required: true,
equalTo: "#new_userPwd"
},
new_userEmail: {
required: true,
email: true
},
new_userPhone: {
required: true,
isMobile:true,
digits: true,
minlength: 11,
maxlength: 11
},
new_userBirth: {
required: true
},
new_userCollege: {
required: true
},
new_userMajor: {
required: true
}
},
messages: {
new_userName: {
required: '昵称不能为空',
minlength: '昵称最少为4位',
maxlength: '昵称最多为10位'
},
new_userPwd: {
required: '密码不能为空',
rangelength: $.validator.format("密码长度必须在 {0} 到 {1} 之间")
},
new_userPwd_twice: {
required: '此项不能为空',
equalTo: '两次输入的密码必须一致'
},
new_userEmail: {
required: '邮箱不能为空',
email: '邮箱格式不正确(例如: [email protected])'
},
new_userPhone: {
required: '电话号不能为空',
digits: '电话号必须是数字',
minlength: '电话号为11位',
maxlength: '电话号为11位'
},
new_userBirth: {
required: '生日不能为空'
},
new_userCollege: {
required: '学院不能为空'
},
new_userMajor: {
required: '专业不能为空'
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
success: function (label) {
label.closest('.form-group').removeClass('has-error').addClass('has-success');
label.remove();
},
errorPlacement: function (error, element) {
element.parent('div').after(error);
},
submitHandler: function (form) {
var result = {
"new_userName": $("#new_userName").val(),
"new_userPwd": $("#new_userPwd").val(),
"new_userEmail": $("#new_userEmail").val(),
"new_userPhone": $("#new_userPhone").val(),
"new_userBirth": $("#new_userBirth").val(),
"new_userGender": $("input[name='new_userGender']:checked").val(),
"new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val()
};
result.new_userIP = ip;
var res = JSON.stringify(result);
alert(res);
return false;
}
})
})
简单用法：
1.：rules里定义输入框规则，常见的有required, minlength, maxlength, email, 其中使用输入框的name属性来指定输入框。
2：messages里定义当输入内容不符合规则时显示的信息，如果自定义则显示默认的错误信息。
3：可以自定义规则，比如上面代码开头部分定义了自定义规则，可以根据自己的需求仿照代码即可，而且网上也提供了现成的自定义验证规则。
4：当输入框均符合规则时，可以点击提交，此时，会指定submitHandler函数，
更详细的使用教程可参考官网