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

  1 <template>
  2   <div>
  3     <pl-content-box>
  4       <pl-page-nav :show-previous=true></pl-page-nav>
  5       <pl-content-box-block>
  6         <pl-content-box-card>
  7           <el-form :model="baseForm" ref="baseForm" label-width="150px">
  8             <el-row>
  9               <el-col :span="20">
 10                 <el-form-item label="报名编号" prop="memName">
 11                   <pl-content-item-text>{{baseForm.applyCode}}</pl-content-item-text>
 12                 </el-form-item>
 13               </el-col>
 14               <el-col :span="20">
 15                 <el-form-item label="申贷金额（元）" prop="applyAmt"
 16                               :rules="[
 17                         { required: true, message: '融资金额必填'},
 18                         { type: 'number', message: '融资金额必须为数字'}]">
 19                   <pl-input-number v-model="baseForm.applyAmt" placeholder="￥" :min="0" :valueEmpty="false" :numeric-precision="2">
 20                   </pl-input-number>
 21                 </el-form-item>
 22               </el-col>
 23               <el-col :span="20">
 24                 <el-form-item label="授信机构" prop="creditFin"
 25                               :rules="[{required: true, message: '授信机构必选'}]">
 26                   <pl-dictionary-select type="bank_brand" v-model="baseForm.creditFin"
 27                                       style="width: 100px;" :showEmpty="false"></pl-dictionary-select>
 28                 </el-form-item>
 29               </el-col>
 30               <el-col :span="20">
 31                 <el-form-item label="申请人姓名" prop="applicantName"
 32                               :rules="[{required: true, message: '请填写申请人姓名'}]">
 33                   <el-input v-model="baseForm.applicantName" placeholder="请填写申请人姓名"></el-input>
 34                 </el-form-item>
 35               </el-col>
 36               <el-col :span="20">
 37                 <el-form-item label="手机号码" prop="applicantPhone"
 38                               :rules="[
 39                             {required: true, message: '请输入手机号码', trigger: 'change'},
 40                             {validator: checkPhone, trigger: 'change'}]">
 41                   <el-input v-model="baseForm.applicantPhone" placeholder="请填写申请人手机号码"></el-input>
 42                 </el-form-item>
 43               </el-col>
 44               <el-col :span="20">
 45                 <el-form-item label="固定电话" prop="applicantTel"
 46                               :rules="[{required: true, message: '请输入固定电话', trigger: 'change'},
 47                             {validator: checkTel, trigger: 'change'}]">
 48                   <el-input v-model="baseForm.applicantTel" placeholder="请填写申请人固定电话"></el-input>
 49                 </el-form-item>
 50               </el-col>
 51               <el-col :span="20">
 52                 <el-form-item label="申请日期" prop="applyDate" >
 53                   <pl-content-item-text>{{baseForm.applyDate}}</pl-content-item-text>
 54                 </el-form-item>
 55               </el-col>
 56               <el-col :span="20">
 57                 <el-form-item label="备注" prop="remark">
 58                   <el-input v-model="baseForm.remark" placeholder="请填写备注"></el-input>
 59                 </el-form-item>
 60               </el-col>
 61               <el-col :span="20">
 62                 <el-form-item label="证件类型" prop="certType" :rules="[
 63                       {required: true, message: '请输入证件类型', trigger: 'change'}
 64                   ]">
 65                   <pl-dictionary-select type="id_type" v-model="form.certType" :showEmpty="false"></pl-dictionary-select>
 66                 </el-form-item>
 67               </el-col>
 68           <el-col :span="20">
 69                 <el-form-item label="证件号码" prop="certNo" :rules="[
 70                   {required: true, message: '请填写证件号码', trigger: 'blur' },
 71                   {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'}
 72                   ]">
 73                   <el-input v-model="form.certNo" placeholder="输入证件号码"></el-input>
 74                 </el-form-item>
 75               </el-col>
 76             </el-row>
 77           </el-form>
 78         </pl-content-box-card>
 79       </pl-content-box-block>
 80     </pl-content-box>
 81     <pl-affix :offset-bottom="0">
 82       <pl-content-box-toolbar class="text-center" :border="false">
 83         <el-button icon=" anticon icon-arrowleft" @click="callback">返回</el-button>
 84         <el-button type="primary" icon=" anticon icon-clockcircleo" @click="submitAgain">提交</el-button>
 85       </pl-content-box-toolbar>
 86     </pl-affix>
 87   </div>
 88 </template>
 89 <script>
 90   import {MsgType} from 'core/constants';
 91   export default {
 92     data () {
 93       return {
 94         nextLoading: false,
 95         type: 'add',
 96         baseForm: {
 97           applyId: '',
 98           applyCode: '',
 99           applyAmt: '',
100           applyDate: '',
101           applyState: '',
102           creditFin: '',
103           applicantName: '',
104           applicantPhone: '',
105           applicantTel: '',
106           remark: ''
107         }
108       };
109     },
110     methods: {
111       callback () {
112         this.$router.push({name: 'cfin.biz.my-registration'});
113       },
114       checkTel (rule, value, callback) {
115         if (!(/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,4}))?$/.test(value))) {
116           callback(new Error('请输入正确的电话号码!'));
117         } else {
118 }        callback();        
119       },
120       checkPhone (rule, value, callback) {
121         if (!(/^1[34578]\d{9}$/.test(value))) {
122           callback(new Error('请输入正确的手机号码!'));
123         }
124 //        else {
125 //          this.$api.bsp.member.checkPhoneNo(this.form.userPhone, this.form.memId).then(ret => {
126 //            if (ret) {
127 //              callback(new Error('该手机号码已存在，请修改手机号码。'));
128 //            } else {
129 //              callback();
130 //            }
131 //          });
132 //        }
133       },
134       submitAgain () {
135         console.log('提交');
136         this.$refs['baseForm'].validate((valid) => {
137           if (valid) {
138             console.log('通过');
139             if (this.type === 'add') {
140               this.$api.cfin.quota.saveApply(this.baseForm).then(ret => {
141                 if (ret.type === MsgType.SUCCESS) {
142                   this.$confirm(ret.msg, '提示', {
143                     confirmButtonText: '确定',
144                     type: ret.type
145                   });
146                   this.callback();
147                 } else {
148                   this.$confirm(ret.msg, '提示', {
149                     confirmButtonText: '确定',
150                     type: ret.type
151                   });
152                 }
153               });
154             } else {
155               this.$api.cfin.quota.againApply(this.baseForm).then(ret => {
156                 if (ret.type === MsgType.SUCCESS) {
157                   this.$confirm(ret.msg, '提示', {
158                     confirmButtonText: '确定',
159                     type: ret.type
160                   });
161                   this.callback();
162                 } else {
163                   this.$confirm(ret.msg, '提示', {
164                     confirmButtonText: '确定',
165                     type: ret.type
166                   });
167                 }
168               });
169             }
170           }
171         });
172       }
173     },
174     created () {
175       console.log(this.$route.params);
176       if (this.$route.params.applyId === undefined) {
177         this.type = 'add';
178         console.log('add');
179         this.$api.cfin.quota.getApplySequence().then(ret => {
180           this.baseForm.applyCode = ret.code;
181         });
182       } else {
183         this.type = 'edit';
184         let params = this.$route.params;
185         this.baseForm.applyId = params.applyId;
186         this.$api.cfin.quota.getCreditApply(params).then(ret => {
187           this.baseForm = ret;
188           this.baseForm.applicantPhone = Number(ret.applicantPhone);
189         });
190       }
191       this.$api.cfin.quota.getSystemDate().then(ret => {
192         this.baseForm.applyDate = ret;
193       });
194     }
195   }
196   ;
197 </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'}
],

posted on 2017-08-01 18:23  程序猿-alvin  阅读(13403)  评论(0)  编辑  收藏  举报

导航