詳解element-ui 表單校驗 Rules 配置 常用黑科技
type
指示type要使用的驗證器??勺R別的類型值為:
string:類型必須為string。type 默認是 string
// 校驗
string: [
{type: 'string', message: `請輸入字符串`, trigger: 'blur'}
]
<el-form-item label="測試字段" prop="string">
<el-input v-model.number="form.string" placeholder="請輸入"></el-input>
</el-form-item>

number:類型必須為number。
// 校驗
number: [
{type: 'number', message: `請輸入數(shù)字`, trigger: 'blur'}
]
<el-form-item label="測試字段" prop="number">
<el-input v-model="form.number" placeholder="請輸入"></el-input>
</el-form-item>

boolean:類型必須為boolean。
// 校驗
boolean: [
{type: 'boolean', message: `請輸入數(shù)字`, trigger: 'change'}
]
<el-form-item label="測試字段" prop="boolean">
<el-select v-model="form.boolean" placeholder="請選擇">
<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:類型必須為 number 且為整數(shù)。
// 校驗
float: [
{type: 'float', message: `請輸入浮點數(shù)`, trigger: 'blur'}
]

float:類型必須為 number 且為浮點數(shù)。
// 校驗
array: [
{type: 'array', message: `請選擇數(shù)組`, trigger: 'change'}
]
<el-form-item label="測試字段" prop="array">
<el-select v-model="form.array" placeholder="請選擇">
<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:類型必須為數(shù)組
// 校驗
enum: [
{type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}
]

enum:值必須存在于中 enum
// 校驗
url: [
{type: 'url', message: `請輸入正確的url`, trigger: 'change'}
]

url:類型必須為 url
// 校驗url: [ {type: 'url', message: `請輸入正確的url`, trigger: 'change'}]

其他
email:類型必須為 email
method:類型必須為 function
regexp:必須是 RegExp 創(chuàng)建新時不會產(chǎn)生異常的的實例或字符串 RegExp。
object:類型必須為 object
date:類型必須為 date
hex:類型必須為 hex
any:任何類型
Required
required 屬性為true是,該字段為必填項
// 校驗
name: [
{required: true, message: `請輸入`, trigger: 'blur'}
]
Pattern
該 pattern 規(guī)則屬性指示一個正則表達式的值必須匹配,才能通過驗證。
// 校驗
number: [
{pattern: /^[0-9]*$/, message: `請輸入數(shù)字`, trigger: 'blur'}
]
min、max
規(guī)定最小長度與最大長度
// 校驗
minmax: [
{min: 3, max: 8, message: '請輸入3-8位', trigger: 'blur'}
]
len
指定確切長度。(如果該len屬性與min和max范圍屬性結(jié)合使用,len則優(yōu)先。)
// 校驗
length: [
{len: 5, message: '請輸入5位', trigger: 'blur'}
]
whitespace
驗證是否只有空格
// 校驗
whitespace: [
{whitespace: true, message: '只存在空格', trigger: 'blur'}
]
Transform
有時有必要在驗證之前轉(zhuǎn)換值,以強制或以某種方式對其進行清理。為此 transform ,向驗證規(guī)則添加一個功能。在驗證之前,先轉(zhuǎn)換屬性,然后將其重新分配給源對象,以更改該屬性的值。
// 校驗
transform: [
{type: 'enum', enum: [2,4,6], message: `結(jié)果不存在`, trigger: ['change', 'blur'], transform(value) {return Number(value * 2)}}
]
Messages
校驗不通過提示
asyncValidator
可以為指定的字段自定義異步驗證功能
validator
可以為指定字段自定義驗證功能
let numberLengthSix = (rule, value, callback) => {
if(String(value).length > 6) {
callback('超出限制')
} else {
callback()
}
}
// 校驗
numberLengthSix: [
{validator: numberLengthSix, trigger: 'blur'}
]
到此這篇關于element-ui 表單校驗 Rules 配置 常用黑科技的文章就介紹到這了,更多相關element-ui 表單校驗 Rules 配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- vue.js使用Element-ui實現(xiàn)導航菜單
- vue.js+element-ui動態(tài)配置菜單的實例
- vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
- vue.js element-ui tree樹形控件改iview的方法
- 使用Vue.js和Element-UI做一個簡單登錄頁面的實例
- vue.js element-ui validate中代碼不執(zhí)行問題解決方法
- 使用element-ui +Vue 解決 table 里包含表單驗證的問題
- Vue element-ui父組件控制子組件的表單校驗操作
- vue.js+element-ui的基礎表單實例代碼
相關文章
微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁面操作方法
這篇文章主要給大家介紹了關于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁面操作的相關資料,為了分享方便,或者制作宣傳海報之類的,經(jīng)常需要用到微信小程序指定頁面的二維碼,讓用戶掃碼直達頁面,需要的朋友可以參考下2023-08-08
js showModalDialog 彈出對話框的簡單實例(子窗體)
本篇文章主要是對js_showModalDialog彈出對話框的簡單實例(子窗體) 進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條
對于有很多流程的東西,我們希望能夠根據(jù)不同的階段,用流程條對應地進行顯示,非常直觀,給用戶帶來極好的用戶體驗,下面小編給大家分享JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條功能,需要的的朋友參考下2017-03-03
談談我對JavaScript中typeof和instanceof的深入理解
這次主要說說javascript的類型判斷函數(shù)typeof和判斷構(gòu)造函數(shù)原型instanceof的用法和注意的地方,對本文感興趣的朋友一起看看吧2015-12-12
javascript中對象的定義、使用以及對象和原型鏈操作小結(jié)
這篇文章主要介紹了javascript中對象的定義、使用以及對象和原型鏈操作,結(jié)合實例形式總結(jié)分析了javascript對象操作的常用技巧,需要的朋友可以參考下2016-12-12
基于css3新屬性transform及原生js實現(xiàn)鼠標拖動3d立方體旋轉(zhuǎn)
這篇文章主要介紹了基于css3新屬性transform及原生js實現(xiàn)鼠標拖動3d立方體旋轉(zhuǎn) 的相關資料,需要的朋友可以參考下2016-06-06

