vue使用element ui自定义手机验证规则问题
像夏天一样热 人气:0使用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 传入自定义校验回调参数
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容