el-form表单验证遇到的问题总结

1.输入框只输入正整数

// 只能输入正整数
  <el-input 
    @input="(val)=>{textVal = val.replace(/[^\d]/g, '')}" 
    placeholder="退出重置（分钟）" 
    v-model="textVal">
  </el-input>
  // 只能输入正整数和：
  <el-input 
    @input="(val)=>{textVal = val.replace(/[^\d:]/g, '')}" 
    placeholder="退出重置（分钟）" 
    v-model="textVal">
  </el-input>

onInput(e) {
      // e.target.value = e.target.value(/[^\d.]/g, "");
      e.target.value = e.target.value
        .replace(/[^0-9.]/g, "")
        .replace(/^\./g, "")
        .replace(".", "dollar#dollar")
        .replace(/\./g, "")
        .replace("dollar#dollar", ".");
    },

2.自定义验证

在data里return外 在表单的每一项加prop="xxx",绑定验证，在表单的验证规则里写

3.清除验证

可以在进入表单前

 this.$nextTick(()=>{
        this.$refs['addForm'].clearValidate();
      })

4.表单中含有表格，表格中含有输入框，输入框不能为空的验证

 <el-table-column prop="addDeliveryFee" label="续费">
                <template slot-scope="scope">
                  <el-form-item
                  // 注意绑定的prop的形式要按照这样写
                    :prop="'areaData.' + scope.$index + '.addDeliveryFee'"
                    :rules="[
                      {
                        required: true,
                        message: '请输入续费',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      v-model.number="scope.row.addDeliveryFee"
                      style="width: 90px"
                      size="mini"
                    />
                  </el-form-item>
                </template>
</el-table-column>

5.想要让表单带有‘*’号，而不实际进行校验的话

只用在需要加*号的那一项，加required就可以了，不要写prop="xxx"了

<el-form-item label="Banner图:" required>
            <UploadSingle ref="upload" @upRes="handleImg" />
            <img
              v-show="editShow && urlUpload === ''"
              :width="120"
              :height="120"
              :src="addForm.bannerUrl"
              alt=""
            >
            <img
              v-show="editShow && urlUpload !== ''"
              :width="120"
              :height="120"
              :src="urlUpload"
              alt=""
            >
          </el-form-item>

6.上面第5项的情况适用于在自定义验证和表单组件自带的验证行不同时，可以考虑在保存时验证弹提示语的方法

saveConfirm(formName) {
      let linkBoolean = true
      if (this.urlUpload === '') {
        this.$message.error('请上传图片')
        linkBoolean = false
      } else if (
        this.addForm.targetType === 2 &&
        this.addForm.goodCategoryData.length === 0
      ) {
        this.$message.error('请指定商品')
        linkBoolean = false
      } else if (
        this.addForm.targetType === 4 &&
        this.addForm.goodCategoryData.length === 0
      ) {
        this.$message.error('请选择分类')
        linkBoolean = false
      } else if (this.addForm.targetType === 5 && this.addForm.urlLink === '') {
        this.$message.error('请输入链接内容')
        linkBoolean = false
      }
      if (linkBoolean) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            xxxxxxxxxxxxxxxxxxxxxxx
          } else {
            return false
          }
        })
      }
    },