写给小伙伴的表单校验汇总写管理台的前端来说，表单校验是再常见不过的了。本文涉及表单校验的几种情况，主要是方便复制粘贴�

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

写在前面

前段时间日常开发都是基于 elementUI 2.15，对于写管理台的前端来说，表单校验是再常见不过的了。
本文涉及表单校验的几种情况，不涉及校验内容具体细节。
el-form文档：element.eleme.io/#/zh-CN/com…
~~本文主要方便前端新同学 & 要写页面 PHP 复制粘贴。~~

基本校验

没啥好说的直接搬文档，注意 prop 和属性 key 对应上：

      <el-form-item label="基本" prop="p1">
        <el-input v-model="form.p1" clearable></el-input>
      </el-form-item>

  data() {
    return {
      form: {
        p1: ''
      },
      rules: {
        p1: [
          { required: true, message: '当前字段必填', trigger: 'blur' },
          { min: 3, message: '长度至少 3 个字符', trigger: 'blur' }
        ]
      }
    };
  },

多走一步: 修改 rules

【需求】表单内容是动态的，随着用户填写的内容不同，是否需要校验的字段会有变化。

条件1 时需要校验 k1, k2 字段，条件2 时没有 k2 字段, 故仅需要校验 k1 字段。
所有检验先都放到 rules 里。条件2 时 k2 对应的 el-form-item v-if="false"
条件1 时需要校验 k1, k2 字段，条件2 两个字段用户依然都可填写，但仅需要校验 k1 字段。
所有检验先都放到 defaultRules 里，rules 深拷贝一份并作为动态值相应修改即可。
```
  // 不同情况 k2 校验有无
  if (条件2) {
    this.rules.k2 = [];
  } else {
    this.rules.k2 = JSON.parse(JSON.stringify(this.defaultRules.k2));
  }
```
其实就是修改 rules。

多走一步: 修改 rule item

【需求】某字段 k1 若有旧数据不管长度都正常保存，新增修改该字段则文本长度要限制在20字以内。

初始长度限制 = min( 后台返回初始字段值长度, 20)。
若触发修改，立马把长度限制改到 20。

watch: {
  // 不同情况 k2 校验内容变化
  'form.k1'(n, o) {
    if (n) {
      this.rules.k1.push({
        max: 20, message: '长度最长 20 个字', trigger: ['blur', 'change']
      })
    }
  }
}

其实就是修改 rules 某个具体 key。

调后台或前端方法校验

基本还是搬文档：

    // 各种你自己定义的校验逻辑
    const noEmojiReg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        // 校验不通过
        callback(new Error('当前字段必填'))
      } else if (new RegExp(noEmojiReg).test(value)) {
        callback(new Error('当前字段不可输入表情包'))
      } else {
        // 校验通过
        callback()
      }
    }
    // rules 对应属性    
    rules: {
      p1: [{ validator: validatePass, trigger: ['blur', 'change'] }]
    }

前端各种正则校验，表单多数据关联限制就需要使用这种情况。自定义校验函数挂上去，回调正确就行。

数组内校验

比如说用户自定义添加一行一行数据且数据整体校验时，就要用这种。仔细看文档其实也能找到：

    <el-form :model="form" :rules="testRules" ref="form">
      <!-- 其他属性若干省略... -->      
      <!-- 主要看 props -->   
      <el-form-item
        v-for="(item, index) in form.testGroup"
        :label="`实验组 ${index} 变量`"
        :key="item.variables + index"
        :prop="`testGroup[${index}].variables`"
        :rules="testRules.testGroup"
      >
        <el-input v-model="item.variables"></el-input>
      </el-form-item>
    </el-form>

      testRules: {
        testGroup: {
          required: true,
          message: '实验组要设置对应变量',
          trigger: 'blur'
        }
      }

其他方式

有些场景不是表单，只是老板想要个类似的效果。OK，自己写判断 + 样式。
要校验内容复杂且不是表单。每个小模块单独校验，如果有问题加上特殊类名，提交校验通过判断时查一下有无这个类名。
之前写了这篇可以大致参考。

基本上就这些，后续其他情况碰到了再补充。
或者你有没遇到过实现起来比较复杂的校验，欢迎评论区留言讨论！！😝😝😝