Vue加ElementUi中的自定义表单校验以及Dialog取消后重置校验

1. 自定义表单校验，将表单校验统一放到utils/validate.js中

• 规则内容

// 账号
let codeReg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/
// 电话
let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

// 必须为数字
let numberReg = /^\d+$|^\d+[.]?\d+$/

// 密码
let passwordReg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/

// 联系人
let contactsReg = /^[\u0391-\uFFE5A-Za-z]+$/

let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

let emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/


// 电话号码的验证
export const validatePhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入手机号码'))
  }
  if (!phoneReg.test(value)) {
    callback(new Error('手机格式不正确'))
  } else {
    callback()
  }
}

// 邮箱的验证规则
export const validateEmail = (rule, value, callback) => {
  if (value !== '') {
    if (!emailReg.test(value)) {
      callback(new Error('邮箱格式不正确'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

• 规则使用

import {validatePhone, validateEmail} from '@/utils/validate'


export default {
    name:"",
      data() {
        return {
              userRules: {
                name: [
                  {required: true, message: '请输入用户名', trigger: 'blur'},
                  {min: 3, max: 6, message: '长度在 3 到 3 个字符', trigger: 'blur'}
                ],
                pwd: [
                  {required: true, message: '请输入密码', trigger: 'blur'},
                  {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                real_pwd: [
                  {required: true, message: '请再次输入密码', trigger: 'blur'},
                  {validator: validateRealPwd, trigger: 'blur'}
                ],
                phone: [
                  {validator: validatePhone, trigger: 'blur'}
                ],
                email: [
                  {validator: validateEmail, trigger: 'blur'}
                ],
              }
            };
          },
    }

2. Dialog关闭后校验提示和表单数据还在需要清除

给关闭按钮绑定点击时间，并在点击时间中清除校验提示和表单数据

给 dialog 添加属性 before-close

<el-dialog
      title="新增用户"
      :visible.sync="addUserDialog"
      width="30%"
      :before-close="addDialogColse">
</el-dialog>

定义方法

    // 弹框关闭前的操作
    addDialogColse() {
      this.$refs.userForm.resetFields()
      this.addUserDialog = false
    },