vue + element-ui 表单校验封装公用方法
1.新建表单验证方法封装 src/utils/formCheck.js
1 // 手机号码验证 2 const validatePhone = (rule, value, callback) => { 3 const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$') 4 if (!patter.test(value)) { 5 return callback(new Error('请输入正确格式的手机号!')) 6 } else { 7 callback() // 必须有此项回调,否则验证会一直不通过 8 } 9 } 10 // 邮箱的正则 11 const validateEmail = (rule, value, callback) => { 12 const mailbox = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$') 13 if (!mailbox.test(value)) { 14 return callback(new Error('请输入正确格式的邮箱!')) 15 } else { 16 callback() 17 } 18 } 19 // 身份证号 20 const validateIdCardNo = (rule, value, callback) => { 21 const mailbox = new RegExp('^[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}[0-9Xx]$') 22 if (!mailbox.test(value)) { 23 return callback(new Error('请输入正确格式的身份证号!')) 24 } else { 25 callback() 26 } 27 } 28 export default { 29 common: { 30 // ---------------------公共验证方法 31 phone: [{// 手机号 32 required: true, 33 message: '手机号不能为空' 34 }, { 35 validator: validatePhone, 36 trigger: 'blur' 37 }], 38 email: [{// 邮箱 39 required: true, 40 message: '邮箱不能为空' 41 }, 42 { 43 validator: validateEmail, 44 trigger: 'blur' 45 } 46 ], 47 idCardNo: [{// 身份证号码 48 required: true, 49 message: '身份证号码不能为空' 50 }, 51 { 52 validator: validateIdCardNo, 53 trigger: 'blur' 54 } 55 ] 56 }, 57 handle: { 58 // ---------------------处理表单的验证方法 59 operResult: [{//处理结果 60 required: true, 61 message: '请选择处理结果' 62 }], 63 opinion: [{//处理结果描述 64 required: true, 65 message: '请填写处理结果描述' 66 }] 67 },
68 }
export default内可以分类封装验证,封装不同表单的验证方法
2.全局挂在 main.js
1 import rules from './utils/formCheck.js' 2 3 // 全局方法挂载 4 Vue.prototype.$rules = rules
3.使用
表单标签加 :rules="$rules.handle"
1 <el-form 2 ref="form" 3 :model="form" 4 label-width="150px" 5 :rules="$rules.handle" 6 style="padding:0 50px 0 20px;" 7 > 8 <div class="wrap"> 9 <el-form-item label="处理结果" prop="operResult"> 10 <el-select 11 v-model="form.operResult" 12 placeholder="请选择处理结果" 13 clearable 14 size="small" 15 style="width:50%" 16 > 17 <el-option 18 v-for="item in handle_result" 19 :key="item.dictValue" 20 :label="item.dictLabel" 21 :value="item.dictValue" 22 ></el-option> 23 </el-select> 24 </el-form-item> 25 <el-form-item label="处理结果描述" prop="opinion"> 26 <el-input type="textarea" v-model="form.opinion" maxlength="320" show-word-limit></el-input> 27 </el-form-item> 28 </div> 29 </el-form>
单独使用 :rules="$rules.handle.opinion"
1 <el-form-item label="处理结果描述" prop="opinion" :rules="$rules.handle.opinion"> 2 <el-input type="textarea" v-model="form.opinion" maxlength="320" show-word-limit></el-input> 3 </el-form-item>