Vue前端验证一个text只能输入手机号或邮箱

  • Post author:
  • Post category:vue

直接上代码:

element-ui 内部 text:

<el-form-item prop="username">
      <el-input v-model="ruleForm.username" placeholder="用户名" autofocus> </el-input>
</el-form-item>

检查对象: 

let checkPhoneOrEmail = function (rule,value,callback) { //这个对象同时校验phone和email
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱验证
        const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证
        if (! value) {
          return callback(new Error('用户名不能为空'))
        }else{
          if(value.indexOf("@") > 0 ){ //含有字母@
            setTimeout(() => {
              if (mailReg.test(value)) {
                callback()
              } else {
                callback(new Error('邮箱格式不正确'))
              }
            }, 100)
          }else{
            let re = new RegExp(reg);
            if (!re.test(value)) {
              callback(new Error('手机号格式不正确'));
            } else {
              callback();
            }
          }
        }
      };

规则限定: 

 rules: {
          username: [{required: true, message: 'a', trigger: 'blur'},
                    {validator: checkPhoneOrEmail, trigger: 'blur'}], //validator传入一个对象
 }

 


版权声明:本文为LiLi_code原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。