vue 中 Element-UI 表单验证的几种方法

Posted 2021-09-13 dingwen_blog

文章目录

• • 在el-form-item单个添加验证
  • 在表单上加多个验证
  • 基础验证
  • 自定义验证

在el-form-item单个添加验证

做法：需要在el-form-item标签中加入 :rules=’'直接是验证的条件 ‘’

<el-form-item label="用户名"  :prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
    <el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>

在表单上加多个验证

做法：需要在el-form-item标签中加入 :rules=’'rules ‘’ ，然后在data()中写入rule{添加每个表单的验证}

<el-form   :model="formData" :rules="dateRule" ref="form">
    <el-form-item label="用户名" prop="userName">
        <el-input v-model="formData.userName"  type="password" placeholder="请输入用户名" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userPass">
       <el-input v-model="formData.userPass" :maxlength="18" placeholder="请输入密码" clearable></el-input>
    </el-form-item>
</el-form>

// data 中

rule: {
           userName:  loginName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        userPass: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ]
      }

基础验证

 { required: true, message: '请输入姓名', trigger: 'blur' },//不能为空
 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },//长度
 { required: true,
    pattern: /^[\\u4e00-\\u9fa5_a-zA-Z0-9.·-]+$/,
    message: '姓名不支持特殊字符',
    trigger: 'blur' }//正则

自定义验证

data() {
    let reg = /(?!^(\\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\\w~!@#$%^&*?]{6,12}$/
    var newPass= (rule, value, callback) => { 
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.oldPasswd === value) {
            callback(new Error('新密码与旧密码不可一致！'))
        } else {
            callback()
        }
    }

    }
    return {
        form: {
            newPasswd: ''
        },
        rules: {
            newPasswd: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: newPass, trigger: 'blur' }
            ]
        }
    }
}