element form表单手机号校验

415 阅读1分钟
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
 <el-form-item label="手机号码" prop="phonenumber">
    <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
 </el-form-item>
</el-form>
 data() {
    const validatePhone = (rule, value, callback) => {
      // console.log(rule)
      // console.log(value)
      // console.log(callback)

      // 判断输入框中是否输入手机号
      if (!value) {
        callback(new Error("手机号不能为空"));
      }
      if (!/(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/.test(value)) {
        callback(new Error("手机号格式不正确"));
      }
      callback();
    };
    return {
      deptList: [],
      // 表单参数
      form: {},
      // 表单校验

      rules: {
        phonenumber: [
          { required: true, trigger: "blur", message: "请输入11位手机号" },
          {
            required: true,
            trigger: "blur",
            min: 11,
            max: 11,
            message: "长度不符合",
          },
          { required: true, trigger: "blur", validator: validatePhone },
        ],
      },
    };