$.fn (插件方法)
.validator()
.validator( options )
描述:根据参数初始化验证,验证 jQuery 选中的表单
参数:{Object} options - 可选,参考配置选项
示例:
$('#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 - 表单验证通过的回调
示例:
$('#form1').validator(validCallback);
// 等同于
$('#form1').validator({
valid: validCallback
});
.validator( instanceMethod, arg1, arg2... )
描述:通过.validator()
方法调用实例方法
参数:{String} instanceMethod - 实例方法名称
参数:{Arguments} argn - 调用实例方法时的参数
示例:
// 清空表单验证消息
$('#form1').validator("cleanUp");
// 销毁表单验证
$('#form1').validator("destroy");
.isValid( callback )
描述:判断某个区域或者某个字段是否验证通过,如果字段中有异步 ajax 验证,需要通过 callback 获取验证结果
参数: {Function} callback - 回调函数
示例:
// 使用回调函数获取验证结果
$('#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 - 参考配置选项
示例:
// 即使 "#form1" 这个表单被动态加载,也可以验证
$.validator("#form1", {
timely: 2,
stopOnError: true,
fields: {
email: "required;email",
password: "required;length(6~16)",
mobile: "required;mobile"
}
});
.config(options)
描述:配置全局选项
参数:{Object} options - 参考配置选项
示例:
$.validator.config({
timely: 2
});
.setTheme(name, options)
描述:配置全局主题
参数:{String} name - 主题名称
参数:{Object} options - 参考配置选项
示例:
$.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}
示例:
$("#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 - 字段参数
示例:
$('form').validator("setField", "username", "required;");
// Remove the field's verification.
$('form').validator("setField", "username", null);
.setField(obj)
描述:动态配置字段参数
参数:{Object} obj - 字段参数 Hash
示例:
$('form').validator("setField", {
username: "required;username",
pwd: "required;password"
});
.showMsg(elem, obj)
描述:使字段提示消息(不推荐),推荐使用.trigger("showmsg")
参数:{Element | jqSelector} elem - DOM 元素或者 jQuery 选择器
参数:{Object} obj - 参数
示例:
// 单个字段提示消息
$('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")
参数:{Element|jqSelector} elem - DOM 元素或者 jQuery 选择器
示例:
$('#form1').validator('hideMsg', '#mobile');
// or
$('#form1').data('validator').hideMsg('#mobile');
.holdSubmit(hold)
描述:防止表单重复提交的措施
参数:{Boolean} hold - 是否控制表单提交
示例:
$("#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()
描述:清除表单中的全部验证消息
示例:
$('#form1').validator('cleanUp');
.destroy()
描述:销毁表单验证实例
示例:
$('#form1').validator('destroy');
实时修改规则 怎么用??
[...]Form动态规则 https://validator.niceue.com/docs/methods.html[...]
.setField(key, field)这个方法用字段name有效,但是用#id无效
我也碰到这个问题了,请问楼主怎么解决,我现在页面有多了相同name,只有id不同
$('#form1').validator('cleanUp');和$('#form1').validator('hideMsg', '#mobile');
都有副作用啊,它是能去掉校验信息但是执行完以后整个表单或者校验块都不能正确校验了,需要必填校验的 没有填写任何内容就提交过去了 。
我调用了$("form").isValid()方法,返回的是false,但是页面没有提示,我有什么办法获取所有的错误信息变量吗?
应该有提示才对吧,否则你正常也是没提示的
难道是因为没有等到回调函数返回呢,这个值还没有被修改
我跟踪了一下代码,走到if (!isvalid)的地方时,isvalid=false,在validator里加个断点:
在调用callback的时候,也就是我定义的function (v) { isvalid=v },这个时候v=true的
我对三个元素的值做了验证,一个是用户名,一个是邮箱,我有一个必填项和格式的验证,我在用户名和邮箱输入框里,输入错误的格式或不输入,都会有提示的,就是提交的时候,做验证,$("form").isValid()返回的false