vue表单校验
vue表单校验常用方法:vue修饰符,使用第三方插件表单校验组件,本文以以elementui为例,相比官网新增了一些进阶用法:关联元素校验,异步结果校验,动态数组校验。不建议手写监听校验1.vue表单输入修饰符前后去除空格<el-input type="text"v-model.trim="search"/>只允许输入数字&l
·
vue表单校验常用方法:vue修饰符,使用第三方插件表单校验组件,本文以以elementui为例,相比官网新增了一些进阶用法:关联元素校验,异步结果校验,动态数组校验。不建议手写监听校验
1.vue表单输入修饰符
- 前后去除空格
<el-input type="text" v-model.trim="search" />
- 只允许输入数字
<el-input v-model.number="age" />
- 拓展:自定义表单修饰符,目前没发现类似实现,需要自己调研,个人觉得做出来会非常方便
2.elementui校验表单(基础)
3.elementui校验表单(进阶使用)
- 关联元素校验
官网例子只有对指定元素校验,没有指出涉及多元素关联的校验如何进行,如数组中名称是否重复。
data () {
entity
// 核心:传入this指针,获取表单中其他值
let _this = this
/** 校验属性中map key格式,是否重复 */
let validateSchoolNameExit = (rule, value, callback) => {
const reg = /^[a-zA-Z|0-9|_|-\s]+$/
let exitNum = 0
_this.school.forEach(item => {
if (item.name === value) {
exitNum++
}
})
if (exitNum > 1) {
return callback(new Error("重复名称"))
}
return callback()
}
return {
//需要校验的对象
school:[{name:"实验中学"},{name:"附属一中"}],
// 校验规则指定
rules: {
validateSchoolNameExit: [
{ validator: validateSchoolNameExit, trigger: 'change' }
],
}
},
- 动态数组校验
校验内容中存在数组是头疼的事情,尤其是动态增减的数组,不慌!看代码
// 表单页面
<FormItem
:prop="`school[${index}].name`"
:rules="rules.validateSchoolNameExit"
>
<input v-model="school[${index}].name" />
</FormItem>
// js代码:
data () {
entity
// 核心:传入this指针,获取表单中其他值
let _this = this
/** 校验属性中map key格式,是否重复 */
let validateSchoolNameExit = (rule, value, callback) => {
const reg = /^[a-zA-Z|0-9|_|-\s]+$/
let exitNum = 0
_this.school.forEach(item => {
if (item.name === value) {
exitNum++
}
})
if (exitNum > 1) {
return callback(new Error("重复名称"))
}
return callback()
}
return {
//需要校验的对象
school:[{name:"实验中学"},{name:"附属一中"}],
// 校验规则指定
rules: {
validateSchoolNameExit: [
{ validator: validateSchoolNameExit, trigger: 'change' }
],
}
},
- 异步请求校验
data () {
entity
// 核心:传入this指针,获取表单中其他值
let _this = this
/** 校验属性中map key格式,是否重复 */
let validateSchoolNameExit = async (rule, value, callback) => {
let validateExit= await _this.validateExit()
if (validateExit) {
return callback(new Error("名称已存在"))
}
return callback()
}
return {
//需要校验的对象
school:[{name:"实验中学"},{name:"附属一中"}],
// 校验规则指定
rules: {
validateSchoolNameExit: [
{ validator: validateSchoolNameExit, trigger: 'change' }
],
}
},
methods:{
async validateExit(){
const res = await post('/q/quota/entity/checkEntityTypeName'})
if (res > 0 && res.code !== 200) {
console.log('validateEntityTypeNameExit true')
return true
} else {
console.log('validateEntityTypeNameExit false')
return false
}
}
}
效果:
更多推荐
已为社区贡献1条内容
所有评论(0)