jQuery implements employee management registration page

This article example shares the specific code of jQuery to implement the employee management registration page for your reference. The specific content is as follows

Code Showcase

HTML page code

<body>
    <div class="container">
        <h2 class="text-center">User Registration</h2>
        <form action="Baidu.html" method="post" class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-md-2 col-md-offset-3 control-label">Username<b>*</b></label>
                <div class="col-md-3">
                    <input id="username" type="text" placeholder="4-10 English letters or numbers" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="errorname" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-md-2 col-md-offset-3 control-label">Password<b>*</b></label>
                <div class="col-md-3">
                    <input id="password" type="password" placeholder="8-16 English letters or numbers" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="errorpassword" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="form-group">
                <label for="confirm" class="col-md-2 col-md-offset-3 control-label">Confirm password<b>*</b></label>
                <div class="col-md-3">
                    <input id="confirm" type="password" placeholder="Confirm password" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="errorconfirm" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="form-group">
                <label for="department" class="col-md-2 col-md-offset-3 control-label">Department</label>
                <div class="col-md-3">
                    <select id="department" class="form-control">
                        <option>Sales Department</option>
                        <option>Technical Department</option>
                        <option>Human Resources Department</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-md-offset-3 control-label">Gender</label>
                <div class="col-md-3 radio">
                    <label><input name="gender" type="radio" value="1" checked>Male</label>
                    <label><input name="gender" type="radio" value="0">Female</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-md-offset-3 control-label">Hobbies</label>
                <div class="col-md-3 checkbox" id="hobbies">
                    <label><input type="checkbox" value="1" id="xq">Play chess</label>
                    <label><input type="checkbox" value="2" id="yy">Swimming</label>
                    <label><input type="checkbox" value="3" id="ps">Mountain climbing</label>
                    <label><input type="checkbox" value="4" id="dq">Play ball</label>
                </div>
                <div class="col-md-4">
                    <label id="errorhobbies" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-md-2 col-md-offset-3 control-label">Email</label>
                <div class="col-md-3">
                    <input type="email" id="email" placeholder="Email" class="form-control">
                </div>
                <div class="col-md-4">
                    <label id="erroremail" class="control-label errstyle"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 col-md-offset-3 control-label">Life motto</label>
                <div class="col-md-3">
                    <textarea class="form-control" rows="3" placeholder="This guy is lazy and left nothing"></textarea>
                </div>
            </div>
            <div class="col-md-2 col-md-offset-5 text-center">
                <button class="btn btn-primary" id="submit">Submit</button>
                <span> </span>
                <button class="btn btn-primary" type="reset">Clear</button>
            </div>
        </form>
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist"></script>
</body>

js code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" >
    <style>
        .errstyle {
            color: red;
        }
        b{
            color: red;
            font-weight: bold;
        }
    </style>
    
    <script src=""></script> //Introduce the jQuery library<script src=""></script>  
 
    <script>
    $(function(){
        var a=false;
        var b=false;
        var c=false;
        var d=false;
        var e=false;
        $("#username").blur(function(){
            if($(this).val().length == 0) {
                $("#errorname").html("Username is not empty");
                a=false;
            }
            else{
                var reg = /^[0-9a-zA-Z]{4,10}$/;
                if(!reg.test($(this).val())) {
                    $("#errorname").html("4-10 English letters or numbers");
                    a=false;
                }
                else{
                    $("#errorname").html("");
                    a=true;
                }
            }
        });
 
 
        $("#password").blur(function() {
            if($(this).val().length == 0) {
                $("#errorpassword").html("The password is not empty");
                b=false;
            }
            else{
                var reg = /^[0-9a-zA-Z]{6,15}$/;
                if(!reg.test($(this).val())) {
                    $("#errorpassword").html("6-15 English letters or numbers");
                    b=false;
                }
                else{
                    $("#errorpassword").html("");
                    b=true;
                }
            }
        });
 
 
        $("#confirm").blur(function() {
            if($(this).val().length == 0) {
                $("#errorconfirm").html("Confirm password is not empty");
                c=false;
            }
            else {
                if($(this).val() != $("#password").val()) {
                    $("#errorconfirm").html("Inconsistent with the password input");
                    c=false;
                }
                else {
                    $("#errorconfirm").html("");
                    c=true;
                }
            }
        });
 
        $("#email").blur(function() {
            if(!$("#xq").is(":checked") || $("#yy").is(":checked") || $("#ps").is(":checked") || $("#dq").is(":checked")){
                $("#errorhobbies").html("At least one hobby");
                e=false;
            }
            else{
                $("#errorhobbies").html("");
                e=true;
            }
            if($(this).val().length == 0) {
                $("#erroremail").html("The email address is not empty");
                d=false;
            }
            else{
                var reg=/^\w+@\w+(.\w+)+$/;
                if(!reg.test($(this).val())) {
                    $("#erroremail").html("Email format error");
                    d=false;
                }
                else{
                    $("#erroremail").html("");
                    d=true;
                }
            }
        });
 
        $("#submit").click(function() {
            if(a && b && c && d && e){
                $("form").submit();
            }
            else{
                alert("Some information is filled in incorrectly");
                return false;
            }
        });
    });
 
 
    </script>
</head>

Effect display

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery regular validation registration page classic example
ASP.NET jQuery Example 12: Use the jQuery validation plug-in to simply implement the user registration page validation function
jQuery pop-up registration page, etc. (asp.net background)

<<: Nginx installation detailed tutorial

>>: Detailed example of mysql similar to oracle rownum writing