使用对象遍历简化表单验证

本文涉及的知识点

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/…

感谢您的阅读,如果觉得不错，给我点个赞吧；有任何问题和建议请在下方留言，谢谢！