element-ui 表單校驗 Rules 配置 常用黑科技
阿新 • • 發佈:2020-07-11
## type
> 指示type要使用的驗證器。可識別的型別值為:
- #### `string`:型別必須為`string`。`type` 預設是 `string`
```
// 校驗
string: [
{type: 'string', message: `請輸入字串`, trigger: 'blur'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094824503-1014140195.jpg)
- #### `number`:型別必須為`number`。
```
// 校驗
number: [
{type: 'number', message: `請輸入數字`, trigger: 'blur'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094836042-1942574737.jpg)
- #### `boolean`:型別必須為`boolean`。
```
// 校驗
boolean: [
{type: 'boolean', message: `請輸入數字`, trigger: 'change'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094843224-1181789270.jpg)
- #### `integer`:型別必須為 `number` 且為整數。
```
// 校驗
integer: [
{type: 'integer', message: `請輸入整數`, trigger: 'blur'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094852349-704860057.jpg)
- #### `float`:型別必須為 `number` 且為浮點數。
```
// 校驗
float: [
{type: 'float', message: `請輸入浮點數`, trigger: 'blur'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094859321-622321734.jpg)
- #### `array`:型別必須為陣列
```
// 校驗
array: [
{type: 'array', message: `請選擇陣列`, trigger: 'change'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094906362-1187774791.jpg)
- #### `enum`:值必須存在於中 `enum`
```
// 校驗
enum: [
{type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094913021-210791353.jpg)
- #### `url`:型別必須為 `url`
```
// 校驗
url: [
{type: 'url', message: `請輸入正確的url`, trigger: 'change'}
]
```
![](https://img2020.cnblogs.com/blog/1472147/202007/1472147-20200711094918383-1014650899.jpg)
### 其他
- #### `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]*$/, message: `請輸入數字`, 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