常用Jquery.validate.js
官网:https://jqueryvalidation.org/
//自定义验证用户名长度
$.validator.addMethod("userLen", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
//自定义验证用户名字符
$.validator.addMethod("userStrType", function(value, element, param) {
var pre = /^[A-Za-z0-9\u4e00-\u9fa5]+$/u;
return this.optional(element) || (pre.test(value));
}, $.validator.format("请输入字母、数字、汉字"));
//自定义密码验证
$.validator.addMethod("password", function(value, element, param) {
var pre = /[\u4e00-\u9fa5\s]+/u;
return this.optional(element) || (!pre.test(value));
}, $.validator.format("密码不得包含空格和中文"));
//自定义手机号验证
$.validator.addMethod("isMobile", function(value,element) {
var length = value.length;
var mobile = /^1[3456789]\d{9}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的联系电话");
//验证
var validator = $("#loginForm").validate({
//debug:true, //调试模式,即使验证成功也不会跳转到目标页面
rules: {
username: {
required: true,
userLen:[4,14],
userStrType:true
},
password: {
required: true,
rangelength:[6,14],
password: true
},
code: {
required: true,
rangelength: [4,4]
},
mobile: {
required: true,
isMobile:true
},
mobileCode:{
required: true,
rangelength: [4,4]
},
},
messages: {
username: {
required: "请输入用户名"
},
mobile: {
required: "请输入手机号"
},
password: {
required: "请输入密码",
rangelength:"密码不正确"
},
code: {
required: "请输入验证码",
rangelength: "验证码不正确"
},
mobileCode: {
required: "请输入验证码",
rangelength: "验证码不正确"
}
},
submitHandler:function(form){
send();
},
success:function(label){ //成功验证后执行
// label.text('').append('<span class="checked iconfont icon-success"></span>');
},
//errorPlacement: function(error, element); //错误信息位置设置方法
//error.appendTo( element.parent().next() ); //这里的element是录入数据的对象
//是否在获取焦点时验证
//onfocusout:false,
//是否在敲击键盘时验证
//onkeyup:false,
//focusInvalid:true, //提交表单后,(第一个)未通过验证的表单获得焦点
//focusCleanup:true, //当未通过验证的元素获得焦点时,移除错误提示
});