Element UI中el-form表单花样校验，接口校验、遍历生成校验等应有尽有

 

上图校验规则：

• 活动名称：基础校验必填，要调接口来校验输入值的唯一性
• 选择输入：根据单选框结果来校验输入内容必须是数字还是中文，选第一种则只能填写数字，选第二种则只能填写中文
• 遍历输入：根据数组遍历生成的输入框，根据对应数据生成不同的校验。第一个对应数组数据是7，则输入值不允许大于7；第二个对应的数据是9，则输入值不允许大于9

rules校验多种用法：

1.  Form-Item里可以使用动态的rules参数来决定使用哪个校验，同样可以使用三目运算符进行判断
2.  遍历生成Form-Item时，生成的可以使用prop进行动态绑定
3.  自定义校验的时候可以进行传参，参数存放在回调函数rule

<el-form ref="formRef" :rules="rules" :model="form">
     <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name"/>
      </el-form-item>
      <!-- // 根据选择结果来添加不同的校验规则 -->
      <el-form-item label="选择输入" prop="num"
        :rules="!form.radioNum ?
        [{required: true,type: 'number',message: '请填写数字',trigger: 'blur'}]
            : [{ required: true, pattern: /^[\u0391-\uFFE5A-Za-z]+$/,message: '请填写中文',trigger: 'blur'}]"
      >
      <el-radio-group v-model="form.radioNum"@change="radioChange">
          <el-radio :label="0">第一种</el-radio>
        <!--// 数字类型的验证需要在 v-model 处加上 .number 的修饰符 -->
          <el-input
            v-if="form.radioNum == 0"
            v-model.number="form.num"
            style="width: 100px"
            placeholder="数字"
          />
          <el-radio :label="1">第二种</el-radio>
          <el-input
            v-if="form.radioNum == 1"
            v-model="form.num"
            style="width: 100px"
            placeholder="中文"
          />
        </el-radio-group>
      </el-form-item>
      <!--// 遍历生成input，同时绑定对应的prop -->
      <div v-for="(item, ind) in form.arr" :key="ind">
        <el-form-item :prop="`arr.${ind}.res`" label="遍历输入" >
          <el-input placeholder="请输入" v-model="item.res" />
        </el-form-item>
      </div>
</el-form>

<script>
// 按需引入封装好的校验唯一性接口
import {isExist} from '@/api/activity'
  export default {
    data () {
      return {
         form: {
            name: '',
            resource: '',
            radioNum:'',
            num:'',
            arr: [{ name: '第一个', res: '', num: 7 },
              { name: '第二个', res: '', num: 9 } ],
          },
      rules: {
        name: [{ required: true, message: '请填写活动名称', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              //  传入输入值进行接口传参自定义校验
                isExist({name: value }).then(res => {
                  if (res.bean)
                    return callback(new Error('该名称已存在，请重新输入'))
                  callback()
                })
              },
              trigger: 'blur'
            }]
      },
      };
    },
    created() {
        // 这里一般是调用接口获取数据，然后进行遍历添加校验规则
        // ind 自定义传参
        this.form.arr.forEach((item, ind) => {
          this.rules[`arr.${ind}.res`] = [
            { required: true, message: '请填写', trigger: 'blur' },
            { validator: this.numVali, ind, trigger: 'blur' } ]
        })
      }
    methods: {
        // 通过传参来定位数据（rule是存放接收参数的对象）
        numVali(rule, value, callback) {
              if (value > this.form.arr[rule.ind].num)
                return callback(new Error('填写数值大于限制值，请重新输入'))
              callback()
            },
         radioChange() {
             // 修改输入类型要清除原有校验
              this.$refs.formRef.clearValidate(['num'])
           }
    }
  }
</script>