同一表单中多个输入字段的非空验证

直接上代码，结构如下：

<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;

这里做的不仅是一个非空的验证，还是有一个去除输入框输入内容收尾空格的功能，因为大多数情况下，我们想要获取的数据，一般是不希望前后有空格的，没什么实际意义，这里是多加的一个小功能。这里已经实现了对同一个表单中多个输入字段的非空的客户端验证，还可以根据需要对每个非法的输入项做一些相应的操作，比如输入提示之类的。