Javascript 表单验证不显示错误 - Javascript form validation not displaying errors

只是坚持尝试让表单验证工作。在你说什么之前，我正在使用jquery将文件拉取到div中，因此css文件在索引中.php(此处无关(。

所以我试图在这里获得一些表单验证，因为我仍在为大学学习，我很困惑这里的脚本验证表单出了什么问题。

哦，只是一个饼干问题...当有人提交表单但抛出内容保留在字段中的错误时，是否有可能？或者我不能，因为我使用 JS 提交表单数据？

感谢任何回复:)

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script language="javascript" type="text/javascript">
function validateForm(form){
var user=form.username.value;
var email = form.email.value;
var str=form.password.value;
var cstr=form.cpassword.value;
var err={}; 
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/;
//check required fields
//checks username
if((user.length < 3) || (user.length > 15)){
err.message="username must be between 3 and 15 characters.";
err.field=form.username;
}
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {
err.message="Invalid password length"; 
err.field=form.password; 
}
//check if repeated password matches
if(cstr!=str)
{
err.message="Passwords do not match";
err.field.form.cpassword;
}
//validate email
if(!(validemail.test(email))){
err.message="Invalid email"; 
err.field=form.email; 
}
if(err.message) 
        { 
               document.getElementById('results').innerHTML = err.message;
                err.field.focus();
                return false;                        
        } 
return true
}
</script> 
</head>
<body>
<div id="content" class="content">
    <div class="content-heading">
        <div class="content-heading-title">
        <h3>Register now!</h3>
        </div>
    </div>
    <div class="content-info">
    <form id="myForm" method="post" onsubmit="return validateForm(this);">
    Username:        <input name="username" id="username" type="text" /><br />
    Email:           <input name="email" id="email" type="text" /><br />
    Password:        <input name="password" id="password" type="password" /><br />
    Confirm Password:<input name="cpassword" id="cpassword" type="password" /><br /> 
    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
    </form>
    <div id="results"></div>
    </div>
</div>
    <script>
    function SubmitFormData() {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        var cpass = $("#cpassword").val();
        $.post("submit.php", { 
            username: username, 
            email: email, 
            pass: pass,
            cpass: cpass
        }, function(data) {
            $('#results').html(data);
            $('#myForm').trigger('reset');
        });
    }
    </script>
</body>
</html>

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<div id="content" class="content">
    <div class="content-heading">
        <div class="content-heading-title">
        <h3>Register now!</h3>
        </div>
    </div>
    <div class="content-info">
    <form id="myForm" method="post">
    Username:        <input name="username" id="username" type="text" /><br />
    Email:           <input name="email" id="email" type="text" /><br />
    Password:        <input name="password" id="password" type="password" /><br />
    Confirm Password:<input name="cpassword" id="cpassword" type="password" /><br /> 
    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
    </form>
    <div id="results"></div>
    </div>
</div>
    <script>
    function SubmitFormData() {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        var cpass = $("#cpassword").val();
        var validemail = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
        if((username.length < 3) || (username.length > 15)) {       //Useranme should be minimum 3 chars but not greater than 15
            var message = "username must be between 3 and 15 characters.";
            $('#results').html(message);
            $("#username").focus();
            return false; 
        } else if ((pass.length < 4) || (pass.length > 8)) {        //password should be minimum 4 chars but not greater than 8
            var message = "Invalid password length"; 
            $('#results').html(message);
            $("#password").focus();
            return false;  
        } else if(cpass != pass) {      //check if repeated password matches
            var message = "Passwords do not match";
            $('#results').html(message);
            $("#cpassword").focus();
            return false; 
        } else if(email == "") {        //check if email address enterd
            var message = "Enter Email address";
            $('#results').html(message);
            $("#email").focus();
            return false; 
        } else if(!validemail.test(email)){     //validate email
            var message = "Invalid email"; 
            $('#results').html(message);
            $("#email").focus();
            return false;  
        } else { // Then POST the Form
            $('#results').html("Sending Registration");
            $.post("submit.php", { 
                username: username, 
                email: email, 
                pass: pass,
                cpass: cpass
            }, function(data) {
                $('#results').html(data);
                $('#myForm').trigger('reset');
            });
        }
    }
    </script>
</body>
</html>

删除

表单上的onsubmit并删除验证功能，并将所有验证放在SubmitFormData((函数中，如上面的代码一样

删除表单上的onsubmit，并从SubmitFormData调用validateForm。

你应该这样做：

function validateForm(){
    var username = $("#username").val();
    var email = $("#email").val();
    var pass = $("#password").val();
    var cpass = $("#cpassword").val();
    var err={
        message: "",
        field: ""
    }; 
    var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/;
    //check required fields
    //checks username
    if(username.length < 3 || username.length > 15){
        err.message="username must be between 3 and 15 characters.";
        err.field="username";
    }
    //password should be minimum 4 chars but not greater than 8
    if (pass.length < 4 || pass.length > 8) {
        err.message="Invalid password length"; 
        err.field="password"; 
    }
    //check if repeated password matches
    if(cpass!=pass)
    {
        err.message="Passwords do not match";
        err.field="cpassword";
    }
    //validate email
    if(!validemail.test(email)){
        err.message="Invalid email"; 
        err.field="email"; 
    }
    if(err.message != "") 
    { 
        $("#results").html(err.message);
        $("#"+err.field).focus();
        return false;
    }
    $("#results").html(""); // to clean results div in the case of previous error message
    return true;
}
function SubmitFormData() {
    if(validateForm()) {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        var cpass = $("#cpassword").val();
        $.post("submit.php", { 
            username: username, 
            email: email, 
            pass: pass,
            cpass: cpass
        }, function(data) {
            $('#results').html(data);
            $('#myForm').trigger('reset');
        });
    }
}

有很多事情需要解释和缺陷。但是我从您的代码中扩展了一点修改。剩下的你可以理解和学习。更改如下：

    <html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script language="javascript" type="text/javascript">
function validateForm(form){
    var user=form.username.value;
    var email = form.email.value;
    var str=form.password.value;
    var cstr=form.cpassword.value;

    var err={}; 
    var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/;
    //check required fields
    //checks username
    if((user.length < 3) || (user.length > 15)){
    err.message = "username must be between 3 and 15 characters.<br><br>";
    err.field=form.username;
    }
    //password should be minimum 4 chars but not greater than 8
    if ((str.length < 4) || (str.length > 8)) {
    err.message += "Invalid password length.<br><br>"; 
    err.field=form.password; 
    }
    //check if repeated password matches
    if(cstr!=str)
    {
    err.message += "Passwords do not match.<br><br>";
    err.field.form.cpassword;
    }
    //validate email
    if(!(validemail.test(email))){
    err.message += "Invalid email.<br><br>"; 
    err.field=form.email; 
    }
    if(err.message) 
    {  
           document.getElementById('results').innerHTML = err.message;
            err.field.focus();
            return false;                        
    } else {
        SubmitFormData();
        return false;
    }
}
</script> 
</head>
<body>
<div id="content" class="content">
    <div class="content-heading">
        <div class="content-heading-title">
        <h3>Register now!</h3>
        </div>
    </div>
    <div class="content-info">
    <form id="myForm" method="post" onsubmit="return validateForm(this);">
    Username:        <input name="username" id="username" type="text" /><br />
    Email:           <input name="email" id="email" type="text" /><br />
    Password:        <input name="password" id="password" type="password" /><br />
    Confirm Password:<input name="cpassword" id="cpassword" type="password" /><br /> 
    <input type="submit" id="submitFormData" value="Submit" />
    </form>
    <div id="results"></div>
    </div>
</div>
    <script>
    function SubmitFormData() {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        var cpass = $("#cpassword").val();
        $.post("submit.php", { 
            username: username, 
            email: email, 
            pass: pass,
            cpass: cpass
        }, function(data) {
            $('#results').html(data);
            $('#myForm').trigger('reset');
        });
    }
    </script>
</body>
</html>