美文网首页
ElementUI验证手机号

ElementUI验证手机号

作者: FRESHOME | 来源:发表于2020-05-24 23:47 被阅读0次

1.input只能输入数字,其它自动过滤
2.长度控制11位
3.验证手机号格式

<el-input size="medium" v-model="select.phone" maxlength="11"></el-input>

rules: {
        phone: [{ validator: validatePhone, trigger: "change" }]
      }
      
watch: {
    "select.phone": function(curVal, oldVal) {
      if (!curVal) {
        this.select.phone = "";
        return false;
      }
      // 实时把非数字的输入过滤掉
      this.select.phone = curVal.match(/\d/gi) ? curVal.match(/\d/gi).join("") : "";
    }
  },  

// 手机号验证
const validatePhone = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入手机号"));
  } else {
    if (!/^1[3456789]\d{9}$/.test(value)) {
      callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  }
};    

语法:
match返回正则表达式匹配的值或值本身,
匹配不到的返回null,
重复匹配返回一次

var str="123aaasd456"
document.write(str.match(/\d+/g)) // 123,456
document.write(str.match("sd")) // sd
document.write(str.match("abc")) // null
document.write(str.match("a")) // a

相关文章

网友评论

      本文标题:ElementUI验证手机号

      本文链接:https://www.haomeiwen.com/subject/spzsahtx.html