vue 手机格式验证

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 (/^(86)?(1)\d{10}$/.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' }], 
      }, 
    };
  },