一、ElementUI表单验证
ElementUI的表单验证借助了async-validator，该模块内置了很多原生类型的验证，如： string, number等相关类型
1、给el-form绑定model属性
<template>
<el-form :model="formData"></el-form>
</template>
<script>
export default {
data () {
return {
formData: {
key: value,
key2: value,
key3: value
}
}
}
}
</script>
2、给每一个el-form-item添加prop属性
<template>
<el-form :model="formData">
<el-form-item prop="key">
</el-form-item>
<el-form-item prop="key2">
</el-form-item>
<el-form-item prop="key3">
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
formData: {
key: value,
key2: value,
key3: value
}
}
}
}
</script>
3、定义验证规则
在data中定义规则
<script>
export default {
data () {
return {
formData: {
key: value,
key2: value,
key3: value
},
formRules: {
// 这里的属性和formData中的属性一一对象
key: [
// 数组中填写规则
{
required: true, message: '验证不通过时提示的信息', trigger: '触发条件，可选： blur，change'},
// 如果有多条，则继续写对象
{
type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'},
{
type: 'number', meesage: '请输入数字', trigger: 'blur'}
// 自定义验证 见下放自定规则详细定义方法
{
validator: 函数, trigger: 'blur'}
],
key2: [],
key3: []
}
}
}
}
</script>
给el-form上添加rules属性，是我们对应的规则
<template>
<el-form :model="formData" :rules="formRules">
<el-form-item prop="key">
</el-form-item>
<el-form-item prop="key2">
</el-form-item>
<el-form-item prop="key3">
</el-form-item>
</el-form>
</template>
!!!注意，添加该属性后可以进行验证，但是提交数据时不会根据验证结果进行对应操作，所以我们需要在提交数据时，进行判断
4、提交数据时进行判断
利用 this.$refs.form上的ref属性值.validate((status) => {})
<template>
<el-form ref="form" :model="formData" :rules="formRules">
<el-form-item prop="key">
</el-form-item>
<el-form-item prop="key2">
</el-form-item>
<el-form-item prop="key3">
</el-form-item>
<el-form-item prop="key3">
<el-button @click="send">按钮</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
...,....
}
},
methods: {
send () {
this.$refs.form.validate((status) => {
if (status) {
// true 表示通过验证
// 进行相关数据的请求
}
})
}
}
}
</script>
二、自定义表单验证
自定义表单验证的对象写法
{
rules: {
key: [
{
validator: 验证函数, trigger: 'blue'}
]
}
}
1、验证函数规则
我们可以把相关的验证函数，单独封装
function keyValidator (rule, value, cb) {
// rule 表示当前的验证规则对象
// value 表示表单元素中输入的内容
// cb 是一个回调函数，决定了报错还是正常通过
if (验证条件) {
// 为true则表示验证通过， 通过则直接调用cb()
cb()
} else {
// 验证没有通过，则调用cb(new Error('提示信息'))
cb(new Error("错误信息提示"))
}
}