ElementUI中校验常见输入内容的正则表达式💥
# ElementUI中遇到的校验汇总
# 限制input输入框只能输入大小写字母、数字、下划线的正则表达式:
<el-input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">
# 限制input输入框只能输入小写字母、数字、下划线的正则表达式:
<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');">
# 限制input输入框只能输入数字和点的正则表达式:
<el-input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">
# 限制input输入框只能输入中文的正则表达式:
<el-input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
# 限制input输入框只能输入数字的正则表达式:
<el-input type="text" onkeyup="this.value=this.value.replace(/^[0-9]*$/g,'')">
# 限制input输入框只能输入英文的正则表达式:
<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
# 限制input输入框只能输入中文、数字、英文的正则表达式:
<el-input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">
# 限制input输入框只能输入数字和字母的正则表达式:
<el-inputt onKeyUp="value=value.replace(/[\W]/g,'')">
# 限制input输入框除了英文的标点符号以外,其他的都可以中文,英文字母,数字,中文标点的正则表达式:
<el-input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">
# 限制input输入框只能输入数字代码(小数点也不能输入)的正则表达式:
<el-input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
# 限制input输入框只能输入数字,能输小数点.的正则表达式:
<el-input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<el-input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
# 限制input输入框只能输入字母和汉字的正则表达式:
<el-input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">
# 限制input输入框只能输入英文字母和数字,不能输入中文的正则表达式:
<el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
# 限制input输入框只能输入数字和英文的正则表达式:
<el-input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
# 限制input输入框小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号的正则表达式:
<el-input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
# 限制input输入框小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:的正则表达式:
<el-input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
# 不可输入中文:
<el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')">
# 不可输入空格:
<el-input onkeyup="onkeyup="value = value.replace(/\s+/g, '')">
# 只能是数字+小数点且只能保留两位:
<el-input onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="state.form.price">
# 代码示例:
- 给username添加只能输入英文或数字的校验:

- 在rules中添加如下代码:

# 详细代码:
- 校验只能输入英文或数字
username: [ { required: true, message: "请输入用户名", trigger: "blur", }, { validator: function (rule, value, callback) { if (/^[^\w]/g.test(value)) { callback(new Error("请输入英文或数字")); } else { callback(); } }, trigger: ["blur"], }, ]
- 校验邮箱
email: [ { required: true, message: "邮箱不能为空", trigger: "blur" }, { pattern: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur", }, ],
- 校验电话号码
phone: [ { required: true, message: "电话不能为空", trigger: "blur" }, { pattern: /^((0\d{2,3}-\d{7,8})|(1[358497]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur", }, ],
- 校验身份证号码
identityId: [ { required: true, message: "身份证号不能为空", trigger: "blur", }, { pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur", }, ],
- 校验input不能全为空格
code: [ { required: true, message: "编号不能为空" }, { required: true, transform: (value) => value && value.trim(), message: "编号不能全部为空", trigger: "blur", }, ],
- 校验input数字框第一位不为0
count: [ { required: true, message: "分配数量不能为空", trigger: "blur", }, { validator: function (rule, value, callback) { if (/^[1-9][0-9]*\.?[0-9]*$/.test(value)) { callback(); } else { callback(new Error("第一位不能为0/负数")); } }, trigger: ["blur"], }, ],
# Vue3中的表单验证问题
- el-form中需要绑定model属性(属性值为一个对象,el-form-item 中使用v-model需要绑定model绑定的对象属性才能起到作用)和rules规则
- el-form-item需要绑定prop属性(值为rules规则里面的一条,这样绑定完以后就可以进行校验了)
- el-from-item中就可以放置一些自己使用的表单元素了,需要使用v-model绑定el-from对象中的属性

const loginForm = ref(null) // form表单信息 const form = ref({ mobile: '', // 用户手机号 password: '', // 用户密码 mobileCode: '', // 手机验证码 verifyCode: '', // 动态码 }) const rules = { mobile: [ { required: true, message: '请输入手机号', trigger: ['blur', 'change'] }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur'] }, ], password: [ { required: true, message: '请输入密码', trigger: ['blur', 'change'] }, { pattern: /^[^\s\u4e00-\u9fa5]{8,}$/, message: '最短8位,不允许输入空格和中文', trigger: ['blur', 'change'] }, ], verifyCode: [ { required: true, message: '请输入图形验证码', trigger: ['blur'] }, { max: 4, min: 4, message: '图形验证码应该是4位', trigger: ['blur'] }, ], mobileCode: [ { required: true, message: '请输入短信验证码', trigger: ['blur'] }, { min: 6, max: 6, message: '请输入 5 到 10 位的密码', trigger: ['blur', 'change'] }, ], }
- 当我们在点击的时候需要进行二次校验,只有在校验通过的时候才可以提交数据,我们可以使用ref获取到要提交的表单,然后调用validate方法即可
//获取表单 const refuseForm = ref(null) // form表单信息 // 在登录之前进行二次数据校验 const submitForm = () => { refuseForm.value.validate(async (valid) => { if (valid) { // 提交表单逻辑 } else { ElMessage.error('数据格式错误!') return false } }) }
这里注意到一点,如果你是在遍历中进行的表单校验,就需要额外注意,否则就会出现这个错误:

- 我们把拿到的refuseForm对象打印出来,发现原来遍历后需要加上下标才能访问到validate函数:

- 所以在遍历中想要二次校验表单,我们就需要给函数传递一个下标这样就可以正确的找到form对象了
// 假设已经在v-for遍历的DOM中 <`el-button @click="roomRefuse(index)" size="small">确定<`/el-button> const roomRefuse = (item, index) => { refuseForm.value[index].validate((valid) => { if (valid) { // 二次校验成功执行对应逻辑代码 } }); };
# 有些场景我们简单校验未必满足我们的要求,所以有时候我们需要进行自定义校验函数来辅助完成 首先在rules中设置校验规则:
const rules = { ConfirmPassword: [ { required: true, message: '请输入密码', trigger: ['blur'] }, { validator: validatePassword, trigger: 'blur' }, ], }
这个validatePassword就是我们需要进行自定义校验的函数了
其中自定义校验函数的三个参数分别是:
rule 参数:表示当前校验的规则对象,包含了当前字段相关的校验规则。
value 参数:表示当前字段的值。它是需要校验的字段的值。
callback 参数:表示校验的回调函数。在自定义校验函数中,需要调用 callback 函数来通知表单校验结果。
// 自定义校验函数(确认密码) const validatePassword = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else if (value !== form.value.password) { callback(new Error('两次输入密码不一致')); } else { callback(); } };