ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 规则定义方式 ### (1). 正则 适用于使用单个正则能搞定的验证 ~~~javascript // 使用数组包裹正则和错误消息,规则不通过时提示该消息 mobile: [/^1[3458]\d{9}$/, '请检查手机号格式'] // 或者,直接定义正则,需要另外定义错误消息,否则提示默认消息 mobile: /^1[3458]\d{9}$/ ~~~ ### (2). 函数 函数方式具有最大的灵活性,搞定任何验证。不同返回值,导致不同验证结果: | 返回值 | 结果 | 描述 | | --- | --- | --- | | return undefined(无返回) | | 不影响验证结果不提示消息(继续验证下一个规则) | | return null | | 忽略本次验证(跳过该字段的验证,如果已经显示了消息将会自动隐藏) | | return true | √通过 | | | return false | ×不通过 | | | return "" | √通过 | | | return "错误消息" | ×不通过 | 提示“错误消息” | | return {"ok": "正确"} | √通过 | 提示“正确” | | return {"error": "错误消息"} | ×不通过 | 提示“错误消息” | | return $.ajax() | | ajax验证,等待服务器返回验证结果 | 例1:自定义规则,如果通过返回true,否则返回错误消息 ~~~javascript mobile: function(element, params) { return /^1[3458]\d{9}$/.test(element.value) || '请检查手机号格式'; } ~~~ 例2:使用内置的`.test()`方法检测是否符合某个规则 ~~~javascript loginName: function(element) { return /^[a-zA-Z]\w{3,}/.test(element.value) || this.test(element, "mobile")===true || this.test(element, "email")===true || '请填写用户名、手机号或者邮箱'; } ~~~ 例3:自定义 ajax 验证 ~~~javascript // 你只需要将 $.ajax 返回,并且保证 response 符合上面的返回值说明,其他的插件都会自动处理。 // 当然,你也可以加上 success 回调做点别的,或者自己加上自定义 header myRemote: function(element){ return $.ajax({ url: 'check/username.php', type: 'post', data: element.name +'='+ element.value, dataType: 'json' }); } ~~~ 例4:无返回值,对验证结果没有影响 ~~~javascript passwordStrength: function() { // 密码强度验证 和 UI处理 } ~~~ 例5:动态跳过当前字段的验证 ~~~javascript myRule: function() { if (foo) { return "Error Message" } // 跳过验证(当前规则之后的所有规则都不被验证) else (bar) { return null } } ~~~ ## 规则作用范围 ### (1). 全局 使用`$.validator.config()`,建议配置在 local 配置文件(如:zh-CN.js)中 任何实例,任何字段都能访问到该规则 ~~~javascript $.validator.config( rules: { mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"], chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"] } ); ~~~ ### (2). 当前实例 在调用初始化验证的时候传参,只对调用时的实例有效 ~~~javascript $("#myForm").validator( rules: { mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"], chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"] } ); ~~~ ### (3). 当前字段 只能通过 DOM 方式在表单元素上定义 ~~~html <input name="demo" data-rule="required;xxx" data-rule-xxx="[/^\d{6}$/, '请输入6位数字']"> ~~~