一些正则验证（原生和element ui 自带的表单验证）

后续如果有需要还会补上他的
1.验证手机号码，当用户输入的手机号不符合要求，在输入框失去焦点的时候，清空用户输入的消息
显示的提示如下，使用的 element ui 的框架

代码如下
html部分

              <el-form-item  label="手机号">
                <el-input  v-model="searchComsuption.usePhone" placeholder="请输入手机号" @blur="blueText($event)" maxlength="11"></el-input>
              </el-form-item>

主要的是这里的 @blur="blueText($event)"事件
js部分，在methods方法里面写

    blueText(e) {
      if (!/^1[3456789]\d{9}$/.test(e.target.value)) {
        this.$message.warning("请输入正确手机号");
        this.searchComsuption.usePhone = "";
      }
    },

2.输入正整数的验证

<el-form-item label="逾期天数" >
         <el-input  v-model="alreadySearch.debtDateStart" placeholder='天数'  				@blur="blueText($event)"></el-input>
 </el-form-item>

    blueText(e) {
      let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value);
      if (!boolean) {
        this.$message.warning("请输入正整数");
        this.alreadySearch.debtDateStart = "";
      }
    },

3.下面放一个使用element ui自带的表单验证
效果图如下


注意用黄色框框标注的，都是要写的， prop 要和 v-model绑定的属性相同

<el-form  ref="addMerchant" :model="addMerchant" :rules="rules" :inline="true" size="medium">
        <el-col :span="14"  >
            <el-row>
                <el-col :span="12">
                  <el-form-item label="商户名称" prop="merchantName">
                    <el-input  v-model="addMerchant.merchantName" placeholder="请输入商户名称" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" >
                  <el-form-item label="输入密码" prop="password">
                    <el-input placeholder='请输入密码' v-model="addMerchant.password" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属公司" prop="companyName">
                    <el-input  v-model="addMerchant.companyName" placeholder="请输入所属公司" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input placeholder='请重新输入密码' v-model="addMerchant.confirmPwd" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
                  </el-form-item>
                    <!-- <el-form-item label="有效期截止日" prop="endTime">
                    <el-date-picker
                        v-model="addMerchant.endTime"
                        type="date"
                        placeholder="请选择有效期截止日">
                    </el-date-picker>
                    </el-form-item> -->
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="法人姓名" prop="companyLegalPerson">
                    <el-input  v-model="addMerchant.companyLegalPerson" placeholder="请输入法人姓名" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="联系手机" prop="companyPhone">
                        <el-input  v-model="addMerchant.companyPhone" placeholder="请输入商户登录账号"  maxlength="11" onkeyup="this.value=this.value.replace(/\s+/g,'')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div style="text-align: left;margin-top:32px;margin-left:26%">
                        <el-button type="primary"  @click="addMerchantSumbit()">提交</el-button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <el-button type="danger"  @click="addMerchantCancel()">取消</el-button>
                    </div> 
                </el-col>
            </el-row>
        </el-col>
      </el-form>

data里面rules的判断规则

      return {
        addMerchant: {
          password:'',
          confirmPwd:'',
        },
        rules: {
          merchantName: [{required: true, message: "请输入商户名称", trigger: "change"}],
          companyName: [{required: true, message: "请输入所属公司", trigger: "change"}],
          companyLegalPerson: [{required: true, message: "请输入法人姓名", trigger: "change"}],
          idFrontImg: [{required: true, message: "请上传身份证正面", trigger: "change"}],
          idBackImg: [{required: true, message: "请上传身份证反面", trigger: "change"}],
          companyLicense: [{required: true, message: "请上传营业执照", trigger: "change"}],
          companyPhone: [{required: true, validator: validatePhone, trigger: "change"}],
          password: [{required: true,  validator: validateNew, trigger: 'blur' }],
          confirmPwd: [{required: true,  validator: validateSure, trigger: 'blur' }]
        }
      }

当element ui提供的验证不满足需求的时候，我们可以自定义验证
在data里面，在return外面写这样代码

     let validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('手机号不能为空'));
        } else if(!(/^1[34578]\d{9}$/.test(value))) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback();
        }
      };
      
    let validateName = (rule, value, callback) => {
      if(value === ''){
        callback(new Error('内容不可为空'))
      }else if(/^\s*$/.test(value)){
        callback(new Error('内容不可全为空格'))
      }else{
        callback()
      }
    };
    
    let validateNew = (rule, value, callback) => {
      if (/[\u4e00-\u9fa5]/.test(value)) {
        callback(new Error("密码不可为中文"));
      } else if (/\s+/g.test(value)) {
        callback(new Error("密码不可为空格"));
      } else if(value === ''){
        callback(new Error('密码不能为空'));
      }else{
        callback();
      }
    };
    
      let validateSure = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('确认密码不能为空'));
        } else if(value != this.addMerchant.password) {
          callback(new Error('两次密码输入的不一致'));
        } else {
          callback();
        }
      };