ElementUI表單驗證構成要素

prop設置方法

prop是(shi)表(biao)單校驗的(de)屬(shu)性名，必須與form model對象中的(de)屬(shu)性一(yi)(yi)一(yi)(yi)對應。

• 一般情況

如：表單model對象為：

ruleForm: {
  host_ids: [],
  osd_deploy_type: 'bcache',
  xstore: 'filestore'
}

對應(ying)的表單prop應(ying)為：

<el-form-item prop="host_ids">
 ...
</el-form-item>
<el-form-item prop="osd_deploy_type">
...
</el-form-item>
<el-form-item prop="xstore">
...
</el-form-item>

          可以看(kan)到，我們(men)定義了三個(ge)(ge)(ge)model對(dui)象：host_ids、osd_deploy_type、xstore，他(ta)們(men)在(zai)html標簽中(zhong)（即每個(ge)(ge)(ge)表(biao)(biao)單(dan)(dan)項）分別對(dui)應(ying)一個(ge)(ge)(ge)prop屬(shu)性(xing)值，當用戶填寫(xie)表(biao)(biao)單(dan)(dan)時，表(biao)(biao)單(dan)(dan)值會(hui)自動填充至(zhi)model對(dui)象對(dui)應(ying)的(de)屬(shu)性(xing)中(zhong)。

• model對象中包含對象（多層嵌套屬性）

如：表單(dan)model對象(xiang)為(wei)：

ruleForm: {
  host_ids: [],
  osd_deploy_type: 'bcache',
  xstore: 'filestore',
  common: {
    data_devs: [],
	journal_size: 1,
	omap: 'false'
  }
}

對應的表單prop應為：

<el-form-item prop="host_ids">
...
</el-form-item>
<el-form-item prop="osd_deploy_type">
...
</el-form-item>
<el-form-item prop="xstore">
...
</el-form-item>
<el-form-item prop="common.data_devs">
...
</el-form-item>
<el-form-item prop="common.journal_size">
...
</el-form-item>
<el-form-item prop="common.omap">
...
</el-form-item>

可以(yi)看(kan)出，如果model中嵌(qian)套(tao)對(dui)(dui)(dui)象，對(dui)(dui)(dui)應的(de)prop也應以(yi)獲取對(dui)(dui)(dui)象值的(de)形式進行設置，即(ji)：嵌(qian)套(tao)對(dui)(dui)(dui)象的(de)key.屬性。嵌(qian)套(tao)多層(ceng)對(dui)(dui)(dui)象同理(li)，需帶上每(mei)層(ceng)對(dui)(dui)(dui)象的(de)key。

rules設置方法

本文介紹2種rules的(de)設置方法：

• 第一種方法：在el-form標簽中設置rules屬性

例如有如下html代碼：

<el-form :model="ruleForm" :rules="rules">
    <el-form-item prop="host_ids">
	...
    </el-form-item>
</el-form>

可以(yi)看到在(zai)el-form標簽中設置(zhi)了(le)rules屬性，其值rules為在(zai)js中定義的變量(liang)名，如下所示：

rules: {
    host_ids:[{required: true, message: ''}],
    xstore: [{required: true, message: ''}]
}

rules變量(liang)中的(de)host_ids屬(shu)性與(yu)prop設置(zhi)的(de)host_ids屬(shu)性對(dui)應，這樣表單就可(ke)以自動匹(pi)配校(xiao)驗(yan)規則了。

• 第二種方法：在每個el-form-item標簽中設置rules屬性及規則

<el-form-item prop="host_ids" :rules="[{required: true, message: ''}]">
...
</el-form-item>

可以看到(dao)，el-form-item標簽中設置了rules屬(shu)性(xing)，其屬(shu)性(xing)值(zhi)即為該form表單(dan)的校驗規則。

自定義驗證規則

有時候ElementUI中自帶(dai)的(de)驗證(zheng)(zheng)規(gui)(gui)則(ze)(ze)并(bing)不能滿足某些特殊字段的(de)校驗，這就需要我(wo)們(men)自定義驗證(zheng)(zheng)規(gui)(gui)則(ze)(ze)。自定義驗證(zheng)(zheng)規(gui)(gui)則(ze)(ze)有2個步(bu)驟：

1. 編寫規(gui)則(ze)驗證(zheng)函數：

var checkHostlist = (rule, value, callback) => {
      if (!value || !value.length) {
        callback(new Error('請選擇測試主機'))
      } else {
        callback()
      }
    }

可以看到，函數需要(yao)傳(chuan)入3個參數，分別(bie)是：

    rule—當前驗證(zheng)規則對象

    value—當前表(biao)單值

    callback—回調函數，調用后(hou)表示完成當前(qian)規則驗證。若驗證通過，直接調用callback()；若驗證失(shi)敗，callback中傳入Error的(de)實例。

2. 指(zhi)定規則驗證(zheng)函數：

host: [
 { required: true, message: '不能為空', trigger: 'blur' },
 { validator: checkHostList, trigger: 'blur' }
]

可以在編寫驗證規(gui)則(ze)時(shi)，通過(guo)validator屬性指定自定義的規(gui)則(ze)驗證函數。

總結

以(yi)(yi)上就(jiu)是存儲管(guan)控(kong)系統表單驗證(zheng)技術介紹以(yi)(yi)及一些實踐經驗的總(zong)結，包括prop設置(zhi)方法、rules設置(zhi)方法和自(zi)定義(yi)驗證(zheng)規則(ze)。我們可以(yi)(yi)根(gen)據(ju)實際應(ying)用場景靈活組合。