1. 程式人生 > >iView表單空格驗證

iView表單空格驗證

iView表單元件使用async-validator驗證器對錶單域中資料進行驗證,給 Form 設定屬性 rules,同時給需要驗證的 FormItem 設定屬性 prop 指向對應欄位即可。 完整的驗證規則請參照開源專案 async-validator。 驗證方法也支援 Promise。

當我們對錶單中某個string型別的域設定為必填時,我們可以使用如下規則

{type: 'string' ,required:true,message:'不能為空'}

但是如果我們直接輸入空格也會通過驗證 如何對輸入的空格進行驗證? 下面介紹兩種方法: 方法一:在表單域的標籤上繫結時使用v-model.trim代替v-model

例如

<form-item label=" 姓名 " prop="name">
  <i-input v-model.trim="name" placeholder="請填寫姓名" size="small">
  </i-input>
</form-item>

使用這種方法會直接將首尾空格trim掉,表單提交時的資料是沒有首尾空格的,如果想保留首尾空格,可以使用方法二。

方法二:在驗證規則上加上transform函式 例如

{type: 'string' ,transform:value=>value?value.trim():'',required:
true,message:'不能為空'}

transform函式是在驗證時對資料進行預處理的函式(處理後的結果僅用作驗證),不會改變表單的資料。