vue使用element ui自定义手机验证规则问题
作者：像夏天一样热
这篇文章主要介绍了vue使用element ui自定义手机验证规则问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用element ui自定义手机验证规则
1.表单的一项
<el-form-item label="电话" prop="senderPhone"> <el-input v-model="packageInfo.senderPhone"></el-input> </el-form-item>
2.制定验证规则
data() {
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
console.log(reg.test(value));
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
};
return {
packageInfo:{
senderName:'asdas',
senderPhone:'',
},
packageInfoRules:{
senderName:[
{ required: true, message: '请输入寄件人姓名', trigger: 'blur' },
],
senderPhone:[
{required:true, validator:checkPhone, trigger: ['blur', 'change'] }
]
},
element-ui form组件自定义校验
<el-form-item
label="活动时间"
prop="activityTime">
<el-date-picker v-model={this.form.activityTime.startTime}/>
</el-form-item>form表单内 元素关联值为对象关键字
data () {
// 活动时间校验
const checkActivityTime = (rule, value, callback) => {
if (!value.startTime) {
callback('请选择活动开始时间')
} else if (!value.endTime) {
callback('请选择活动结束时间')
} else if (dayjs(value.endTime).isSameOrBefore(dayjs(value.startTime))) {
callback('结束时间不得等于或晚于当前开始时间')
} else if (dayjs().isAfter(dayjs(value.endTime))) {
callback('结束时间不得晚于当前时间')
} else {
callback()
}
}
return {
rules: {
activityTime: [
{ required: true, validator: checkActivityTime, trigger: 'change'}
]
}
}
},自定义校验内容可直接在data方法中定义
validator 传入自定义校验回调参数
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。