vue + element-ui 表单校验封装公用方法

 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       
 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             
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>