type

指示type要使用的驗證器。可識別的型別值為：

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: `請輸入數字`,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',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 且為整數。

// 校驗
float: [
 {type: 'float',message: `請輸入浮點數`,trigger: 'blur'}
]

float：型別必須為 number 且為浮點數。

// 校驗
array: [
 {type: 'array',message: `請選擇陣列`,trigger: 'change'}
]

<el-form-item label="測試欄位" prop="array">
 <el-select v-model="form.array" placeholder="請選擇">
 <el-option label="陣列" :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：型別必須為陣列

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

enum：值必須存在於中 enum

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

url：型別必須為 url

// 校驗url: [ {type: 'url',trigger: 'change'}]

其他

email：型別必須為 email

method：型別必須為 function

regexp：必須是 RegExp 建立新時不會產生異常的的例項或字串 RegExp。

object：型別必須為 object

date：型別必須為 date

hex：型別必須為 hex

any：任何型別

Required

required 屬性為true是，該欄位為必填項

// 校驗
name: [
 {required: true,message: `請輸入`,trigger: 'blur'}
]

Pattern

該 pattern 規則屬性指示一個正則表示式的值必須匹配，才能通過驗證。

// 校驗
number: [
 {pattern: /^[0-9]*$/,trigger: 'blur'}
]

min、max

規定最小長度與最大長度

// 校驗
minmax: [
 {min: 3,max: 8,message: '請輸入3-8位',trigger: 'blur'}
]

len

指定確切長度。（如果該len屬性與min和max範圍屬性結合使用，len則優先。）

// 校驗
length: [
 {len: 5,message: '請輸入5位',trigger: 'blur'}
]

whitespace

驗證是否只有空格

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

Transform

有時有必要在驗證之前轉換值，以強制或以某種方式對其進行清理。為此 transform ，向驗證規則新增一個功能。在驗證之前，先轉換屬性，然後將其重新分配給源物件，以更改該屬性的值。

// 校驗
transform: [
 {type: 'enum',enum: [2,4,6],message: `結果不存在`,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 配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！