vue表单validate验证手机号、座机号、邮箱、微信号_vue required: true, 手机号码-CSDN博客

本文介绍了如何在Vue中进行表单验证，详细讲解了手机号、座机号、邮箱和微信号的验证方法，涵盖了各个验证步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机号验证

/*自带的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();
  } 
};