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>

 

posted @ 2018-07-27 17:19  bingxingc  阅读(130)  评论(0)  编辑  收藏  举报