vue3 如何给表单添加表单效验+正则表达式

本文主要是介绍vue3 如何给表单添加表单效验+正则表达式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

校验要求
我们的表单中有密码、电话号码 ，两项。

我们设置用密码为3到20位的非空字符

电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。

<el-form-item label="手机号" prop="tel"><el-input v-model="ruleForm.tel" :rules="rules" /></el-form-item><el-form-item label="密码" prop="cipher"><el-input v-model="ruleForm.cipher" :rules="rules" /></el-form-item>

 做类型声明：

interface RuleForm {tel: stringcipher: string
}

然后对页面数据进行绑定：

const rules = reactive<FormRules<RuleForm>>({tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },{validator: checkEmail,trigger: 'blur'},],cipher: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 3,max: 20,message: '密码为3~20位非空字符',trigger: 'blur'},{validator: checkUserName,trigger: 'blur'},],
})

正则表达式：

//定义手机号校验规则
const checkEmail = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {const regEmail = /^1[3-9]\d{9}$/;if (value === '') {callback(new Error("输入不能为空"))} else if (regEmail.test(value)) {return callback();}callback(new Error("请输入正确手机号"));
}
//密码效验规则
const checkUserName = (_rule: any, value: string, callback: (arg0: Error | undefined) => void) => {if (value.trim() === '') {callback(new Error("密码不可为空"))} else {return callback();}
}

这篇关于vue3 如何给表单添加表单效验+正则表达式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---