直接上代码,结构如下:
<form id="user">
<ul class="form">
<li>
<div class="th">姓名:</div>
<div class="td">
<input type="text" class="ipt" value="请输入姓名">
<div class="tips">
<span>姓名不能为空</span>
</div>
</div>
</li>
<li>
<div class="th">手机:</div>
<div class="td">
<input type="text" class="ipt" value=" ">
<div class="tips">
<span>请填写手机号</span>
</div>
</div>
</li>
<li>
<div class="th">Email:</div>
<div class="td">
<input type="text" class="ipt" value=" " id="email">
<div class="tips">
<span>请填写邮箱</span>
</div>
</div>
</li>
<li>
<div class="btn-area">
<button type="button" class="btn btn-commit">提交</button>
</div>
</li>
</ul>
</form>
脚本实现:
/**
* 去除字符串收尾的空格
* @param {String} str 需要除去收首尾空格的字符串
* @return {String} 去除空格后的字符串
*/
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
/**
* 表单的必填项验证
* @return {Boolean} true or false
*/
function formEmptyCheck() {
// 获取需要验证的输入框,不要局限于这一行获取相应元素的代码
var formElements = document.getElementById("user").getElementsByClassName("ipt");
for (var i = 0; i < formElements.length; i++) {
if (!trim(formElements[i].value)) {
formElements[i].focus();
return false;
}
}
return true;
}
var btnCommit = document.getElementsByClassName("btn-commit")[0];
btnCommit.onclick = formEmptyCheck;
这里做的不仅是一个非空的验证,还是有一个去除输入框输入内容收尾空格的功能,因为大多数情况下,我们想要获取的数据,一般是不希望前后有空格的,没什么实际意义,这里是多加的一个小功能。这里已经实现了对同一个表单中多个输入字段的非空的客户端验证,还可以根据需要对每个非法的输入项做一些相应的操作,比如输入提示之类的。