vue使用element ui自定义手机验证规则问题
更新时间:2022年12月29日 10:09:47 作者:像夏天一样热
这篇文章主要介绍了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 传入自定义校验回调参数
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中this.$http.post()跨域和请求参数丢失的解决
这篇文章主要介绍了vue中this.$http.post()跨域和请求参数丢失的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04Vue 组件(component)教程之实现精美的日历方法示例
组件是我们学习vue必须会的一部分,下面这篇文章主要给大家介绍了关于Vue 组件(component)教程之实现精美的日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-01-01vuex+axios+element-ui实现页面请求loading操作示例
这篇文章主要介绍了vuex+axios+element-ui实现页面请求loading操作,结合实例形式分析了vuex+axios+element-ui实现页面请求过程中loading遮罩层相关操作技巧与使用注意事项,需要的朋友可以参考下2020-02-02
最新评论