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', message: `請輸入數字`, trigger: 'change'}
]
<el-form-item label="測驗欄位" prop="boolean">
<el-select v-model="form.boolean" placeholder="請選擇">
<el-option label="true" :value=https://www.cnblogs.com/loveyt/p/"true">
-
integer：型別必須為 number 且為整數，
// 校驗
integer: [
{type: 'integer', message: `請輸入整數`, trigger: 'blur'}
]
-
float：型別必須為 number 且為浮點數，
// 校驗
float: [
{type: 'float', message: `請輸入浮點數`, trigger: 'blur'}
]
-
array：型別必須為陣列
// 校驗
array: [
{type: 'array', message: `請選擇陣列`, trigger: 'change'}
]
<el-form-item label="測驗欄位" prop="array">
<el-select v-model="form.array" placeholder="請選擇">
<el-option label="陣列" :value=https://www.cnblogs.com/loveyt/p/"[1,2,3]">
-
enum：值必須存在于中 enum
// 校驗
enum: [
{type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}
]
-
url：型別必須為 url
// 校驗
url: [
{type: 'url', message: `請輸入正確的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]*$/, 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'}
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7082.html
標籤：Html/Css
上一篇：CSS實作水平居中的幾種方法
下一篇：BFC 生成 特性 解決的問題