Question

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>USER REGISTRATION</h1>
<br>
<form class="for" name="ureg" method="post" action="">
<fieldset style="margin-right: 900px">
<legend>Registration Form</legend>
<pre>
Name              <input class="name" type="text"><span id="errmsg5"></span></input><br><br>
User Name         <input class="uname" type="text"><span id="errmsg6"></span></input><br><br>
Password          <input class="pass" type="password" name="pass"><span id="errmsg7"></span></input><br><br>
Confirm Password  <input class="cpass" type="password" name="cpass"><span id="errmsg1"></span></input><br><br>
Email             <input type="email"></input><br><br>
Gender            <input type="radio" name="gender" value="male">Male</input><input type="radio" name="gender" value="female">Female</input><br><br>
Country           <select name="country" style="width: 175px;">
                    <option value="india">India</option>
                    <option value="pakistan">Pakistan</option>
                    <option value="sri lanka">Sri Lanka</option>
                    <option value="china">China</option>
                    <option value="china">Japan</option>
                    <option value="china">Bangladesh</option>
                    </select><br><br>
Mobile            <input class="mob" type="number"><span id="errmsg3"></span></input><br><br>
Age               <input class="age" type="number" name="age"><span id="errmsg2"></span></input><br><br>
D.O.B             <input type="date"></input><br><br>
Address           
<textarea rows="4" cols="50" name="address"></textarea><br><br>
Pincode           <input class="pin" type="number"><span id="errmsg4"></span></input><br><br>
<input id="submit" type="submit" value="SUBMIT">                <input id="reset" type="submit" value="RESET">
</pre>
</fieldset>
</form>

<script type="text/javascript">
    $(function () {

            $(".cpass").change(function () {
            var password = $(".pass").val();
            var confirmPassword = $(".cpass").val();
            if (password != confirmPassword) 
            {
                $("#errmsg1").text(" Password does not match");
                return false;
            }
            else
            {
                $("#errmsg1").text("");
                return true;
            }
        });
            $(".age").change(function () {
            $("#errmsg2").text(" ");
            var n = $(".age").val();

            if (n < 18) {
                $("#errmsg2").text( " Age should be > 18");
                return false;
            }
            return true;
        });

            $(".mob").change(function () {

            $("#errmsg3").text( " ");
            var mobile = $(".mob").val();

            if (mobile.length != 10) {
                $("#errmsg3").text( " Not a valid number");
                return false;
            }
            return true;

        });

            $(".pin").change(function () {
            $("#errmsg4").text( " ");

            var mobile = $(".pin").val();

            if (mobile.length != 6) {
                $("#errmsg4").text( " Not a Valid Pincode");
                return false;
            }
            return true;

        });


            $(".name").change(function () {
            $("#errmsg5").text( " ");
            var name = $(".name").val();
            var pattern = new RegExp("^[A-z]+$");

            if (!pattern.test(name)) {
                $("#errmsg5").text( " Name should contain only letters");
                return false;
            }
            return true;
        });

            $(".uname").change(function () {
            $("#errmsg6").text( " ");
            var uname = $(".uname").val();
            var pattern = new RegExp("^[A-z0-9]+$");

            if (!pattern.test(uname)) {
                $("#errmsg6").text( " User Name should contain only numbers and alphabets");
                return false;
            }
            return true;
        });

            $(".pass").change(function () {
            $("#errmsg7").text(" ");
            var pass = $(".pass").val();
            if(pass.length>8)
            {
                var caps = /[A-Z]/.test(pass);
                var small = /[a-z]/.test(pass);
                var num= /[0-9]/.test(pass);
                var sp=/\W|_/.test(pass);
                if(caps&&small&&num&&sp)
                {
                    $("#errmsg7").text("");
                    return true;
                }
                else
                {
                    $("#errmsg7").text("Password should be of minimum 8 characters and contain atleast 1 upper case, 1 lower case, 1 digit and 1 special characters");
                    return false;
                }
            }
            else
            {
                $("#errmsg7").text("Password should be of minimum 8 characters and contain atleast 1 upper case, 1 lower case, 1 digit and 1 special characters");
                    return false;
            }
        });


    });
</script>

</body>
</html>

这是我验证表单的代码。按下SUBMIT后，我想再次检查这些值。或者，只有在所有条件都成立时，提交才会起作用。有没有办法做到这一点？

Answer 1

您可以定位表单并检查“submit”事件，如果值不正确则返回false。或者，您可以使用e.preventDefault();阻止对事件的默认，并使用AJAX提交表单。

编辑：以下是我通常作为表单验证的第一遍的简短版本。请注意，这是您应该做的绝对最少。用户可以简单地删除所需的属性，并通过首次验证获得，因此您应该始终检查绝对必需的字段，以及在清理输入后检查服务器端 。（如同删除不允许的字符，然后检查正确的数据。）

$('form.validate').on('submit', function(e, el) { var inputs = $(this).find('input[required]'), empty = $(inputs).map(function(e, el) { if (el.value === '') { return el; } }); if (empty.length > 0) { return false; } })

使用jquery检查表单中的所有条件

1 个答案: