vue中手机号码+座机号码、邮箱正则校验规则封装

简介: vue中手机号码+座机号码、邮箱正则校验规则封装

直接上代码:

封装验证器:

export function isvalidPhone(phone) {
  const isPhone = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/ //11位合法手机号码
  const isMob1 = /0\d{2,3}\d{7,8}/ //不带-的座机:02985111752
  const isMob2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/ //带一个-:029-85111752
  const isMob3 = /^\d{3,4}-\d{3,4}-\d{3,4}$/; //带三个-: 0752-250-520
  if (isMob1.test(phone) || isMob2.test(phone) || isMob3.test(phone) || isPhone.test(phone)) {
    return true
  } else {
    return false
  }
}

export function validEmail(email) {
  const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
  return reg.test(email)
}

组件中使用:
form表单中写入自定义校验规则

data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入合法的电话号码'))
      } else {
        callback()
      }
    }
    const validMail = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback()
      } else if (value === this.email) {
        // callback(new Error('新邮箱不能与旧邮箱相同'))
      } else if (validEmail(value)) {
        callback()
      } else if (!validEmail(value)) {
        callback(new Error('请输入合法的邮箱'))
      }
      return{ 
        rules: {
        custName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        phone: [
          // { required: false, message: '请输入联系电话', trigger: 'blur' },
          { required: false, validator: validPhone, trigger: 'blur' }
        ],
        email: [
          { required: false, validator: validMail, trigger: 'blur' }
        ]
      }
     }
}

看效果:
在这里插入图片描述
失焦后进行校验。

相关文章
|
1月前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
197 63
|
2月前
Vue3——基于tdesign封装一个通用的查询组件
Vue3——基于tdesign封装一个通用的查询组件
97 3
|
2月前
|
JavaScript NoSQL Redis
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
这篇文章记录了在Vue中实现修改手机号和邮箱的大致流程,包括使用过滤器部分隐藏展示的手机号和邮箱,以及通过点击触发路由跳转的便捷方式。文章还描述了旧号码和新号码验证的界面实现,其中验证码由后端生成并通过弹窗展示给用户,未来可以接入真正的手机验证码接口。此外,还提供了修改邮箱的页面效果截图,并强调了学习是一个永无止境的过程。
Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证(版本1.0)
|
2月前
|
JavaScript API 开发者
vue自定义Hooks函数使用和封装思想
【8月更文挑战第8天】vue自定义Hooks函数使用和封装思想
108 1
|
2月前
|
JavaScript 数据安全/隐私保护
Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容
这篇文章介绍了在Vue中如何使用过滤器来隐藏手机号和邮箱等字符串的中间部分内容,以提高隐私保护。文章展示了实现效果,并提供了实现过程的代码示例,包括HTML部分的绑定、data部分的数据定义和script部分的过滤器定义。文章还解释了过滤器的概念、语法和使用方式,并提供了一个外部链接供读者获取更加详细的过滤器知识。
|
16天前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
64 22
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
16 1
|
10天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
25 4
|
2月前
|
JavaScript 测试技术 持续交付
在vue中封装第三方组件的标准
在Vue.js项目中,第三方组件库虽能提升开发效率与用户体验,但直接使用可能导致代码结构混乱和样式冲突。为此,本文介绍如何优雅封装第三方组件,包括封装的目的、准备步骤、具体实现方法及处理样式冲突的策略。通过创建专门的封装组件、设计简洁的接口以及有效地管理样式,不仅能统一应用风格,还能显著提高代码的可维护性和可复用性。此外,还提供了封装Element UI Button组件的具体示例,帮助开发者更好地理解封装流程。
|
2月前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!

热门文章

最新文章