element-ui表单验证

110 阅读 0 评论 73 点赞

我是靠谱客的博主安详画笔，这篇文章主要介绍element-ui表单验证，现在分享给大家，希望可以做个参考。

在使用表单校验时，需要注意：

！！！如果校验不通过时，是不能够进行提交的，就算提交了也是没有值的

所以先来说一下表单提交submit事件中，需要进行判断,如果valid有值能够提交，否则不能够进行提交。

$refs是用来获取表单的元素，可以使用点语法，也可以使用中括号的形式，拿的内容是ref的内容

复制代码

1
 <el-form :model="form" :rules="rules" ref="formItem" label-width="100px" class="demo-ruleForm">

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
 submitForm () {
// 表单验证不通过的话，需要给提示不通过，不能够进行提交
// $refs获取到表单元素
this.$refs.formItem.validate((valid) => {
if (valid) {
alert('提交成功')
} else {
console.log('表单验证不通过!!')
return false
}
})
}

element-ui文档中虽然存在一些验证规则，但是不是特别全，因此现在单拎出来说一说~

表单验证规则：

一、必填选项

{

required: true, message: '分类名称必填', trigger: 'blur'

}

required为true为必填，message为提示语句，trigger为触发时机，可以为blur也可以为change

二、范围验证

{

min:3,

max:5,

message:'长度必须在3-5之间'

}

最小值为3 ，最大值为5 ，提示语句message

三、数据类型校验

{

type:'array',

message:'xxxx'

}

type表示类型（首字母小写），message表示提示语句

四、正则校验

{

pattern: /[a-z]w{3,7}/,

message: '必须是4-8位的数字英文下画线,以字母开头'

},

pattern 表示正则表达式的规则

五、自定义校验规则

首先在rules中进行定义

{ validator: catename, trigger: 'blur' }

validator就是定义了一个变量名，然后去data中书写这个变量，data是一个函数，函数中自然能够定义变量：

value 校验时这个字段值 rule 当前字段所有校验规则 callback 校验通过不需要传参直接调用，校验不通过需要写提示语句

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 data () {
const catename = (rule, value, callback) => {
if (value !== '1234') {
return callback(new Error('值不等于1234'))
} else {
callback()
}
}
return{
form: {
cateName: '',
pid: '1111',
enAbled: 0
}
},
rules: {
cateName: [
{
required: true, message: '分类名称必填', trigger: 'blur'
},
{ validator: catename, trigger: 'blur' }
]
}