Use JQuery to complete form verification (extension)

event:
Get focus event: onfocus
Lost focus event: onblur
Key up event: onkeyup
Mouse in: onmousenter
Mouse out: onmouseout

JS import external file: script tag

requirement analysis

When users submit forms, we'd better be able to do a verification before the user data is submitted to the server to prevent the server from over pressure and give users a friendly prompt

technical analysis

  • trigger: triggers an event, but performs a browser default behavior similar to browsing moving the cursor into an input box
  • Trigger handler: only the function corresponding to the event will be triggered
  • is()

Step analysis

  1. First, add a small red dot at the end of the required items
  2. Obtain the information entered by the user and make corresponding verification
  3. Event: get focus, lose focus, press up
  4. Events submitted by form

code implementation

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css"/>
    <title></title>
    <!--
        1. Required first,Add tail add a small red dot
        2. Get user input information,Make corresponding verification
        3. Event: Get focus, Lose focus, Key up
        4. Events submitted by form

        Jq To achieve:
            1. Import JQ Documents of
            2. Document load event: Add a small red dot the day after the required item
            3. Form verification confirmation event: blur focus keyup
            4. Submit Form  submit
    -->
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script>

        $(function () {//Do some page initialization by default
            // Add a small red dot the day after all required items*
            $(".bitian").after("<font class='high'>*</font>");

            //Bind events to required items
            $(".bitian").blur(function () {

                //First, get the value currently entered by the user
//					var value = this.value;
                var value = $(this).val();

                //Clear span after current required
//					$(".formtips").remove();
                $(this).parent().find(".formtips").remove();

                //Get who the current event is
                if ($(this).is("#username ") {/ / determine whether it is a user name entry
                    //Verify user name
                    if (value.length < 6) {
                        $(this).parent().append("<span class='formtips onError'>User name is too short</span>");
                    } else {
                        $(this).parent().append("<span class='formtips onSuccess'>Enough user names</span>");
                    }
                }

                if ($(this).is("#Password ") {/ / determine whether it is a password entry
                    //Verify password
                    if (value.length < 3) {
                        $(this).parent().append("<span class='formtips onError'>The code is too short</span>");
                    } else {
                        $(this).parent().append("<span class='formtips onSuccess'>Enough passwords</span>");
                    }
                }
            }).focus(function () {
                $(this).triggerHandler("blur");
            }).keyup(function () {
                $(this).triggerHandler("blur");
            });

//				$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

            //Submit event to form binding
            $("form").submit(function () {
                //Trigger the verification logic of required items
                $(".bitian").trigger("focus");
                //Number of error messages found
                var length = $(".onError").length
                if (length > 0) {
                    return false;
                }
                return true;
            });
        });

    </script>
</head>

<body>
<form action="index.html">
    <div>
        //User name: < input type = "text" class = "Bitian" id = "username" / >
    </div>
    <div>
        //Password: < input type = "password" class = "Bitian" id = "password" / >
    </div>
    <div>
        //Phone number: < input type = "Tel" / >
    </div>
    <div>
        <input type="submit"/>
    </div>
</form>
</body>
</html>

Tags: Javascript JQuery

Posted on Thu, 07 May 2020 08:03:23 -0700 by jdimino