快捷導(dǎo)航

詳解element-ui 表單校驗(yàn) Rules 配置常用黑科技

更新時(shí)間：2020年07月11日 10:26:24 作者：妖色調(diào)

這篇文章主要介紹了element-ui 表單校驗(yàn) Rules 配置常用黑科技，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

type

指示type要使用的驗(yàn)證器?？勺R(shí)別的類(lèi)型值為：

string：類(lèi)型必須為string。type 默認(rèn)是 string

// 校驗(yàn)
string: [
 {type: 'string', message: `請(qǐng)輸入字符串`, trigger: 'blur'}
]

<el-form-item label="測(cè)試字段" prop="string">
 <el-input v-model.number="form.string" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>

number：類(lèi)型必須為number。

// 校驗(yàn)
number: [
 {type: 'number', message: `請(qǐng)輸入數(shù)字`, trigger: 'blur'}
]

<el-form-item label="測(cè)試字段" prop="number">
 <el-input v-model="form.number" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>

boolean：類(lèi)型必須為boolean。

// 校驗(yàn)
boolean: [
 {type: 'boolean', message: `請(qǐng)輸入數(shù)字`, trigger: 'change'}
]

<el-form-item label="測(cè)試字段" prop="boolean">
 <el-select v-model="form.boolean" placeholder="請(qǐng)選擇">
 <el-option label="true" :value="true"></el-option>
 <el-option label="false" :value="false"></el-option>
 <el-option label="字符串" :value="'zifuchuan'"></el-option>
 </el-select>
</el-form-item>

integer：類(lèi)型必須為 number 且為整數(shù)。

// 校驗(yàn)
float: [
 {type: 'float', message: `請(qǐng)輸入浮點(diǎn)數(shù)`, trigger: 'blur'}
]

float：類(lèi)型必須為 number 且為浮點(diǎn)數(shù)。

// 校驗(yàn)
array: [
 {type: 'array', message: `請(qǐng)選擇數(shù)組`, trigger: 'change'}
]

<el-form-item label="測(cè)試字段" prop="array">
 <el-select v-model="form.array" placeholder="請(qǐng)選擇">
 <el-option label="數(shù)組" :value="[1,2,3]"></el-option>
 <el-option label="false" :value="false"></el-option>
 <el-option label="字符串" :value="'zifuchuan'"></el-option>
 </el-select>
</el-form-item>

array：類(lèi)型必須為數(shù)組

// 校驗(yàn)
enum: [
 {type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}
]

enum：值必須存在于中 enum

// 校驗(yàn)
url: [
 {type: 'url', message: `請(qǐng)輸入正確的url`, trigger: 'change'}
]

url：類(lèi)型必須為 url

// 校驗(yàn)url: [ {type: 'url', message: `請(qǐng)輸入正確的url`, trigger: 'change'}]

其他

email：類(lèi)型必須為 email

method：類(lèi)型必須為 function

regexp：必須是 RegExp 創(chuàng)建新時(shí)不會(huì)產(chǎn)生異常的的實(shí)例或字符串 RegExp。

object：類(lèi)型必須為 object

date：類(lèi)型必須為 date

hex：類(lèi)型必須為 hex

any：任何類(lèi)型

Required

required 屬性為true是，該字段為必填項(xiàng)

// 校驗(yàn)
name: [
 {required: true, message: `請(qǐng)輸入`, trigger: 'blur'}
]

Pattern

該 pattern 規(guī)則屬性指示一個(gè)正則表達(dá)式的值必須匹配，才能通過(guò)驗(yàn)證。

// 校驗(yàn)
number: [
 {pattern: /^[0-9]*$/, message: `請(qǐng)輸入數(shù)字`, trigger: 'blur'}
]

min、max

規(guī)定最小長(zhǎng)度與最大長(zhǎng)度

// 校驗(yàn)
minmax: [
 {min: 3, max: 8, message: '請(qǐng)輸入3-8位', trigger: 'blur'}
]

len

指定確切長(zhǎng)度。（如果該len屬性與min和max范圍屬性結(jié)合使用，len則優(yōu)先。）

// 校驗(yàn)
length: [
 {len: 5, message: '請(qǐng)輸入5位', trigger: 'blur'}
]

whitespace

驗(yàn)證是否只有空格

// 校驗(yàn)
whitespace: [
 {whitespace: true, message: '只存在空格', trigger: 'blur'}
]

Transform

有時(shí)有必要在驗(yàn)證之前轉(zhuǎn)換值，以強(qiáng)制或以某種方式對(duì)其進(jìn)行清理。為此 transform ，向驗(yàn)證規(guī)則添加一個(gè)功能。在驗(yàn)證之前，先轉(zhuǎn)換屬性，然后將其重新分配給源對(duì)象，以更改該屬性的值。

// 校驗(yàn)
transform: [
 {type: 'enum', enum: [2,4,6], message: `結(jié)果不存在`, trigger: ['change', 'blur'], transform(value) {return Number(value * 2)}}
]

Messages

校驗(yàn)不通過(guò)提示

asyncValidator

可以為指定的字段自定義異步驗(yàn)證功能

validator

可以為指定字段自定義驗(yàn)證功能

let numberLengthSix = (rule, value, callback) => {
 if(String(value).length > 6) {
 callback('超出限制')
 } else {
 callback()
 }
}

// 校驗(yàn)
numberLengthSix: [
 {validator: numberLengthSix, trigger: 'blur'}
]

到此這篇關(guān)于element-ui 表單校驗(yàn) Rules 配置常用黑科技的文章就介紹到這了,更多相關(guān)element-ui 表單校驗(yàn) Rules 配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: