表单插件说明
页面级别
站点级别
插件级别(产品级别)
考虑
自定义属性的约定
- 可以通过插件,配置错误的类名,如果没有配置,使用默认类名:field-error
- 约定:错误类名,应该加到表单域的容器中
- 【必填】约定:表单域(字段)容器是一个具有自定义属性
data-field-container
的元素,该属性的值必须等于表单字段名。 - 【必填】约定:要验证的表单域(字段)应该具有自定义属性
data-field
,该属性没有值 - 约定:要验证的属性使用自定义属性```data-field-prop``指定,如果没有指定,验证value属性
- 约定:要监听的事件使用自定义属性
data-field-listener
指定要监听的事件, 如果没有指定,使用默认值change事件 - 约定:触发哪些表单域的相关验证。默认情况下,只处理自身的验证。可以通过
data-field-trigger
设置要验证的其他表单域,多个名称之间使用英文逗号分割,中间不能有空格 - 约定:通过自定义属性
data-field-error
表示错误消息的元素,如果不写,则寻找类样式error
构造函数的参数
- 表单的dom对象(特别注意,一个表单dom对象不一定是form元素)
- 错误的类名,默认为field-error
- 所有表单域的验证规则,这里,称之为表单规则
- 表单规则是一个对象
- 对象中的每一个属性名,对应表单的字段名
- 属性值表示规则数组,该插件验证时,会根据数组中提供的规则顺序进行验证,所有验证都是同步的。并且,如果一个验证失败,不会进行后续规则的验证
- 每一个具体规则是一个对象,该对象中包含两个属性:
- rule属性,表示具体的规则
- 预设值:
- required:必填
- mail:邮箱
- number:数字
- 将来可能插件升级后,会有更多的预设值
- 正则
- 验证函数,使用验证函数后,message属性无效
- 函数具有两个参数
- value,表单当前表单域的值
- formData,整个表单数据
- 如果验证通过,返回true,否则,返回错误消息
- 函数具有两个参数
- 预设值:
- message属性,字符串,表示错误消息
- rule属性,表示具体的规则
通过构造函数创建的对象
- 自动的,会根据相应的配置,对表单进行自动验证
- 提供validate方法,并且,该方法返回验证结果
- 无参:验证整个表单
- 有参:验证指定的表单域
- 提供getFormData方法,该方法返回整个表单对象
简单版配置规则
var formRule = {
loginId: [{
rule: "required",
message: "请填写账号"
},
{
rule: /^.{6,12}$/,
message: "账号必须是6-12位字符"
}
],
pwd: [{
rule: "required",
message: "请输入密码"
}],
loves: [{
rule: "required",
message: "请至少选择一个爱好"
}],
pwdAgain: [{
rule: "required",
message: "请填写确认密码"
}, {
rule: function(value, formData) {
if (value === formData.pwd) {
return true;
} else {
return "两次密码输入不一致"
}
}
}]
}