vue el-input的多种验证
一、对于input输入框只能做数字输入的情况下限制<div><el-form-item label="开户行:" prop="bankName" ><el-input v-model="formData.bankName" maxlength="100"@keyup.native="proving"/></el-form-item></div&
·
一、对于input输入框只能做数字输入的情况下限制
<div>
<el-form-item label="开户行:" prop="bankName" >
<el-input v-model="formData.bankName" maxlength="100" @keyup.native="proving"/>
</el-form-item>
</div>
proving() {
this.formData.bankName = this.formData.bankName.replace(/[^\.\d]/g,'');
this.formData.bankName = this.formData.bankName.replace('.','');
},
二、el-input只能输入英文和数字(原生属性写法)
// 英文和数字
onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
// 4--20个字符,仅可为中英文、数字、下划线!
/^[\u4e00-\u9fa5_a-zA-Z0-9]{4,20}$/
// 6-16个字符
/^.{4,20}$/
// 手机正则验证
/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(value)
三、el-form搭配rules多重验证
var checkNameReg = (rule, value, callback) => { // 用户名限制
if (!value) {
return callback();
}
if (value) {
setTimeout(() => {
var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{4,20}$/; // 中英文、数字、下划线!
if (!reg.test(value)) {
callback(new Error('4--20个字符,仅可为中英文、数字、下划线!'));
} else {
callback();
}
}, 500);
}
};
var validatePass = (rule, value, callback) => { // 输入密码
if (value === '') {
callback(new Error('请输入密码'));
} else if(value) {
setTimeout(() => {
var reg = /^.{4,20}$/;
if (!reg.test(value)) {
callback(new Error('密码为6-16个字符'));
} else {
callback();
}
}, 500);
} else if(!value) {
return callback();
} else {
if (this.formData.checkPass !== '') {
this.$refs.formData.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => { // 确认密码
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.formData.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
const validateCard = (rule, value, callback) => { // 银行卡正则验证 6228480402564890018
if (
/([\d]{4})([\d]{4})([\d]{4})([\d]{4})([\d]{0,})?/.test(value) == false
) {
callback(new Error("请输入正确的银行卡号"));
} else {
callback();
}
};
const validatePhone = (rule, value, callback) => { // 手机正则验证
if ( /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(value) == false
) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
};
rules: {
name: [
{required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: checkNameReg }
],
mobile: [
{ required: true,message: "请输入登录手机号",trigger: "blur"},
{ validator: validatePhone }
],
phone: [
{ required: true,message: "请输入客户联系人电话",trigger: "blur"},
{ validator: validatePhone }
],
}
更多推荐
已为社区贡献9条内容
所有评论(0)