JQuery implements registration form validation

The main points of knowledge included in this article:

The difference between event function triggerHandler and trigger function
The submit() method of the form submission event, if the return is false, prevent submit submission
To add content after an element, you need to first get the parent element of this element and then add the element through the append method.
Which object is compared through the is method of JQ (usually comparing the string using the selector string)

1. Step analysis:

1. You need to prepare an HTML file, which contains the content of the form element

<body>
        <div class="table">
            <form id="formTable" action="www.yijiadyidai.com" method="post">
                <table border="1" cellspacing="" cellpadding="">
            <tr>
                <td>用户名：</td>
                <td><input type="text" name ="username" id="username" class="required"/></td>
                <td></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name ="password" id="password" class="required"/></td>
                <td></td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name ="hobby" value="足球"/>足球
                    <input type="checkbox" name ="hobby" value="篮球"/>篮球
                    <input type="checkbox" name ="hobby" value="游泳"/>游泳
                    <input type="checkbox" name ="hobby" value="唱歌"/>唱歌

                </td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name ="email" id="email"/></td>
                <td></td>
            </tr>
            <tr>

                <td colspan="3"><input id="btn" type="submit"  value="注册" /></td>

            </tr>

        </table>
            </form>

        </div>

    </body>

2. You need to set the content of the style element first

 <style>
            .high{color: red;}
            .formtips{ width:200px;margin: 2px; padding: 2px;}
            .onSuccess{
                background:#E9FBEB url(img/right.png) no-repeat 0 center;
                padding-left: 25px;
            }
            .onError{
                background:#FFE0E9 url(img/error.png) no-repeat 0 center;
                padding-left: 25px;
            }
            td{width:500px;}
            #btn{width: 100%; background-color: dodgerblue;font:100;color: lightcoral;}
        </style>

3. First, add the required *
operation idea for the input that is text after the form: first get the required objects through JQ , and then traverse each object, use the parent object of these objects, and add it after the corresponding element element.

$parent = $(this).parent();

Add content after each object through this parent object

$parent.append("<span class='formtips onSuccess'");//多个类型可以用空格隔开 都会应用上面来的

4. Bind the blur event to the text box. After binding, you need to determine which element is out of focus, and use the is method.

if ($(this).is("#username")) {
                            //用户名不能为空，如果用户名为空的话，增加一个提示信息
                            if (this.value=="") {//为空
                                $parent.append("<span class='formtips onError'>用户名不能为空！</span>")
                            }else{
                                $parent.append("<span class='formtips onSuccess'>用户名正确！</span>")
                            }
                        }

5. Finally, add a submit event to the form, which was previously bound by the onsubmit attribute in the native way of JS.

$("form").submit(function(){
                        //首先执行需要把blur方法执行一遍，这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
                        $("form input").trigger("blur");//执行之后会增加<span>元素
                        if($(".onError").length>0) return false;
                    });

6. The trigger method is to execute each blur method to check how many errors there are

3. Summary

The idea of form inspection is:
1. Construct labels in a unified way
2. Bind different events to the corresponding labels of the form, such as focus blur, etc.
3. When submitting events, you need to have a return value, return false, native The JS is bound through the onsubmit attribute, and it cannot directly correspond to the function name () but needs to be preceded by the form of return XXX() .

The full code is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            作者：伦哥哥
            时间：2018-04-23
            描述：
            1.新建一个表单框架 注册页面（必填项后面添加一个*）
            2.光标离开会触发一个事件blur
            3.判断用户名是否为空，如果为空字体红色显示出来。如果正确是绿色的图片
            4.键盘输入也开始校验，添加获得焦点以及键盘输入的事件。
            5.为表单添加一个submit的函数
              》》执行blur的函数
              》》获得错误信息的长度 长度>0阻止提交return false
        -->
        <style>
            .high{color: red;}
            .formtips{ width:200px;margin: 2px; padding: 2px;}
            .onSuccess{
                background:#E9FBEB url(img/right.png) no-repeat 0 center;
                padding-left: 25px;
            }
            .onError{
                background:#FFE0E9 url(img/error.png) no-repeat 0 center;
                padding-left: 25px;
            }
            td{width:500px;}
            #btn{width: 100%; background-color: dodgerblue;font:100;color: lightcoral;}
        </style>
        <script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
        <script>
                $(document).ready(function(){
                    //1.页面加载之后把必须填的字段添加到文本框后面
                    $("input.required").each(function(){//中间不能够有空格 input .required是不对的
                        $(this).parent().append("<span class='high'>*</span>");
                    });
                    //2.给所有的文本框添加blur事件。
                    $("input").blur(function(){
                        var $parent = $(this).parent();
                        //需要先清除样式为formtips的内容 用到find方法
                        $parent.find(".formtips").remove();
                        //2.1判断点击的是哪个文本框 不同的文本框处理的内容也是不同的
                        if ($(this).is("#username")) {
                            //用户名不能为空，如果用户名为空的话，增加一个提示信息
                            if (this.value=="") {//为空
                                $parent.append("<span class='formtips onError'>用户名不能为空！</span>")
                            }else{
                                $parent.append("<span class='formtips onSuccess'>用户名正确！</span>")
                            }
                        }
                        if ($(this).is("#password")) {
                                if (this.value=="") {//为空
                                $parent.append("<span class='formtips onError'>密码不能为空！</span>")
                            }else{
//                              alert(this.value);
                                if(this.value.length != 6){
                                    $parent.append("<span class='formtips onError'>密码长度必须六位！</span>")
                                }else
                                {
                                    $parent.append("<span class='formtips onSuccess'>密码正确！</span>")
                                }
                            }
                        }
                        if ($(this).is("#email")) {
                                if (this.value=="") {//为空
                                $parent.append("<span class='formtips onError'>邮箱不能为空！</span>")
                            }else{
                                $parent.append("<span class='formtips onSuccess'>邮箱正确！</span>")
                            }
                        }
                    });
                    //为表单添加一个submit时间，只要有错误信息 就不能够提交信息 应该return false。需要使用trigger执行自定blur方法
                    //trigger和triggerHandler的区别还有trigger是对每个元素的绑定的方法都会执行，而triggerHandler只会执行第一个
                    $("form").submit(function(){
                        //首先执行需要把blur方法执行一遍，这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
                        $("form input").trigger("blur");//执行之后会增加<span>元素
                        if($(".onError").length>0) return false;
                    });
                });
        </script>
    </head>
    <body>
        <div class="table">
            <form id="formTable" action="www.yijiadyidai.com" method="post">
                <table border="1" cellspacing="" cellpadding="">
            <tr>
                <td>用户名：</td>
                <td><input type="text" name ="username" id="username" class="required"/></td>
                <td></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name ="password" id="password" class="required"/></td>
                <td></td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name ="hobby" value="足球"/>足球
                    <input type="checkbox" name ="hobby" value="篮球"/>篮球
                    <input type="checkbox" name ="hobby" value="游泳"/>游泳
                    <input type="checkbox" name ="hobby" value="唱歌"/>唱歌

                </td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name ="email" id="email"/></td>
                <td></td>
            </tr>
            <tr>

                <td colspan="3"><input id="btn" type="submit"  value="注册" /></td>

            </tr>

        </table>
            </form>

        </div>

    </body>
</html>