elementUI表单校验汇总

场景一：动态输入框，并对输入框内容做特殊字符校验

<el-form-item
   v-for="(items, index) in serviceRuleForm.expression" 
   :key="index" 
   :label="index === 0 ? '表达式' : ''"
   :prop="'expression.'+index"
   :rules="rules.expression">
   <el-input
     v-model.trim="serviceRuleForm.expression[index]"
     size="mini"
     style=" 80%;"
     clearable
    />
    <div class="btnRight">
      <el-button
        type="text"
        icon="el-icon-circle-plus-outline"
        @click="addhandleExpression(serviceRuleForm.expression)"
       />
       <el-button
         type="text"
         icon="el-icon-delete"
         @click="deletehandleExpression(index, serviceRuleForm.expression)"
       />
   </div>
</el-form-item>

data() {
   const validateExpression = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入表达式'));
      }else if (/(=|&|%)/.test(value)) {
        callback(new Error('不支持特殊字符 = & %'));
      }else {
        callback();
      }
    };
    return {
        serviceRuleForm: {
            selector: { type: "none" },
            expression: ['']
        },
        rules: {
            expression: [
          　　{ required: true, validator: validateExpression, trigger: "blur" }
        　　 ]
        }
    }
}            

methods: {
    addhandleExpression(list) {
      var node = ''
      list.push(node)
    },
    deletehandleExpression(index, list) {
      if (Array.isArray(list) && list.length <= 1) {
        return this.$message.warning('表达式仅剩一条，不可删除！')
      } else if (Array.isArray(list) && list.length > 1) {
        list.splice(index, 1)
      }
    }
}