vue element-plus表单验证

笔者的版本为"element-plus": "^2.9.3", vue": "^3.2.13" 具体的验证方法应该参考官网

[官网组件总览](https://element-plus.org/zh-CN/component/overview)

官网提供了很多的案例，每个哪里都有示例代码，直接抄就行了

[另外参考](https://blog.youkuaiyun.com/ymzhaobth/article/details/120820053)

1. 编写验证规则

const registerDataRules = reactive({

username: [

{ required: true, message: '请输入用户名', trigger: 'blur' },

{ min: 1, max: 16, message: '用户名的长度必须为5~16位', trigger: 'blur' }

],

password: [

{ required: true, message: '请输入密码', trigger: 'blur' },

{ min: 6, max: 16, message: '密码长度必须为6~16位', trigger: 'blur' }

],

rePassword: [

{ validator: rePasswordValid, trigger: 'blur' }

],

email:[

{ required: true, message: '请输入邮箱', trigger: 'blur' },

{ min: 8, max: 16, message: '必须输入邮箱格式', trigger: 'blur', type: 'email' }

],

verifyCode:[

{ required: true, message: '请输入验证码', trigger: 'blur' },

{ min: 8, max: 8, message: '验证码长度必须为8位', trigger: 'blur' }

]

})

2. 基于ref方法获取到表单项目

const ruleFormRef = ref(); // 获取表单 必须要获取表单才能实现基于非同步的验证

3. 在业务代码中验证

调用获取表单对象的.value.validate方法可以对所有的东西进行验证 如果验证失败会异常 注意这是一个异步函数要await

在位置1和位置2都能写业务代码 在位置2写业务代码可以不写await 但是在位置1必须写await否则不会等验证代码就执行了

例子：

在按钮按动发送请求前验证：

const register = async () => {

try {

//调用表单的validate方法，执行表单校验

await ruleFormRef.value.validate((valid, fields) => {

if (valid) {

console.log('submit!') // 位置2

} else {

console.log('error submit!', fields)

})



}catch(e) {

return

}

// 位置1

let data = registerData.value

let result = await userRegisterService(data);

ElMessage.success(result.message||"注册成功");

setTimeout(()=>{ //设置延时

isRegister.value = true

}, 1000);



}

4. 如果不在函数中验证 也会直接跳过验证 直接发送请求

5. 验证随意一项：如果你不想验证所有的 可以使用这个函数：validateField

const verify = async () =>{

try {

//调用表单的validate方法，执行表单校验

await ruleFormRef.value.validateField("email",()=>{//写法和前面的一样})

}catch(e) {

return

}

let data = registerData.value.email

let result = await userVerifyService(data)

ElMessage.success(result.message||"验证成功");

}