前端实践（4）——表单验证（密码重复输入检查）

表单验证

表单元素具有可以处理以执行验证的 onsubmit 事件。创建一个带有两个输入框和一个按钮的窗体。两个字段中的文本应该相同，不能为空，才可通过验证,否则会有弹窗提示。

    <!-- 表单验证 -->
    <p>用户注册</p>
    <form onsubmit="return validate()" method="post">
        请输入账号: <input type="text" name="num" id="num" />
        <br />
        请输入密码: <input type="text" name="num1" id="num1" />
        <br />
        确认输入密码: <input type="text" name="num2" id="num2" />
        <br />
        <input type="submit" value="Submit" />
    </form>
    <script>
        function validate() {
            var n1 = document.getElementById("num1");
            var n2 = document.getElementById("num2");
            if (n1.value != "" && n2.value != "") {
                if (n1.value == n2.value) {
                    return true;
                }
            }
            alert("两次密码输入不同,请重新输入!");
            return false;
        }
    </script>