简单的表单验证

简单的表单验证实现的效果：

---

---

实现的功能有：

1. 多选框必须有选中内容；
2. 限制密码长度；
3. 两次密码输入一致性监测；
4. 文本域内需要有值；

代码实现如下：

 <h1>验证表单的案例</h1>
    <form name="form1" id="f1" action="../TestForm" method="get">
        姓名：<input type="text" name="userName" id="uName">
        <br />
        年龄：<input type="text" name="age" id="uAge">
        <br />
        密码：<input type="password" name="pwd" id="myPwd">
        <br />
        重复密码：<input type="password" name="repeatPwd" id="myRepeatPwd">
        <br />
        爱好：<input type="checkbox" name="hobby" id="myHobby" value="football">足球
        <input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球
        <input type="checkbox" name="hobby" id="myHobby" value="basketball">篮球
        <input type="checkbox" name="hobby" id="myHobby" value="billiards">台球
        <br />
        备注：<textarea rows="3" cols="30" id="remarks"></textarea>
        <br />
        <!-- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值 -->
        <input type="button" value="js验证表单" onclick="checkForm();">
    </form>
    <script>
        var flag = false;
        //验证表单数据
        function checkForm() {
            // var flag = false;
            for (var i = 0; i < document.form1.hobby.length; i++) {
                if (document.form1.hobby[i].checked) {
                    flag = true;
                    break;
                }
            }
            if (!flag) { //没有一个爱好被选中
                alert("请至少选择一个爱好!");
                return;
            }
            if (document.forms[0].pwd.value.length < 8) {
                alert("密码长度不能小于8位!");
                document.forms[0].pwd.focus(); //让密码框获取焦点
                return;
            }
            if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
                alert("两次密码输入不一致!");
                document.forms[0].repeatPwd.focus(); //让重复密码框获取焦点
                return;
            }
            if (document.getElementById("remarks").value == "") {
                alert("备注不能为空!");
            }
        }
    </script>