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\'}
],