詳細はelement-uiフォーム検証Rules配置常用黒科学技術

タイプ
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="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', message: `      url`, trigger: 'change'}]

その他email：タイプはemailでなければならない。method：タイプはfunctionでなければならない。regexp：RegExpが新しいものを作成する必要がある場合、異常が発生しない例または文字列RegExp。object：タイプはobjectでなければならない。date：タイプはdateでなければならない。hex：タイプはhexでなければならない。any：任意のタイプ
Requiredrequired属性はtrueです。このフィールドは必須項目です。

//   
name: [
 {required: true, message: `   `, trigger: 'blur'}
]

Patternpattern規則的属性は、検証に合格するために正規表現の値が一致しなければならないことを示している。

//   
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: true, message: '     ', trigger: 'blur'}
]

Trans form
検証前に値を強制的または何らかの形で消去する必要がある場合がある。このためにtransformは、認証規則に機能を追加する。検証の前に属性を変換し、ソースオブジェクトに再割り当てし、属性の値を変更します。

//   
transform: [
 {type: 'enum', enum: [2,4,6], message: `     `, trigger: ['change', 'blur'], transform(value) {return Number(value * 2)}}
]

メッセンジャー
検証がヒントに失敗しました。
async Validator
指定されたフィールドの非同期認証機能をカスタマイズできます。
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の設定内容をチェックします。私達の以前の文章を検索してください。または、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。