最近在做项目时，有一个需求是校验姓名中不含有数字
(1) // 校验联系人
validateName(rule, value, callback) {
if (new RegExp('[0-9]').test(value)) {
callback(new Error(rule.message || '请输入正确的联系人'))
}
callback()
}
(2) // 校验手机号
validatePhoneNum(rule, value, callback) {
let phone = /^1[3456789]\d{9}$/
var tel = /^0\d{2,3}-?\d{7,8}$/
if (value) {
if (value.length === 11) {
if (!phone.test(value)) {
callback(new Error(rule.message || '请输入正确的联系方式'))
return
} else {
callback()
}
} else if (value.length === 13 && value.indexOf('-') !== -1) {
if (!tel.test(value)) {
callback(new Error(rule.message || '请输入正确的联系方式'))
return
} else {
callback()
}
} else {
callback(new Error(rule.message || '请输入正确的联系方式'))
return
}
}
callback()
},
(3)
/**
* 校验输入的数字必须是正整数
* @param {*} rule
* @param {*} value
* @param {*} callback
*/
export function validateIntegerNum(rule, value, callback) {
let val = new RegExp('^[1-9][0-9]*$').test(value)
if (value && !val) {
callback(new Error(rule.message || '此项必须输入正整数'))
} else {
callback()
}
}
// 校验规则
rules: {
// 表单字段 phoneNum
phoneNum: [
{
validator: validateRequire,
message: '请输入电话号码',
trigger: ['change']
},
{ validator: this.validatePhoneNum, message: '请输入正确的电话号码', trigger: ['blur', 'change'] }
],
// 表单字段 name
name: [{validator: this.validateName, message: '请输入正确的联系人', trigger: ['change']}]
}
传入 rule, value, callback这三个参数，这样校验器就可以写入表单元素中，当表单提交时就会按照表单元素的校验法则去展示错误消息，如下图：