js验证form表单数据是否正确决定是否跳转页面

相关的事件就是onsubmit，写在form标签上面，当验证通过时，则提交数据，跳转页面；当验证不通过时，则不提交数据。

在这里，验证的数据为密码是否是六位纯数字，如果是，则提交数据并跳转页面；如果不是则给出如下提示：

点击链接可以查看：http://1833233.com/effect/submitverification/apptest.html

form表单如下：

<form action="apptest.html" method="post" onsubmit="return myFunction()">
                        <div class="user-name">
                            <span class="glyphicon glyphicon-user"></span>
                            <span class="input-name"><input type="text" placeholder="用户名" name="username"></span>
                        </div>
                        <div class="user-password user-name">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span class="input-name"><input type="text" placeholder="密码" name="password" class="passwd-value"></span>
                        </div>
                        <div class="tip">请输入六位数字的密码!!!</div>
                        <div class="user-identity user-name">
                            <input type="radio" name="identity" value="student" checked="true" />学生
                            <input type="radio" name="identity" value="teacher" />老师
                            <input type="radio" name="identity" value="administrator" />管理员
                        </div>
                        <div class="user-submit user-name">
                            <input type="submit" value="登录" class="btn btn-default" />
                        </div>
                    </form>

οnsubmit=”return myFunction()”为验证事件，当函数返回true的时候点击提交按钮时才会提交；当函数返回true的时候，则不会提交；myFunction()内容如下：

<script>
        var infoValueNode = document.querySelector(".passwd-value");
        var tipNode = document.querySelector(".tip");
        var identityNode = document.querySelector(".user-identity");

        function myFunction() {
            var value = infoValueNode.value; //获得输入框里面的值
            console.log("value=", value);
            var reg = /^\d{6}$/; //定义六位纯数字的正则表达式
            var pattern = new RegExp(reg); //创建RegEXP实例
            if (!pattern.test(value)) { //test方法是检测value值是否匹配正则表达式
                infoValueNode.style.borderColor = "#F56C6C";
                tipNode.style.display = "block";
                identityNode.style.marginTop = "0px";
                return false;
            } else {
                infoValueNode.style.borderColor = "#409eff";
                tipNode.style.display = "none";
                identityNode.style.marginTop = "21px";
            }
        }
    </script>