這篇文章主要介紹了關於vue中Element表單驗證的使用方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
Element表單驗證（2）
上篇講的是async-validator的基本要素，那麼，如何使用到Element中以及怎樣優雅地使用，就在本篇。
上篇講到async-validator由3大部分組成
##基本驗證流程如下
#上面中的
validator.validate對應Element中的this.$refs [refName].validate，只不過改裝過的。而且在Element定義 的:model='form'，那個form就是 source。 source的欄位名，如source.name就是form.name，那麼只要在設定和source一樣的欄位名稱name，就可以符合中的rules.name。
很重要的一點，
rules.欄位名稱要跟source.欄位名稱要一樣才會驗證。
<template>
<el-form :model='form' ref='domForm' :rules='rules'>
<el-form-item prop='name' lable='名字'>
<el-input v-model='form.name'>
</el-form-item>
</el-form>
</template>登入後複製
export default {
data() {
this.rules = {
name: { type: 'string', required: true, trigger: 'blur' }
}
return {
form: {
name: ''
}
}
},
methods: {
submit() {
this.$refs.domForm.validate(valid => {
if (!valid) {
// 验证不通过
}
// 验证通过后的处理...
})
}
}
}登入後複製
上面中
validate(callback)函數已經加入到form元素DOM節點上的屬性。然後上面還有一個不好的一點。那就是規則的定義方式不夠靈活。
例如我有兩個欄位
firstName和lastName。 firstName是必填的，而lastName是非必填的；且firstName長度要求大於1小於4而lastName要求大於1小於6。那麼就要寫兩個不同的規則，現在只是2個字段而已，沒什麼，如果有很多個不同要求的字段，那要寫很多個不同的規則，也要寫很多個規則？豈不是很煩？能不能復用？
Rules三種定義方式
- 函數的方式：
{ name(rule, value, callback, source, options) { } }
- 物件的方式：
{ name: { type: 'string', required: true } }
- 陣列的方式：
{ name: [{ type: 'string' }, { required: true }] }
函數的方式很強大，如果需要用到
options可以函數的方式，最常用的是物件和陣列的方式。現在推薦幾種複用的方法。
簡單的封裝一些常用的規則
// 返回一个规则数组，必填且字符串长度在2~10之间
export const name = (msg, min = 2, max = 10, required = true) => ([
{ required, message: msg, trigger: 'blur' },
{ min, max, message: `长度在${min}~${max}个字符`, trigger: 'blur' }
])
// 邮箱
export const email = (required = true) => ([
{ required, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不对', trigger: 'blur' }
])
/* 自定义验证规则 */
// 大于等于某个整数
const biggerAndNum = num => (rule, v, cb) => {
const isInt = /^[0-9]+$/.test(v)
if (!isInt) {
return cb(new Error('要求为正整数'))
}
if (v < num) {
return cb(new Error(`要求大于等于${num}`))
}
return cb()
}
export const biggerInt = (int, required = true) => ([
{ required, message: '必填', trigger: 'blur' },
{ validator: biggerAndNum(int), trigger: 'blur' }
])登入後複製
封裝一個專門創建規則的類，鍊式調用
export default class CreateRules {
constructor() {
super()
this.rules = []
}
need(msg = '必填', trigger = 'blur') {
this.rules.push({
required: true,
message: msg,
trigger
})
return this
}
url(message = '不是合法的链接', trigger = 'blur') {
this.rules.push({
type: 'url',
trigger,
message
})
return this
}
get() {
const res = this.rules
this.rules = []
return res
}
}
const createRules = new CreateRules()
//规则
const needUrl = createRules.need().url().get()
const isUrl = createRules.url().get()
// imgUrl必填且是链接；href可选不填，如果填写必须是链接
const rules = {
imgUrl: needUrl,
href: isUrl
}
// deep rule 定义
// urls是数组，长度大于1
// urls的元素是链接
const urls = ['http://www.baidu.com', 'http://www.baidu.com']
const rules = {
urls: {
type: 'array',
min: 1,
defaultField: isUrl
}
}登入後複製
相關推薦：
Vue中Element表單驗證的基本要素
Vue中for in物件時如何解決屬性為非負整數的問題
以上是vue中Element表單驗證的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
