常用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, //当未通过验证的元素获得焦点时,移除错误提示 });