jQuery validate 表单验证
html
<form class="userInfo-form validator" id="validatorForm">
<div class="row">
<div class="col-md-4">
<div class="md-form">
<input type="text" id="truename" pattern=".{1,10}" name="truename" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="truename" class=""><small class="red-text">*</small>真实姓名</label>
</div>
</div>
<div class="col-md-4">
<div class="md-form">
<input type="text" pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)" id="idcard" required name="idcard" class="form-control validate">
<label data-error="wrong" data-success="right" for="idcard" class=""><small class="red-text">*</small>身份证号</label>
</div>
</div>
<div class="col-md-4">
<div class="md-form">
<input type="text" pattern="1[3|4|5|8][0-9]\d{4,8}" id="mobile" required name="mobile" class="form-control validate">
<label data-error="wrong" data-success="right" for="mobile" class=""><small class="red-text">*</small>手机号码</label>
</div>
</div>
</div>
<button type="button" class="btn btn-tw waves-effect waves-light" id="submitForm"><i class="fa fa-save left"></i> 提交</button>
</form>
js
方法一：
$('#submitForm').click(function(){
formSerialize = $('#validatorForm').serialize();
$('#validatorForm').submit();
}）
$('#validatorForm').validate({
focusInvalid: true, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
$.ajax({
...
})
},
rules:{
truename:{maxlength:15,required:true},
idCard:{isZipCode:true}
},
errorPlacement: function(error, element) {}
}）
//身份证验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return this.optional(element) || reg.test(value);
}, "身份证号错误");
方法二：
$('#submitForm').click(function(){
if($('#validatorForm').valid()){
subMitInfo();
}
}）
function subMitInfo(){
var editEmployeeForm = $("#addEmployee").serialize() + '&id=' + editUserId;
$.ajax({...})
}
$('#addEmployee').validate({
focusInvalid: true, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
// submitHandler: function(form) { },
rules:{
...
},
errorPlacement: function(error, element) {}
})
