1.手机格式验证
1-1.封装 userPhone.js
function notString(value) {
return !value || typeof value !== 'string'
}
export function cellphoneValidator(_, value, callback) {
// 如果不是字符串,不验证
if (notString(value)) {
callback()
return
}
const cellphone = value.trim()
if (/^[1]([3-9])[0-9]{9}$/.test(cellphone)) {
callback()
} else {
callback(new Error('请输入正确的手机号'))
}
}
1-2.使用
<el-form :rules="rules" ref="ruleFrom" :model="ruleFrom">
<el-form-item label="手机号" prop="cellphone">
<el-input v-model.trim="ruleFrom.cellphone" placeholder="请输入" />
</el-form-item>
</el-form>
import { cellphoneValidator } from '@/utils/userPhone';
data() {
return {
rules: {
ruleFrom: {
cellphone: "",
},
cellphone: [{ validator: cellphoneValidator, trigger: 'blur' }],
},
};
},
2.境外号码验证
2-1.封装 userPhone.js
function notString(value) {
return !value || typeof value !== 'string'
}
export function phoneValidator(_, value, callback) {
// 如果不是字符串,不验证
if (notString(value)) {
callback()
return
}
const phone = value.trim()
//数字和横线 && 不能为手机
if (/^[0-9-]{0,}$/.test(phone) && !(/^1\d{10}$/.test(phone))) {
callback()
} else {
callback(new Error('请输入正确号码'))
}
}
2-2.使用
<el-form :rules="rules" ref="ruleFrom" :model="ruleFrom">
<el-form-item label="境外号码" prop="phone">
<el-input v-model.trim="ruleFrom.phone" placeholder="请输入" />
</el-form-item>
</el-form>
import { phoneValidator} from '@/utils/userPhone';
data() {
return {
rules: {
ruleFrom: {
phone: "",
},
phone: [{ validator: phoneValidator, trigger: 'blur' }],
},
};
},