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

display user end error before submitting a form

本文关键字：显示 用户端 错误 提交 表单      更新时间：2023-09-26

我有一个表单，我希望通过该表单在数据库中添加值。 它工作正常，为了验证，我添加了服务器端验证，但是提交表单后会显示任何错误（如果有的话），我希望以以下方式使用用户端验证： 如果用户不输入字段， 没有输入正确的格式或密码不匹配，错误应该同时显示，即在点击提交按钮之前。谁能说出它是如何做到

的 
<?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>

你可以试试这个 

<!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>

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

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