JS＞JQ

青旅半醒 2023-10-02 11:09 11阅读 0赞

## 一：表单验证： ##

js>jq结合：

![在这里插入图片描述][3945bbcf4fb54dfbb7d6f308f1f902b5.png]

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义表单验证</title>
        
        <style>
            table {
        
                width: 500px;
            }
            
            #td2 {
        
                color: aqua;
            }
            
            .error {
        
                color: red;
            }
            
            .correct {
        
                color: green;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            $(function() {
        
                $("input[type='submit']").click(function() {
        
                    var name = $("#unname").val().trim();
                    if (name.length == 0) {
        
                        $("#unnamereg").text("用户名不能为空").removeClass().addClass("error");
                        return false;
                    }
                    var unnamereg = /^\w{
        6,20}$/;
                    if (unnamereg.test(name)) {
        
                        $("#unnamereg").text("用户名格式正确").removeClass().addClass("correct");
                    } else {
        
                        $("#unnamereg").text("用户名格式错误").removeClass().addClass("error");
                        return false;
                    }
                })
                $("form").submit(function() {
        
                    var name = $("#unname").val().trim();
                    if (name.length == 0) {
        
                        $("#unnamereg").text("用户名不能为空").removeClass().addClass("error");
                        return false;
                    }
                    var unnamereg = /^\w{
        6,20}$/;
                    if (unnamereg.test(name)) {
        
                        $("#unnamereg").text("用户名格式正确").removeClass().addClass("correct");
                    } else {
        
                        $("#unnamereg").text("用户名格式错误").removeClass().addClass("error");
                        return false;
                    }
                })
            })
        </script>
    </head>
    
    <body>
        <form action="" method="POST">
            <table border="0" cellspacing="0">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" id="unname" name="unname" required="required" placeholder="请输入用户名" pattern="^\w{6,20}$" /></td>
                    <td id="td2"><span id="unnamereg">用户名必须为6-20位合法字符</span></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="提交" />
                    </td>
                    <td></td>
                </tr>
            </table>
        </form>
    </body>

![在这里插入图片描述][6791a105189f493a94ce677ec03efd58.png]  
**相同： $(“form”).submit(function() \{= $(“input\[type=‘submit’\]”).click(function() \{**

## 二：自定义表单验证 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_16_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16 1]

<body>
        <form action="" method="POST">
            <table border="0" cellspacing="0">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" id="unname" name="unname" 
                        required="required" placeholder="请输入用户名" pattern="^\w{6,20}$" /></td>
                    <td id="td2">
                        <span id="unnamereg">用户名必须为6-20位合法字符</span>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="text" id="pwd1" name="pwd" required="required" placeholder="请输入密码"  />
                    </td>
                    <td><span id="pwdcheack">密码不能少于六位</span></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="提交" />
                    </td>
                    <td></td>
                </tr>
            </table>
        </form>
    </body>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_17_color_FFFFFF_t_70_g_se_x_16]

## 三：lang口袋容器的使用： ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
**从一个Lang到下一个lang只需要attr层出叠加**

## 四：section的使用 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16 3]

[3945bbcf4fb54dfbb7d6f308f1f902b5.png]: https://img-blog.csdnimg.cn/3945bbcf4fb54dfbb7d6f308f1f902b5.png
[6791a105189f493a94ce677ec03efd58.png]: https://img-blog.csdnimg.cn/6791a105189f493a94ce677ec03efd58.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/40fe34938bc742c9af433244b83498db.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUmVjZW50bHkg56Wd56Wd,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d9335871d3c842c38ec62c07bad2666c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUmVjZW50bHkg56Wd56Wd,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d387bc2e007d485d9ac3d5ca539c9562.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUmVjZW50bHkg56Wd56Wd,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8d4fc2641a6346fdb959ba1b94c6e505.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUmVjZW50bHkg56Wd56Wd,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/1a56624769ba4c60971991c4ca62e423.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUmVjZW50bHkg56Wd56Wd,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUmVjZW50bHkg56Wd56Wd_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/8e3be1a2c71d47149155a328e52ad4b2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUmVjZW50bHkg56Wd56Wd,size_20,color_FFFFFF,t_70,g_se,x_16

JS＞JQ

发表评论取消回复

还没有评论，来说两句吧...

相关阅读