使用javascript的onsubmit进行表单合法性验证

在 HTML5 中表单 <form>的 action属性指定了表单提交目标位置，但是希望在提交（submit）之前进行简单的表单输入合法性验证，直接使用javascript在前端进行就行，此时可以使用javascript提供的onsubmit方法来实现：

这里写代码片

    <form id="registerForm" action="registerServlet" onsubmit="return checkRegister()" method="post">
        <h3><strong>加入我们</strong></h3>
        <input type="text" name="userName" id="userName" placeholder="请输入用户名" />
        <input type="email" name="email" id="email" placeholder="Email" />
        <input type="password" name="password" id="password" placeholder="密码" />
        <input type="password" name="password_Comfirm" id="password_Comfirm" placeholder="请再次输入密码" />
        <input type="submit" name="submit" value="注册" />
    </form>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">

            function checkRegister(){

                // 1. input: userName
                if ($("#userName").val() == ""){
                    alert("1 请输入用户名");
                    $("#userName").focus();
                    return false;
                }

                // 2. input: password
                if ($("#password").val() == ""){
                    alert("2 请输入登录密码");
                    $("#password").focus();
                    return false;
                }

                // 3. input: password_Comfirm
                if ($("#password_Comfirm").val() != $("#password").val()){
                    alert("3 确认密码不正确！");
                    $("#password_Comfirm").focus();
                    return false;
                }

                // 4.1. input: email
                var myemail = $("#email").val();
                if (myemail == ""){
                    alert("4 请输入用户邮箱！");
                    $("#email").focus();
                    return false;
                }

                // 4.2. input: email
                if (myemail.indexOf("@")<1 || myemail.lastIndexOf(".")<2){
                    alert("5 邮箱格式有误！");
                    $("#email").focus();
                    return false;
                }

                return true;
            }

以下是一点深入地探讨和可能会碰到的问题：

• <form>表单中type=submit 与javascript方法onsubmit的逻辑关系

• 为什么Eclipse编辑器中的html/jsp文件的<form>标签里写的onsubmit="return validate()"会报错？

---

写博不易，转载请注明来源：http://blog.csdn.net/dachylong
若文章存在错误之处，请大家不吝赐教！