Skip to content

Latest commit

 

History

History
206 lines (151 loc) · 5.73 KB

avueform表单验证.md

File metadata and controls

206 lines (151 loc) · 5.73 KB

对于 web 开发来说，表单验证是永远跨不过去的坎。一般来说，客户端和服务端都需要进行表单验证。客户端验证是为了防止每次验证都发起网络请求，影响用户使用体验；但是也需要在表单提交时进行服务端验证，因为客户端验证是不可靠的，用户可以在浏览器跳过客户端验证直接提交。

对于客户端表单验证，通常要通过编写大量的重复代码实现。本文研究 avue 框架如何基于配置进行表单验证。avue 是基于 element-ui 做了一层封装，而 element-ui 的表单验证基于 async-validator async-validator 项目地址 。

async-validator 支持以下验证类型(type)：

  • string：必须是类型string。This is the default type.

  • number：必须是类型number。

  • boolean：必须是类型boolean。

  • method：必须是类型function。

  • regexp：必须是RegExp创建新项时不生成异常的实例或字符串RegExp。

  • integer：必须是类型number和整数。

  • float：必须是类型number和浮点数。

  • array：必须是由...确定的数组Array.isArray。

  • object：必须是类型object而不是Array.isArray。

  • enum：价值必须存在于enum。

  • date：值必须有效，由确定 Date

  • url：必须是类型url。

  • hex：必须是类型hex。

  • email：必须是类型email。

结合 avue、element-ui、async-validator 项目文档， 总结了以下常用的表单验证规则：

必填必选

使用 required 属性定义需要。

必填

rules:[{
  required: true,
  message: "请输入活动名称",
  trigger: "blur"
}]

mark

必选

rules:[{
  type: 'array',
  required: true,
  message: "请选择活动性质",
  trigger: 'change'
}]

mark

mark

范围

使用 min 和 max 属性定义范围。

对于string和array类型进行比较length，对于number类型，数量不得小于min或大于max。

rules: [{
    type: 'string',
    message: '字符串长度必选在5-10位',
    min: 5,
    max: 10,
    trigger: 'blur'
}]

markmark

长度

使用 len 属性验证字段的确切长度。

对于 string 和 array 类型比较length，对于 number 类型，此属性指示完全匹配number，即，它可能仅严格等于len。

如果 len 属性与 min 和max 范围属性组合，len 则优先。

rules: [{
  type: 'string',
  message: '字符串长度必须为5位',
  len: 5,
  trigger: 'blur'
}]

markmark

邮箱

邮箱 email 是 async-validator 内部支持的验证类型。

rules: [{
  type: 'email',
  message: '请输入正确的邮箱地址',
  trigger: 'blur'
}]

markmark

正则表达式

pattern 规则属性指示一个正则表达式的值必须匹配, 才能通过验证。

rules: [{
  required: true,
  pattern: /^1[34578]\d{9}$/,
  message: '请输入正确的手机号',
  trigger: 'blur'
}]

markmark

多规则验证

在实际业务中，一个字段经常会有多个验证规则。比如，必填且长度为5.

rules: [{
  required: true,
  message: '请输入内容',
  trigger: 'blur'
},{
  len: 5,
  message: '内容长度必须为5位',
  trigger: 'blur'
}]

markmark

自定义验证

实际开发中，会有一些需要自定义（定制）的验证。比如密码的再次确认。

使用 validator 属性指向自定义的验证方法，便可以使用自定义验证。

export default {
    data() {
      var validatePass = (rule, value, callback) =>{
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validatePassAgain = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        formData:{
        },
        formOption:{
          column:[{
            label:'密码',
            prop:'password',
            hide:true,
            rules: [{ 
                validator: validatePass, 
                trigger: 'blur' 
            }]
          }, {
            label:'确认密码',
            prop:'confirmPassword',
            hide:true,
            rules: [{ 
                validator: validatePassAgain, 
                trigger: 'blur' 
            }]
         }
      }
    },
    methods: {
    }
}

markmarkmark