vue ant -design validator 自定义校验（可以不填，填了就校验）

最新推荐文章于 2024-08-24 09:07:37 发布

原创最新推荐文章于 2024-08-24 09:07:37 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ant #vue #前端

本文介绍了一种使用正则表达式进行手机号校验的方法，并通过Vue.js框架中的表单验证功能实现手机号的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机号校验


  <a-form-model  :rules="rules" :model="form">
  
  <a-form-model-item label="电话" ref="mobile" prop="mobile" has-feedback>
        <a-input v-model="form.mobile" placeholder="手机号码" />
   </a-form-model-item>
   </a-form-model>  
 

  data() {
    //手机号验证
    let PhoneValidator = (rule, value, callback) => {
      // 主要就是添加一个对空串的判断
      if (!value) {
        return callback()
      } else {
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        if (!reg.test(value)) {
          callback(new Error('请输入正确手机号'))
          return
        }
        callback()
      }
    }
    }
      
rules: {
        mobile: [{ validator: PhoneValidator, trigger: 'change' }]
      },