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自动化注册全局组件脚本分享

    Vue自动化注册全局组件脚本分享

    这篇文章主要介绍了Vue自动化注册全局组件脚本,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 由浅入深讲解vue2和vue3的区别

    由浅入深讲解vue2和vue3的区别

    最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue无限滑动周选择日期的组件的示例代码

    Vue无限滑动周选择日期的组件的示例代码

    这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue开发中常见的套路和技巧总结

    Vue开发中常见的套路和技巧总结

    这篇文章主要给大家介绍了关于Vue开发中常见的套路和技巧的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue 解决多级动态面包屑导航的问题

    Vue 解决多级动态面包屑导航的问题

    今天小编就为大家分享一篇Vue 解决多级动态面包屑导航的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 解决vue.js 数据渲染成功仍报错的问题

    解决vue.js 数据渲染成功仍报错的问题

    今天小编就为大家分享一篇解决vue.js 数据渲染成功仍报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 在vue项目中引用Antv G2,以饼图为例讲解

    在vue项目中引用Antv G2,以饼图为例讲解

    这篇文章主要介绍了在vue项目中引用Antv G2,以饼图为例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 加载 vue 远程代码的组件实例详解

    加载 vue 远程代码的组件实例详解

    vue-cli 作为 Vue 官方推荐的项目构建脚手架,它提供了开发过程中常用的,热重载,构建,调试,单元测试,代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发
    2017-11-11
  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table的列隐藏问题解决

    这篇文章主要介绍了element-ui 中的table的列隐藏问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • element Dropdown组件意想不到的坑

    element Dropdown组件意想不到的坑

    本文主要介绍了element Dropdown组件意想不到的坑,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论