开发常用 -- 校验表单 -- 手机号码的校验-正则

要求：必填，符合手机号的规则

html：

      <el-form
        :model="phone"
        :rules="rules"
        ref="formValidate"
        label-width="120px"
        style="width: 90%"
      >
        <el-form-item label="手机号码:" prop="phone" class="phone">
          <el-input v-model.trim="formValidate.phone" placeholder="请输入手机号码" @blur="changePhone"></el-input>
        </el-form-item>
      </el-form>

js： 

引入 validate.js

import validate from "@/utils/validate";

 validate.js文件内容：

/**
 * 检查手机号码是否合法
 */
function checkPhone(userPhone){
  if(userPhone == "" || userPhone == null){
    return {data: false, msg: '请输入手机号码'};
  }
  var telreg = /^(((1[0-9]{1}[0-9]{1}))+\d{8})$/;
  if(!telreg.test(userPhone) || userPhone.length != 11){
    return {data: false, msg: '手机号码格式不正确'};
  }
  return {data: true, msg: ''};
}

export default {
  checkPhone
}

使用： 

  data() {
    return {
      formValidate: {
        phone: '',
      },
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback, source, options) => {
              let error = [];
              let checkRes = validate.checkPhone(value);
              if (!checkRes.data) {
                error.push(checkRes.msg);
              }
              callback(error);
            },
            trigger: "blur",
          },
        ]
      },
    };
  },