Vue中使用Element-ui form和el-dialog进行自定义表单校验&清除表单状态

在日常后台管理的开发中会需要对用户输入的数据进行校验，结合element提供的弹窗来进行实际操作
校验用户输入&清除表单的状态

 <div>
    <el-button @click="dialogFormVisible=true">新增</el-button>
    <el-dialog
      @open="getOpen"
      @close="close" title="测试新增"
      :close-on-click-modal="false" 
      :visible.sync="dialogFormVisible"
       width="40%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="region">
          <el-select v-model="form.region" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Add">确 定</el-button>
      </div>
    </el-dialog>
  </div>

需要注意的时el-form的绑定值要和rules中写的校验需要一致，否则会导致不生效
下拉选择的触发trigger需要使用change
还有就是规则写完后要检查一下el-form-item 有没有加上prop 本人多次忘记加了导致看不到号排查了好久哈哈

 rules: {
        name: [
          {
            required: true,
            pattern: /^[a-zA-Z0-9]+$/,
            message: '只能输入数字或大小写字母',
            trigger: 'blur'
          }
        ],
        region: [{ validator: this.validatorRegion, trigger: 'change' }]
      }

validatorRegion是自定义的校验事件

  //自定义校验方法
    validatorRegion(rule, value, callback) {
      if (!this.form.region) {
        callback(new Error('请选择性别'))
      } else {
        callback()
      }
    },

但是会有一个问题就是自定义的校验规则没有必填的*号
我们用label提供的slot自己写一个


还有就是点击取消关闭弹窗后 再次打开表单的状态没有清除
我们查看官方文档有提供相应的方法直接调用就可以

这里我使用的是el-dialog的@open和@close来处理
需要注意的是要在清除方法外面用$nextTick处理一下在DOM渲染完成后在操作
不然会有问题
如果不需要清除的话可以不调用回调方法

 //弹框打开的时
    getOpen() {
      // 移除校验状态
      // this.$refs.form.resetField()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()

      })
    },
    //关闭弹窗
    close() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    }

最后放上全代码

<template>
  <div>
    <el-button @click="dialogFormVisible=true">新增</el-button>
    <el-dialog @open="getOpen" @close="close" title="测试新增" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="40%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="region">
          <label slot="label"><i style="color:red;">*&nbsp; </i> 性别</label>
          <el-select v-model="form.region" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          {
            required: true,
            pattern: /^[a-zA-Z0-9]+$/,
            message: '只能输入数字或大小写字母',
            trigger: 'blur'
          }
        ],
        region: [{ validator: this.validatorRegion, trigger: 'change' }]
      }
    }
  },
  methods: {
    //自定义校验方法
    validatorRegion(rule, value, callback) {
      if (!this.form.region) {
        callback(new Error('请选择性别'))
      } else {
        callback()
      }
    },
    Add() {
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$message.success('校验成功')
          this.dialogFormVisible = !this.dialogFormVisible
        } else {
          this.$message.warning('校验失败')
        }
      })

    },
    //弹框打开的时
    getOpen() {
      // 移除校验状态
      this.$nextTick(() => {
        this.$refs.form.clearValidate()

      })
    },
    //关闭弹窗
    close() {
    //清除用户输入
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>