element-ui的表单验证及⾃定义验证规则element-ui是⼀个组件库 ⾥⾯有很多项⼤家都会⽤到 其中的表单项验证时⽐较常⽤的
⽐如我们⼀个登录界⾯有以下的要求yuxuan
⼿机号: 必填, 11位移动⼿机号
验证码: 必填, 6位数字
协议: 必须勾选
1<el-form :model="form" :rules="rulesArr">
2 <el-form-item prop="mobile">
3 <el-input v-model="bile" placeholder="请输⼊⼿机号"></el-input>
independenceday4 </el-form-item>
5 <el-form-item prop="code">
6 <el-input v-model="de" placeholder="请输⼊⼿机号"></el-input>
7 </el-form-item>
8 <el-form-item prop="check">
9 <el-checkbox v-model="form.check">我已阅读并同意「⽤户协议」和「隐私条款」</el-checkbox>
乐观心态10 </el-form-item>
11 <el-form-item>
12 <el-button type="primary">登录</el-button>
13 </el-form-item>
themoment14</el-form>
nominal15
16<script>
17export default {
18 data () {
19 return {
20 form: {
21 mobile: '',english joke
22 code: '',
23 check: fal
挥霍的意思24 },
25 rulesArr: {
26 mobile: [
27 { required: true, message: '请输⼊正确⼿机号', trigger: 'blur', pattern: /^1[3456789]\d{9}$/ }
28 ],
29 code: [
30 { required: true, message: '验证码是6位数字', trigger: 'change', pattern: /^\d{6}$/ }
31 ]
32 }
33 }
34 }
35}
36</script>
1. el-form设置:model="form表单对象"
2. el-form设置:rules="rule规则数组"
3. el-form-item设置prop="form表单对象的属性名"
4. 定义rulesArr规则数组⾥, prop名字对应规则smileage
rulesArr: {
mobile: [
alaways{ required: true, message: '请输⼊正确⼿机号', trigger: 'blur', pattern: /^1[3456789]\d{9}$/ } ],
code: [
{ required: true, message: '验证码是6位数字', trigger: 'change', pattern: /^\d{6}$/ }
]
}
这⼏句的意思
required 必填项 message 错误提⽰ trigger 触发判断条件(blur 失去焦点)(change 发⽣改变)
pattern 正则判断
⽽我们的判断是否阅读协议 需要⾃⼰定⼀个判断条件 那么就涉及到了
⾃定义校验
1// 检验复选框
2const checkValidator = (rule, value, callback) => {
3 // rule规则对象
4 // value关联表单值
5 // callback() 回传结果
6 if (value === fal) {
7 callback(new Error('请勾选协议'))
8 } el {
9 callback()
10 }
11}
12// 为何不在methods⾥定义: 因为data初始化时, this还没实例化, ⽆法访问hods⾥⽅法
13export default {
14 data () {
15 return {
16 form: {
17 mobile: '',
18 code: '',cougar town
19 check: fal
20 },
21 rulesArr: {
22 // ...其他省略
23 check: [
24 { validator: checkValidator }
25 ]
26 }
27 }
28 }
29}
这样就可以简单的判断 表单的 复选框是否点击 如果 为fal 就回弹⼀个 请勾选协议的提醒
如果正确 那么 callback()会继续进⾏下⼀项
如果必填项的话 他还会在 左侧提⽰⼀个⼩⼩的红⾊* 提⾼⽤户体验~
