当前位置：首页 > article >正文

ElementPlus自定义表单验证

article 2025/3/6 21:13:19

在写登录、注册、信息提交等页面时，经常需要校验用户填的信息是否正确，ElementPlus提供了基础的校验规则，但有些复杂的规则要自己写，写了无数次，还是忘记怎么写，现在记录一下

密码的校验规则

定义规则

一般情况下，密码都是由字母、数字组合，规则如下：

// 密码的验证规则
const validPassword = (rule, value, callback) => {
    let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
    if (!reg.test(value)) {
        callback(new Error('密码必须是由6-20位字母+数字组合'))
    } else {
        callback()
    }
}

核心在于正则表达式

使用

// 在rules中添加如下校验规则
password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { validator: validPassword, trigger: 'blur' }
],

只要添加一个validator就行了

确认密码的校验规则

逻辑是这次的密码必须与上次的一样

// 确认密码的验证规则
const validPassword2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== form.value.password) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
}

使用不再单独放了

邮箱的校验规则

// 邮箱的验证规则
const validEmail = (rule, value, callback) => {
    let reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
    if (!reg.test(value)) {
        callback(new Error('请输入正确的邮箱地址'))
    } else {
        callback()
    }
}