vue中两个或多个input输入框必填一个原来可以这样实现!(输入框二选一必填校验函数+英文数字/中文数字正则)
简单快速实现两个输入框必填一个加正则校验(用校验函数实现两个输入框必填一个,加输入框只能输入中文和数字,另一个只能输入英文和数字)保姆式教学!
·
需求:1.两个输入框至少填一个;2.一个只能输入英文和数字,另一个只能输入中文和数字。
接下来我们分三步来实现:
第一步:定义校验函数(因为有两个输入框,所以这里两个输入框的校验函数)
var validateNameZh = (rule, value, callback) => {
if (this.makeBrandFrom.nameEn == '' && value == '') {
callback(new Error('中文名英文名必填一个'))
} else {
callback()
}
};
var validateNameEn = (rule, value, callback) => {
if (this.makeBrandFrom.nameZh == '' && value == '') {
callback(new Error('中文名英文名必填一个'))
} else {
callback()
}
};
这里我们需要注意一下书写位置(放在data里面)
第二步:把我们的校验函数添加到校验规则里面and把输入时的正则也写好
rules: {
nameZh: [{
pattern: /[\u4e00-\u9fa50-9]/,
message: '只能输入中文或数字',
trigger: 'blur'
},
{
validator: validateNameZh,
trigger: 'blur'
},
],
nameEn: [{
pattern: /[a-zA-Z0-9]/,
message: '请输入英文或数字',
trigger: 'blur'
}, {
validator: validateNameEn,
trigger: 'blur'
},
],
}
注意:路由规则也是写在data里面,并且需要与你的表单进行绑定哦!
第三步:到这里已经完成了,让我们一起看看效果吧!
更多推荐
已为社区贡献1条内容
所有评论(0)