Question

我有一个表单，希望在数据库中添加值。它工作正常，为了验证我添加了服务器端验证，但是如果在提交表单后显示任何错误，我希望以一种方式使用用户端验证，如果用户没有输入字段，则不是输入正确的格式或密码不匹配时，错误应同时显示，即在按下提交按钮之前。任何人都可以告诉它如何完成

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {


        if (empty($_POST["email"])) 
            {
                $emailErr = "Email is required";
            } 
        else
            {
                $email =$_POST["email"];
            }

        if (empty($_POST["password"])) 
            {
                $pswrdErr = "password is required";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        if ($_POST["password"]!=$_POST["retype_password"]) 
            {
                $pswrdErr = "password does not match";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        //insert query to add values in database

    } 
?>          
<form name="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" >
    <input type="text" placeholder="Name"  name="name"/>
    <input type="email"  placeholder="Email" name="email"/>
    <input type="password" placeholder="Password"  name="password"/>
    <input type="password" placeholder="Retype Password"  name="retype_password"/>
    <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">Register</button>
</form>

Answer 1

使用jquery代码进行客户端验证

$(form).submit(function(e){
  if($("input[name='name']").val()=="")
  {
    e.preventDefault();//this will stop form from submitting
    //show msg name is required
  }
});

Answer 2

你可以试试这个

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>    
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {
        if (empty($_POST["email"])) 
            {
                $emailErr = "Email is required";
            } 
        else
            {
                $email =$_POST["email"];
            }

        if (empty($_POST["password"])) 
            {
                $pswrdErr = "password is required";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        if ($_POST["password"]!=$_POST["retype_password"]) 
            {
                $pswrdErr = "password does not match";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        //insert query to add values in database

    } 
?>          
<form name="form" id="register-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" >
    <input type="text" placeholder="Name"  name="name"/>
    <input type="email"  placeholder="Email" name="email"/>
    <input type="password" placeholder="Password"  name="password" id="password"/>
    <input type="password" placeholder="Retype Password"  name="retype_password" id="retype_password"/>
    <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">Register</button>
</form>


<script>
    (function($,W,D)
    {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function()
            {
                //form validation rules
                $("#register-form").validate({
                    rules: {
                        name: "required",
                        email: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true,
                            minlength: 5,
                        },
                        retype_password: {
                            equalTo :'#password'
                        }
                    },
                    messages: {
                        name: "Please enter your name",
                        password: {
                            required: "Please provide a password",
                            minlength: "Your password must be at least 5 characters long",
                        },
                        email: "Please enter a valid email address",
                        agree: "Please accept our policy"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

    })(jQuery, window, document);
</script>
</body>
</html>

在提交表单之前显示用户结束错误

2 个答案: