這篇文章主要介紹了關於Vue中Element表單驗證的基本要素，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
Element主要使用了async-validator這個函式庫作為表單驗證
async-validator主要分成三個部分
其中，對於我們使用Element的來說，Rules最重要，也是這部分內容較多的。
async-validator各部份
async-validator基本上使用
import Validator from 'async-validator'
// 规则的描述
const rules = {
name: { type: 'string', required: true }
}
// 根据规则生成验证器
const validator = new Validator(rules)
// 要验证的数据源
const source = {
name: 'LanTuoXie'
}
// 验证后的回调函数
function callback (errors, fileds) {
if (errors) {
// 验证不通过，errors是一个数组，记录那些不通过的错误信息
// fileds是所有数据源的字段名，也即上面的source的'name'
// 验证是根据字段名来的，rules.name 对应 source.name。 字段名要一样才会验证
}
// 下面是验证通过的逻辑
}
// 验证数据源是否符合规则
validator.validate(source, callback)登入後複製
Validate
#就是上面範例中的validator.validate，是一個函數
function(source, [options], callback)
登入後複製
source和callback對應上面的範例。
Options
Options有兩個值
firstFields是針對單一字段多重規則的情況下使用，而first是針對所有欄位
Rules
#最重要的還是Rules。定義rule可以有三種形式，但是rules欄位名稱一定要跟資料來源source的欄位名稱一致。
- 函數的方式：
{ name(rule, 值, callback, source, options) {} }
- 物件的方式：
{ name: { type: 'string', required: true } }
- #陣列的方式：
{ name: [{ type : 'string' }, { required: true }] }
上面可以看到，欄位名稱name可以有3種方式定義規則，在使用Element的時候還是推薦物件和陣列的方式，這個兩個比較簡單，函數看情況使用。
除了
type和required還有哪些用法可以用以及有什麼用？
Rules的預設規則
type: 要被驗證的資料的類型如url和number 等
required： 是否必填
pattern：使用正規來驗證
min: 資料的長度的最小值(資料型別必須是string或array)
max: 資料的長度的最大值(資料型別必須是string或array)
len: 資料的長度必須等於這個值(資料型別必須是string或array)
enum: 資料的值必須等於這個枚舉數組某個元素{ enum: [1, 2, 3] }
transform: 一個鉤子函數，在開始驗證之前可以先處理資料後驗證，如吧number 轉為string後再驗證
message: 錯誤的提示訊息可以是字串也可以是jsx標籤Name is required
#validator: 自訂驗證函數以及報錯訊息validator(rule, value, callback)
- 還有一個Deep Rules是處理
object或array類型的，使用了fields 或defaultField
#fields：Deep Rules的時候使用，定義下一層的欄位名稱以及規則
defaultField: Deep Rules的時候使用，所有下一層的欄位都會採用該規則，可以被fields取代
預設的Type
string：必須是String類型，規則不設定type預設是這個
#number：必須是Number類型，如果後台傳回的資料是字串，可以用transform轉為Number類型，字串類型的數字（'12'）不會通過，要注意
boolean: 必須是Boolean類型
method: 必須是Function
#reg ：必須是正則RegExp
integer：是Number型別的正整數
float : 是Number類型的浮點數
array: 是Array.isArray通過的陣列
object: Array.isArray不通過的Object型別
#enum: 要先定義enum，然後值必須是enum某個值
date:必須是Date物件的實例
#url: String類型且符合連結格式
hex
#email: String類型，且符合郵件信箱格式
Deep Rules使用demo
cosnt urls = ['http://www.baidu.com', 'http://www.baidu.com']
// 一个urls的数组，
const rules = {
urls: {
type: 'array',
required: true,
defaultField: { type: 'url' }
}
}登入後複製
const ids = {
name: 'LanTuoXie',
age: 12,
spc: '帅'
}
const rules = {
ids: {
type: 'object',
required: true,
fields: {
name: { type: 'string', required: true },
age: { type: 'number', required: true, tranform: Number },
spc: { type: 'string', required: true }
}
}
}登入後複製
自定义验证validator
validator(rule, value, callback)
// 验证是[min, max]范围内的正整数
const betweenInt = (min, max) => (rule, v, cb) => {
const isBetween = v >= min && v <= max
const isInt = /^[0-9]+$/.test(v)
if (isBetween && isInt) return cb()
return cb(new Error(`要求是在${min}到${max}的正整数 [${min}, ${max}]`))
}
const rules = {
num: { validator: betweenInt(1, 5), required: true }
}登入後複製
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
vue项目中如何实现保存头像以及base64字符串转图片的功能
Vue中for in对象时如何解决属性为非负整数的问题
以上是Vue中Element表單驗證的基本要素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
