使用對象遍歷簡化表單驗證

本文涉及的知識點

for in 對象遍歷

對象合併函數Object.assign()

表單驗證

在前端開發中,將表單數據驗證併發送到後臺是很是常見的需求；對於表單的驗證第一想到的是使用if判斷來驗證數據:

以下面的註冊表單要求用戶填寫用戶姓名，電話號碼，密碼等信息

<from onsubmit="onsubmit">
    <input name='user_name'/>  
    <input name='phone'/> 
    <input name='password'/>
    <input name='password_confirm'/>
</from>   複製代碼

使用if else 驗證表單

使用if else 驗證表單
onsubmit(e) {
  let value = e.detail.value;
  if(!value.user_name) {
	alert('請輸入用戶姓名')
  } else if(!value.phone) {
	alert('請輸入電話號碼')
  } else if(!value.password) {
	alert('請輸入密碼')
  } else if(!value.password_confirm) {
       alert('請確認密碼')
  }
}複製代碼

使用for in 驗證表單

onsubmit(e) {
    let value = e.detail.value;
    // 定義驗證模型
    let modal = {
        user_name: '請輸入用戶姓名',
        phone: '請輸入手機號',
        password: '請輸入密碼',
        password_confirm: '請確認密碼',
    }
// 使用對象遍歷表單數據，內容缺失時提示對應的模型屬性
    for(let key in value) {
        if(!value[key]) {
            alert(modal[key];
        }
    }
}複製代碼

使用for in 的優點

當表單數據過多時，使用if else來驗證會使代碼變得很是長，使用for in 只須要在驗證modal對象裏增長屬性便可

對象遍歷時的注意事項

如何過濾不須要驗證的字段

如何過濾不須要驗證的字段
for(let key in value) {
    // 對不須要驗證的數據能夠使用continue跳過循環
    if(key == 'key1') continue;
   if(!value[key]) {
      alert(modal[key];
   }
}複製代碼

如何添加額外的提交數據

完成表單驗證提交數據以前通常咱們還會追加一些額外的數據，如安全驗證令牌token,請求時間time,來源source

value.token = 'token';
value.time = 'time';
value.souce = 'source';

// 咱們常常看到的時額外的數據是個對象的狀況，如：
let obj = {time:'time',token:'token',source:'source'}
value.token = obj.token;
value.time = obj.time;
value.source = obj.source;

// 使用對象合併優化代碼
let params = Object.assign(value,obj);複製代碼

對象合併函數參考網址:

developer.mozilla.org/zh-CN/docs/…

感謝您的閱讀,若是以爲不錯，給我點個贊吧；有任何問題和建議請在下方留言，謝謝！