vue常用的表单验证

vue 常用的表单验证，包括手机号码，固定电话和身份证…

 <template>
   <div>
     <pl-content-box>
       <pl-page-nav :show-previous=true></pl-page-nav>
       <pl-content-box-block>
         <pl-content-box-card>
           <el-form :model="baseForm" ref="baseForm" label-width="150px">
             <el-row>
               <el-col :span="20">
                 <el-form-item label="报名编号" prop="memName">
                   <pl-content-item-text>{{baseForm.applyCode}}</pl-content-item-text>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="申贷金额（元）" prop="applyAmt"
                               :rules="[
                         { required: true, message: '融资金额必填'},
                         { type: 'number', message: '融资金额必须为数字'}]">
                   <pl-input-number v-model="baseForm.applyAmt" placeholder="￥" :min="0" :valueEmpty="false" :numeric-precision="2">
                   </pl-input-number>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="授信机构" prop="creditFin"
                               :rules="[{required: true, message: '授信机构必选'}]">
                   <pl-dictionary-select type="bank_brand" v-model="baseForm.creditFin"
                                       style="width: 100px;" :showEmpty="false"></pl-dictionary-select>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="申请人姓名" prop="applicantName"
                               :rules="[{required: true, message: '请填写申请人姓名'}]">
                   <el-input v-model="baseForm.applicantName" placeholder="请填写申请人姓名"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="手机号码" prop="applicantPhone"
                               :rules="[
                             {required: true, message: '请输入手机号码', trigger: 'change'},
                             {validator: checkPhone, trigger: 'change'}]">
                   <el-input v-model="baseForm.applicantPhone" placeholder="请填写申请人手机号码"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="固定电话" prop="applicantTel"
                               :rules="[{required: true, message: '请输入固定电话', trigger: 'change'},
                             {validator: checkTel, trigger: 'change'}]">
                   <el-input v-model="baseForm.applicantTel" placeholder="请填写申请人固定电话"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="申请日期" prop="applyDate" >
                   <pl-content-item-text>{{baseForm.applyDate}}</pl-content-item-text>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="备注" prop="remark">
                   <el-input v-model="baseForm.remark" placeholder="请填写备注"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="20">
                 <el-form-item label="证件类型" prop="certType" :rules="[
                       {required: true, message: '请输入证件类型', trigger: 'change'}
                   ]">
                   <pl-dictionary-select type="id_type" v-model="form.certType" :showEmpty="false"></pl-dictionary-select>
                 </el-form-item>
               </el-col>
           <el-col :span="20">
                 <el-form-item label="证件号码" prop="certNo" :rules="[
                   {required: true, message: '请填写证件号码', trigger: 'blur' },
                   {pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式有误！', trigger: 'blur'}
                   ]">
                   <el-input v-model="form.certNo" placeholder="输入证件号码"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </pl-content-box-card>
       </pl-content-box-block>
     </pl-content-box>
     <pl-affix :offset-bottom="0">
       <pl-content-box-toolbar class="text-center" :border="false">
         <el-button icon=" anticon icon-arrowleft" @click="callback">返回</el-button>
         <el-button type="primary" icon=" anticon icon-clockcircleo" @click="submitAgain">提交</el-button>
       </pl-content-box-toolbar>
     </pl-affix>
   </div>
 </template>
 <script>
   import {MsgType} from 'core/constants';
   export default {
     data () {
       return {
         nextLoading: false,
         type: 'add',
         baseForm: {
           applyId: '',
           applyCode: '',
           applyAmt: '',
           applyDate: '',
           applyState: '',
           creditFin: '',
           applicantName: '',
           applicantPhone: '',
           applicantTel: '',
           remark: ''
         }
       };
     },
     methods: {
       callback () {
         this.$router.push({name: 'cfin.biz.my-registration'});
       },
       checkTel (rule, value, callback) {
         if (!(/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,4}))?$/.test(value))) {
           callback(new Error('请输入正确的电话号码!'));
         } else {
 }        callback();        
       },
       checkPhone (rule, value, callback) {
         if (!(/^1[34578]\d{9}$/.test(value))) {
           callback(new Error('请输入正确的手机号码!'));
         }
 //        else {
 //          this.$api.bsp.member.checkPhoneNo(this.form.userPhone, this.form.memId).then(ret => {
 //            if (ret) {
 //              callback(new Error('该手机号码已存在，请修改手机号码。'));
 //            } else {
 //              callback();
 //            }
 //          });
 //        }
       },
       submitAgain () {
         console.log('提交');
         this.$refs['baseForm'].validate((valid) => {
           if (valid) {
             console.log('通过');
             if (this.type === 'add') {
               this.$api.cfin.quota.saveApply(this.baseForm).then(ret => {
                 if (ret.type === MsgType.SUCCESS) {
                   this.$confirm(ret.msg, '提示', {
                     confirmButtonText: '确定',
                     type: ret.type
                   });
                   this.callback();
                 } else {
                   this.$confirm(ret.msg, '提示', {
                     confirmButtonText: '确定',
                     type: ret.type
                   });
                 }
               });
             } else {
               this.$api.cfin.quota.againApply(this.baseForm).then(ret => {
                 if (ret.type === MsgType.SUCCESS) {
                   this.$confirm(ret.msg, '提示', {
                     confirmButtonText: '确定',
                     type: ret.type
                   });
                   this.callback();
                 } else {
                   this.$confirm(ret.msg, '提示', {
                     confirmButtonText: '确定',
                     type: ret.type
                   });
                 }
               });
             }
           }
         });
       }
     },
     created () {
       console.log(this.$route.params);
       if (this.$route.params.applyId === undefined) {
         this.type = 'add';
         console.log('add');
         this.$api.cfin.quota.getApplySequence().then(ret => {
           this.baseForm.applyCode = ret.code;
         });
       } else {
         this.type = 'edit';
         let params = this.$route.params;
         this.baseForm.applyId = params.applyId;
         this.$api.cfin.quota.getCreditApply(params).then(ret => {
           this.baseForm = ret;
           this.baseForm.applicantPhone = Number(ret.applicantPhone);
         });
       }
       this.$api.cfin.quota.getSystemDate().then(ret => {
         this.baseForm.applyDate = ret;
       });
     }
   }
   ;
 </script>

点击保存按钮时，如果form里面的表单验证通过这进入下面代码中的 if(valid) 里面，否者进入else.

复制代码

//点击保存按钮  
    save () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
              console.log('验证通过') ;
              this.resetFrom();
            });
          } else {
            console.log('验证不通过') ;
            return false;
          }
        });
      },    

复制代码
PS：表单输入长度控制验证

name: [
  {required: true, message: '请输入活动名称', trigger: 'blur'},
  {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],

原文链接 ： https://www.cnblogs.com/alvin553819/p/7270024.html