🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## $.fn (插件方法) ### .validator() #### .validator( options ) **描述**:根据参数初始化验证,验证 jQuery 选中的表单 **参数**:*{Object}*options - 可选,参考[配置选项](https://validator.niceue.com/docs/options.html) **示例**: ~~~javascript $('#form1').validator({ timely: 2, stopOnError: true, fields: { email: "required;email", password: "required;length(6~16)", mobile: "required;mobile" }, valid: function(form) { $.post("path/to/server", $(form).serialize()) .done(function(){ // some code }); } }); ~~~ #### .validator( validCallback ) **描述**:初始化验证,验证 jQuery 选中的表单,验证通过后执行回调 **参数**:*{Function}*validCallback - 表单验证通过的回调 **示例**: ~~~javascript $('#form1').validator(validCallback); // 等同于 $('#form1').validator({ valid: validCallback }); ~~~ #### .validator( instanceMethod, arg1, arg2... ) **描述**:通过`.validator()`方法调用实例方法 **参数**:*{String}*instanceMethod - 实例方法名称 **参数**:*{Arguments}*argn - 调用实例方法时的参数 **示例**: ~~~javascript // 清空表单验证消息 $('#form1').validator("cleanUp"); // 销毁表单验证 $('#form1').validator("destroy"); ~~~ ### .isValid( callback ) **描述**:判断某个区域或者某个字段是否验证通过,如果字段中有异步 ajax 验证,需要通过 callback 获取验证结果 **参数**:*{Function}*callback - 回调函数 **示例**: ~~~javascript // 使用回调函数获取验证结果 $('#mobile').isValid(function(v){ if (v) { // do something } }); // v0.10.5+ 还支持下面这种写法,即回调不带参数,就是验证通过的回调 $('#mobile').isValid(function(){ // do something }); // 如果验证的字段中没有 ajax 异步验证,直接获取结果也是可以的 if ( $('#mobile').isValid() ) { // do something } ~~~ ## $.validator (静态方法) ### $.validator(selector, options) **描述**:初始化表单。如果`selector`选择的元素存在于 DOM,其等同于`$(selector).validator(options)`这种写法。如果不存在,nice-validator 会预初始化该选择器选中的表单,等到该表单存在时就可以直接被验证。 **参数**:*{jqSelector|Element}*selector - jQuery 选择器(支持预初始化),或者 DOM Element **参数**:*{Object}*options - 参考[配置选项](https://validator.niceue.com/docs/options.html) **示例**: ~~~javascript // 即使 "#form1" 这个表单被动态加载,也可以验证 $.validator("#form1", { timely: 2, stopOnError: true, fields: { email: "required;email", password: "required;length(6~16)", mobile: "required;mobile" } }); ~~~ ### .config(options) **描述**:配置全局选项 **参数**:*{Object}*options - 参考[配置选项](https://validator.niceue.com/docs/options.html) **示例**: ~~~javascript $.validator.config({ timely: 2 }); ~~~ ### .setTheme(name, options) **描述**:配置全局主题 **参数**:*{String}*name - 主题名称 **参数**:*{Object}*options - 参考[配置选项](https://validator.niceue.com/docs/options.html) **示例**: ~~~javascript $.validator.setTheme("myTheme", { formClass: "nice-flat", msgClass: "n-right", timely: 2, stopOnError: true }); ~~~ ## instance (实例方法) > 实例方法需要获取对象实例,才能调用。 > 验证初始化的时候会自动初始实例,通过`$form.data('validator')`可以获取到实例 ### .test(elem, rule) **描述**:验证字段是否符合指定的规则 **参数**:*{Element}*elem - DOM 元素 **参数**:*{String}*rule - 规则 **返回**:*{Boolean}* **示例**: ~~~javascript $("#myForm").validator({ rules: { loginName: function(element) { return /^[a-zA-Z]\w{3,}/.test(element.value) || this.test(element, "mobile") || this.test(element, "email") || 'Please fill user name, phone number or E-mail'; } }, fields: { username: "required; loginName", password: "required; length(6~16)" } }); ~~~ ### .setField() #### .setField(key, field) **描述**:动态配置字段参数 **参数**:*{String}*key - 字段 name 或者 #id **参数**:*{Object}*field - 字段参数 **示例**: ~~~javascript $('form').validator("setField", "username", "required;"); // Remove the field's verification. $('form').validator("setField", "username", null); ~~~ #### .setField(obj) **描述**:动态配置字段参数 **参数**:*{Object}*obj - 字段参数 Hash **示例**: ~~~javascript $('form').validator("setField", { username: "required;username", pwd: "required;password" }); ~~~ ### .showMsg(elem, obj) **描述**:使字段提示消息(不推荐),推荐使用[.trigger("showmsg")](https://validator.niceue.com/docs/events.html#section-2-2) **参数**:*{Element | jqSelector}*elem - DOM 元素或者 jQuery 选择器 **参数**:*{Object}*obj - 参数 **示例**: ~~~javascript // 单个字段提示消息 $('form').validator('showMsg', '#mobile', { type: "error", msg: "Phone number already exists." }); // 映射消息到多个字段 $('form').validator('showMsg', { mobile: { type: "error", msg: "Phone number already exists." }, email: { type: "error", msg: "Email already exists." } }); ~~~ ### .hideMsg(elem) **描述**:使字段隐藏消息(不推荐),推荐使用[.trigger("hidemsg")](https://validator.niceue.com/docs/methods.html#section-3-4) **参数**:*{Element|jqSelector}*elem - DOM 元素或者 jQuery 选择器 **示例**: ~~~javascript $('#form1').validator('hideMsg', '#mobile'); // or $('#form1').data('validator').hideMsg('#mobile'); ~~~ ### .holdSubmit(hold) **描述**:防止表单重复提交的措施 **参数**:{Boolean} hold - 是否控制表单提交 **示例**: ~~~javascript $("#myForm").validator({ valid: function(form){ var me = this; // Before submitting the form, hold form, to prevent duplicate submission. me.holdSubmit(); $.ajax({ url: "xxx.php", data: $(form).serialize(), type: "POST", success: function(){ // After the form is submitted successfully, release hold. me.holdSubmit(false); } }); } }); ~~~ ### .cleanUp() **描述**:清除表单中的全部验证消息 **示例**: ~~~javascript $('#form1').validator('cleanUp'); ~~~ ### .destroy() **描述**:销毁表单验证实例 **示例**: ~~~javascript $('#form1').validator('destroy'); ~~~