iView表單空格驗證
阿新 • • 發佈:2018-12-15
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函式是在驗證時對資料進行預處理的函式(處理後的結果僅用作驗證),不會改變表單的資料。