ElementUI中动态生成的input进行规则验证

ElementUI中动态生成的input进行规则验证

项目需求：

前端根据后台传送的数据动态生成输入参数的input，每个参数的input可能是不同类型的，需要对每个input值进行校验。

template中页面展示的参数部分

          <el-col :span="7">
            <el-form-item prop="paramValue" :rules="rules.paramValue">
              <el-input v-model="param.value" :placeholder="$t('dict.paramsValueInfo')" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <span>
              {{ param.valueTips }}
            </span>
          </el-col>
        </el-row>

data() 中实现校验规则

data() {
      const validateParamValue = (rule, value, callback) => {
        const params = this.temp.params
        // console.log(params)
        for (const e in params) {
          if (params[e].paramType === 'str') {
            const v = params[e].value
            const min = params[e].paramValidate.min
            const max = params[e].paramValidate.max
            if (!(typeof (v) === 'string' && v.length >= min && v.length <= max)) {
              callback(new Error())
            }
          }
          if (params[e].paramType === 'int') {
            const v = parseInt(params[e].value)
            const min = params[e].paramValidate.min
            const max = params[e].paramValidate.max
            if (!(Number.isInteger(v) && v >= min && v <= max)) {
              callback(new Error())
            }
          }
          if (params[e].paramType === 'enum') {
            const v = params[e].value
            const pv = params[e].paramValidate
            if (pv.indexOf(v) < 0) {
              callback(new Error())
            }
          }
        }
        callback()
      }

return {） 定义rules

return{

temp: {
          id: '',
          name: '',
          dict_type: '',
          dict_generator: '',
          gendata: '',
          params: [], 
          create_time: ''
        },

rules: {
          paramValue: [{
            required: true,
            validator: validateParamValue,
            trigger: 'blur'
          }]
        }
 }

methods中

在创建功能中，当选择对应类型的参数时，动态生成 params 的值

changedict(selValue) {
        this.temp.params = []
        const pap = this.genOptions[selValue].params
        let tips = ''
        let tempValue = ''
        for (const e in pap) {
          if (pap[e][0] === 'str') {
            tips = this.$t('dict.str') + pap[e][1].min + '--' + pap[e][1].max
            tempValue = 'strTemp'
          }
          if (pap[e][0] === 'enum') {
            tips = this.$t('dict.enum') + pap[e][1].toString()
            tempValue = pap[e][1][0]
          }
          if (pap[e][0] === 'int') {
            tips = this.$t('dict.int') + pap[e][1].min + '--' + pap[e][1].max
            tempValue = Math.round((pap[e][1].min + pap[e][1].max) / 2)
          }
          **this.temp.params.push({
            name: e,
            value: tempValue,
            paramType: pap[e][0],
            paramValidate: pap[e][1],
            valueTips: tips
          })**
        }

在编辑功能时，需要根据ID获取到对应数据，并需要根据后台返回参数的类型，动态的生成参数取值的提示

getDictById() {
        // console.log('========' + this.editFlag + '========')
        fetchList(this.dictQuery).then(response => {
          const items = response.data.items
          this.temp.id = items[0].id
          this.temp.name = items[0].name
          this.temp.dict_type = items[0].type
          this.temp.dict_generator = items[0].generator
          this.temp.gendata = items[0].data
          // this.temp.params = items[0].params

          fetchTypeList().then(response => {
            const op = response.data.items
            const tempGenName = items[0].generator
            const tempParams = items[0].params
            for (const e in op) {
              if (tempGenName === op[e].name){
                const opParams = op[e].params
                for ( const a in opParams) {
                  for (const b in tempParams)
                    if (a === tempParams[b].name) {
                      let tips = ''
                      if ('str' === opParams[a][0]) {
                        tips = this.$t('dict.str') + opParams[a][1].min + '--' + opParams[a][1].max
                      }
                      if ('enum' == opParams[a][0]) {
                        tips = tips = this.$t('dict.enum') + opParams[a][1].toString()
                      }
                      if ('int' == opParams[a][0]) {
                        tips = this.$t('dict.int') + opParams[a][1].min + '--' + opParams[a][1].max
                      }
                      this.temp.params.push({
                        name: tempParams[b].name,
                        value: tempParams[b].value,
                        paramType: opParams[a][0],
                        paramValidate: opParams[a][1],
                        valueTips: tips
                      })
                    }
                }
              }
            }
          })
        })
      },

效果

参数值均符合要求

参数值不符合要求