Vue验证手机号的同时验证座机号

前言

最近遇到了表单验证，验证是否是手机号码和座机号码，要是是的话通过验证，要是不是的话，则文字提示。因为自己不是很熟练这一部分，故写篇笔记记录一下，以免后面自己忘记或者混淆。

业务场景

手机号码是1xx-xxxx-xxxx的形式，座机号码是0xxx-xxxxxxxx的形式（其中x代表数字），则通过联系电话的验证，要是其他格式，则不通过验证。

解决

这里是表单的代码，表单上面绑定了rules。

 <el-col :span="8">
    <el-form-item label="联系电话：" prop="telephone" label-width="160px" >
       <el-input v-model="form.telephone" type="text"></el-input>
    </el-form-item>
 </el-col>

然后在rules里面加上联系电话的规则，在validator里面写上上面声明的验证规则定义的参数，我这边写的是checkPhone，注意要统一。然后在checkPhone里面就有手机号和座机号码的验证了。

data（）{ 
var checkPhone = (rule, value, callback) => {
    if (value === '') {
    callback(new Error('联系电话不可为空！'));
    } else {
      let regPone = null;
      let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则
      let tel = /^(0\d{2,3}-){0,1}\d{7,8}$/; //座机
      if (value.charAt(0) == 0) {   // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
        regPone = tel;
      } else {
        regPone = mobile;
      }
      if (!regPone.test(value)) {
        callback(new Error("请输入正确的电话格式！"))
      }
      callback();
    }
   }
return{
   rules: {
     telephone: [
          {
            required: true,
            trigger: "blur",
            validator: checkPhone
          }
        ],
   }
 }
}