表单验证

表单插件说明

页面级别

站点级别

插件级别（产品级别）

考虑

自定义属性的约定

1. 可以通过插件，配置错误的类名，如果没有配置，使用默认类名：field-error
2. 约定：错误类名，应该加到表单域的容器中
3. 【必填】约定：表单域（字段）容器是一个具有自定义属性 data-field-container的元素，该属性的值必须等于表单字段名。
4. 【必填】约定：要验证的表单域（字段）应该具有自定义属性data-field，该属性没有值
5. 约定：要验证的属性使用自定义属性```data-field-prop``指定，如果没有指定，验证value属性
6. 约定：要监听的事件使用自定义属性data-field-listener指定要监听的事件, 如果没有指定，使用默认值change事件
7. 约定：触发哪些表单域的相关验证。默认情况下，只处理自身的验证。可以通过data-field-trigger设置要验证的其他表单域，多个名称之间使用英文逗号分割，中间不能有空格
8. 约定：通过自定义属性data-field-error表示错误消息的元素，如果不写，则寻找类样式error

构造函数的参数

1. 表单的dom对象（特别注意，一个表单dom对象不一定是form元素）
2. 错误的类名，默认为field-error
3. 所有表单域的验证规则，这里，称之为表单规则
   1. 表单规则是一个对象
   2. 对象中的每一个属性名，对应表单的字段名
   3. 属性值表示规则数组，该插件验证时，会根据数组中提供的规则顺序进行验证，所有验证都是同步的。并且，如果一个验证失败，不会进行后续规则的验证
4. 每一个具体规则是一个对象，该对象中包含两个属性：
   1. rule属性，表示具体的规则
      1. 预设值：
         1. required：必填
         2. mail：邮箱
         3. number：数字
         4. 将来可能插件升级后，会有更多的预设值
      2. 正则
      3. 验证函数，使用验证函数后，message属性无效
         1. 函数具有两个参数
            1. value，表单当前表单域的值
            2. formData，整个表单数据
         2. 如果验证通过，返回true，否则，返回错误消息
   2. message属性，字符串，表示错误消息

通过构造函数创建的对象

1. 自动的，会根据相应的配置，对表单进行自动验证
2. 提供validate方法，并且，该方法返回验证结果
   1. 无参：验证整个表单
   2. 有参：验证指定的表单域
3. 提供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 "两次密码输入不一致"
                    }
                }
            }]
        }