表单验证:jquery.validate,在做表单验证的时候经常使用;

参考网站http://www.runoob.com/jquery/jquery-plugin-validate.html

参考DEMO:http://www.runoob.com/try/try.php?filename=jquery-plugin-errorcontainer

 

默认校验规则:

required: true 值是必须的。
required: “#aa:checked” 表达式的值为真,则需要验证。
required: function(){} 返回为真,表示需要验证。

后边两种常用于,表单中需要同时填或不填的元素。

默认参数如下:

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:”check.php” 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:”#field” 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

 

校验的规则:

Debug

$helpUserReplaceDiaForm.validate({debug:true})//只验证,不提交

如果多个页面都需要调多个表单

$.validator.setDefaults({
   debug: true
})

备注:写模块的时候,这么用,发现设置Debug无效(表单提交是通过submitHandler 提交

errorPlacement:更改错误信息显示的位置;

validate-中文API

名称 返回类型 描述
validate(options) Validator 验证所选的 FORM。
valid() Boolean 检查是否验证通过。
rules() Options 返回元素的验证规则。
rules(“add”,rules) Options 增加验证规则。
rules(“remove”,rules) Options 删除验证规则。
removeAttrs(attributes) Options 删除特殊属性并且返回它们。
自定义选择器
:blank Validator 没有值的筛选器。
:filled Array <Element> 有值的筛选器。
:unchecked Array <Element> 没选择的元素的筛选器。
实用工具
jQuery.format(template,argument,argumentN…) String 用参数代替模板中的 {n}。

 

Validator

validate方法返回一个Validator对象,validator对象有很多方法可以用来引发校验程序或者改变form的内容;下面是常用的方法

名称 返回类型 描述
form() Boolean 验证 form 返回成功还是失败。
element(element) Boolean 验证单个元素是成功还是失败。
resetForm() undefined 把前面验证的 FORM 恢复到验证前原来的状态。
showErrors(errors) undefined 显示特定的错误信息。
Validator 函数
setDefaults(defaults) undefined 改变默认的设置。
addMethod(name,method,message) undefined 添加一个新的验证方法。必须包括一个独一无二的名字,一个 JAVASCRIPT 的方法和一个默认的信息。
addClassRules(name,rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。
addClassRules(rules) undefined 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。

 

内置的验证方式

名称 返回类型 描述
required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的结果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。
remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度范围 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格式。
range(range) Boolean 设置值的范围。
url() Boolean 验证 URL 格式。
date() Boolean 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。
dateISO() Boolean 验证 ISO 类型的日期格式。
dateDE() Boolean 验证德式的日期格式(29.04.1994 或 1.1.2006)。
number() Boolean 验证十进制数字(包括小数的)。
digits() Boolean 验证整数。
creditcard() Boolean 验证信用卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码。

 

验证函数DEMO如下:

formValidate:function(){
$helpUserReplaceDiaForm.
validate({
rules: {
qrcode: {
required: true
},
linkman: {
required: true
},
mobile: {
required: true,
},
district_code: {
required: true
},
address: {
required: true
},
reason: {
required: true,
}
}
,
messages: {
qrcode: {
required: "请填写或者扫描设备二维码"
},
linkman: {
required: "请填写联系人"
},
mobile: {
required: "请填写联系电话"
},
district_code: {
required: "请选择所属区域"
},
address: {
required: "请填写详细地址"
},
reason: {
required: "请填写换货原因"
}
}
,
errorPlacement: function (error, el) { //更改错误信息显示的位置处理
var msg = error.html(),
$p = el.closest('div.wui-form-item');
if
($p.length == 0) {
$p = el.
closest('div.wui-form-itemother')
}

var $explain = $p.children('.wui-form-explain');

if (msg !== '') {
if ($explain.length == 0) {
$explain =
$('<p class="wui-form-explain wui-tiptext"></p>');
$explain.appendTo($p);
}
$explain.
html('<i class="iconfont">&#xe611;</i>' + msg);
$p.addClass('wui-form-item-error');
} else {
$explain.
remove();
//$explain.html('');
$p.removeClass('wui-form-item-error');
}
}
,
success: function (label) { //成功
},
submitHandler: function (fm) { //验证通过后,保存数据
console.log("验证通过");
}
})
}
,

自定义验证规则如下:

$.validator.addMethod("isQrcode", function (value, element) {
var qrcode = $.trim(value);
if
(!qrcode) {
return false;
}
})
;

可以做一些验证是否是URL,是否是手机号,是否身份证等验证;

——

表单填充:jquery.formautofill

参考网站:https://github.com/creative-area/jQuery-form-autofill

参考DEMO:http://labs.creative-area.net/jquery.formautofill/doc/

优点是,获取服务端返回的数据时候,可以自动识别name或者ID来填充数据;

如果是用户填写的数值,弹窗新窗口让用户确认数据的时候,这个时候并不适合用(如果用的话,需要在确认页面,对应项目设置ID,插件配置findbyname: false,获取用户输入的值,保存在对象中,对象的key值对应ID;)

~~~~~