vue表单validate验证手机号、座机号、邮箱、微信号

手机号验证

/*自带的type属性:phone、email、date*/
<el-form-item prop="phone" label="手机号" :rules="[
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { type: 'phone', message: '请输入正确的手机号', trigger: ['blur', 'change'] }]">
 <el-input v-model="form.phone"></el-input>
</el-form-item>

 

<el-form-item prop="phone" label="手机号" :rules="[
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { validator: validateMobilePhone }]">
 <el-input v-model="form.phone"></el-input>
</el-form-item>

var validateMobilePhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('负责人手机号不可为空'));
  } else {
    var reg = /^1[3456789]\d{9}$/;
    if(!reg.test(value)){
     callback(new Error('请输入有效的手机号码'));
     return;
    }
    callback();
  }
};

 

座机号验证

var validatePhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('负责人座机号不可为空'));
  } else {
    var reg = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/;
    if(!reg.test(value)){
      callback(new Error('请输入有效的座机号码'));
      return;
    }
    callback();
  }
};

邮箱验证

var validateEmail = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请正确填写邮箱'));
  } else {
    var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if(!reg.test(value)){
      callback(new Error('请输入有效的邮箱'));
      return;
    }
    callback();
  }
};

微信号验证

var validateWeixin = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('微信号不能为空'));
  }else{
    var reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;
    if(!reg.test(value)){
      callback(new Error('请输入正确的微信号码'));
      return;
    }
    callback();
  } 
};

您可能还会喜欢: