zoukankan      html  css  js  c++  java
  • JQuery表单验证插件

    使用jQuery的validate插件实现一个简单的表单验证

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        
        </head>
        <body style="margin: 50px;">
            <form id="form1" action="#" method="get">
                <table>
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="username" id="username" /></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="password" id="password" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="提交" /></td>
                    </tr>
                </table>
            </form>
            <!--引入JQ库-->
            <script src="../js/jquery-3.3.1.js"></script>
            <!--引入validate库-->
            <script src="../js/jquery.validate.js"></script>
            <script type="text/javascript">
                $("#form1").validate({
                    rules:{
                        username:{
                            required:true
                        },
                        password:{
                            required:true,
                            minlength:4,
                            maxlength:6
                        }
                    },
                    messages:{
                        username:{
                            required:"用户名必填"
                        },
                        password:{
                            required:"密码不能为空",
                            minlength:"密码的最小长度为4",
                            maxlength:"密码的最大长度为6"
                        }
                    }
                })
            </script>
        </body>
    </html>

    如果是radio或者checkbox,校验不通过时默认的提示信息在第一个radio后面,的解决方案:

    //在radio标签前后面加上以下标签:注意,lable的for属性值要与radio的name属性值保持一致。
    
        <label class="error" for="gender" style="display: none;"></label>
  • 相关阅读:
    CentOS7 安装 Mysql5.6.40
    CentOS7 安装 Python3.6.5
    CentOS7 添加新用户并授权 root 权限
    02 常用数据结构
    01 常见算法
    初识 Docker
    glob & fnmatch -- 使用Unix style通配符
    Pillow6 起步
    leetcode70. 爬楼梯 🌟
    leetcode69. x 的平方根 🌟
  • 原文地址:https://www.cnblogs.com/bingxing/p/9378737.html
Copyright © 2011-2022 走看看