vue 手机格式验证

原创已于 2024-01-18 14:40:19 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #java

于 2023-04-23 10:31:56 首次发布

1.手机格式验证

1-1.封装 userPhone.js

function notString(value) {
  return !value || typeof value !== 'string'
}

export function cellphoneValidator(_, value, callback) {
  // 如果不是字符串，不验证
  if (notString(value)) {
    callback()
    return
  }

  const cellphone = value.trim()
  if (/^[1]([3-9])[0-9]{9}$/.test(cellphone)) {
    callback()
  } else {
    callback(new Error('请输入正确的手机号'))
  }
}

1-2.使用

<el-form :rules="rules" ref="ruleFrom" :model="ruleFrom">  
   <el-form-item label="手机号" prop="cellphone">
       <el-input v-model.trim="ruleFrom.cellphone" placeholder="请输入" /> 
   </el-form-item> 
</el-form>

import { cellphoneValidator } from '@/utils/userPhone';


  data() {
    return { 
      rules: {
        ruleFrom: {
          cellphone: "",
        },
        cellphone: [{ validator: cellphoneValidator, trigger: 'blur' }], 
      }, 
    };
  },

2.境外号码验证

2-1.封装 userPhone.js

function notString(value) {
  return !value || typeof value !== 'string'
}

export function phoneValidator(_, value, callback) {
  // 如果不是字符串，不验证
  if (notString(value)) {
    callback()
    return
  }
  const phone = value.trim()

  //数字和横线 && 不能为手机
  if (/^[0-9-]{0,}$/.test(phone) && !(/^1\d{10}$/.test(phone))) {
    callback()
  } else {
    callback(new Error('请输入正确号码'))
  }
}

2-2.使用

<el-form :rules="rules" ref="ruleFrom" :model="ruleFrom">  
    <el-form-item label="境外号码"  prop="phone">
        <el-input v-model.trim="ruleFrom.phone" placeholder="请输入" />
    </el-form-item>
</el-form>

import { phoneValidator} from '@/utils/userPhone';


  data() {
    return { 
      rules: {
        ruleFrom: {
           phone: "",
        },
        phone: [{ validator: phoneValidator, trigger: 'blur' }], 
      }, 
    };
  },