validate表单校验插件笔记

最新推荐文章于 2024-08-20 16:22:30 发布

weixin_30772105

最新推荐文章于 2024-08-20 16:22:30 发布

阅读量66

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/jepson6669/p/8401136.html

版权

1validation知识点

1 validation基础

validation插件下载 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

帮助文档位置：http://jqueryvalidation.org/documentation/

目录结构：

2 导入

3 使用前提

4 检验方式-js代码方式

5 html代码

默认显示的错误信息在第一个满足条件的表单组件后面，如果自己写了label标签，优先找自己写的。

6 代码演示

<head>
        <meta charset="UTF-8">
        <title>网站注册页面</title>
        <style>
            label.error{
                background:url(../img/unchecked.gif) no-repeat 10px 3px;
                padding-left: 30px;
                font-family:georgia;
                font-size: 15px;
                font-style: normal;
                color: red;
            }
            
            label.success{
                background:url(../img/checked.gif) no-repeat 10px 3px;
                padding-left: 30px;
            }
            
            #father{
                border: 0px solid white;
                padding-left: 307px;
            }
            
            #form2{
                border: 5px solid gray;
                width: 660px;
                height: 450px;
            }
            
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <!--引入validate插件js文件-->
        <script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
        <!--引入国际化js文件-->
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script>
            $(function(){
                $("#registForm").validate({
                    rules:{
                        user:{
                            required:true,
                            minlength:3
                        },
                        password:{
                            required:true,
                            digits:true,
                            minlength:6
                        },
                        repassword:{
                            required:true,
                            equalTo:"[name='password']"
                        },
                        email:{
                            required:true,
                            email:true
                        },
                        username:{
                            required:true,
                            maxlength:5
                        },
                        sex:{
                            required:true
                        }
                    },
                    messages:{
                        user:{
                            required:"用户名不能为空!",
                            minlength:"用户名不得少于3位!"
                        },
                        password:{
                            required:"密码不能为空!",
                            digits:"密码必须是整数!",
                            minlength:"密码不得少于6位!"
                        },
                        repassword:{
                            required:"确认密码不能为空!",
                            equalTo:"两次输入密码不一致!"
                        },
                        email:{
                            required:"邮箱不能为空!",
                            email:"邮箱格式不正确!"
                        },
                        username:{
                            required:"姓名不能为空!",
                            maxlength:"姓名不得多于5位!"
                        },
                        sex:{
                            required:"性别必须勾选!"
                        }
                    },
                    errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
                    success: function(label) { //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签label
                        label.text(" ") //清空错误提示消息
                            .addClass("success"); //加上自定义的success类
                    }
                });
            });
        </script>
    </head>

7 自定义校验器

<script type="text/javascript">
    
    //自定义校验规则
    $.validator.addMethod(
        //规则的名称
        "checkUsername",
        //校验的函数
        function(value,element,params){
            
            //定义一个标志
            var flag = false;
            
            //value:输入的内容
            //element:被校验的元素对象
            //params：规则对应的参数值
            //目的：对输入的username进行ajax校验
            $.ajax({
                "async":false,
                "url":"${pageContext.request.contextPath}/checkUsername",
                "data":{"username":value},
                "type":"POST",
                "dataType":"json",
                "success":function(data){
                    flag = data.isExist;
                }
            });
            
            
            //返回false代表该校验器不通过
            return !flag;
        }
        
    );


    $(function(){
        $("#myform").validate({
            rules:{
                "username":{
                    "required":true,
                    "checkUsername":true
                },
                "password":{
                    "required":true,
                    "rangelength":[6,12]
                },
                "repassword":{
                    "required":true,
                    "rangelength":[6,12],
                    "equalTo":"#password"
                },
                "email":{
                    "required":true,
                    "email":true
                },
                "sex":{
                    "required":true
                }
            },
            messages:{
                "username":{
                    "required":"用户名不能为空",
                    "checkUsername":"用户名已存在"
                },
                "password":{
                    "required":"密码不能为空",
                    "rangelength":"密码长度6-12位"
                },
                "repassword":{
                    "required":"密码不能为空",
                    "rangelength":"密码长度6-12位",
                    "equalTo":"两次密码不一致"
                },
                "email":{
                    "required":"邮箱不能为空",
                    "email":"邮箱格式不正确"
                }
            }
        });
    });

</script>

8 常用的校验规则

9 错误信息显示位置的设置

10 表单验证格式补充

<script type="text/javascript">
    $(function(){
        $("#myform").validate({
            rules:{
                /*username取的input里面的name属性对应的  */
                username:{
                    "required":true
                }
            },
            messages:{
                username:{
                    "required":"用户名不能为空"
                }
            }
        });
    });
    
</script>

如果使用国际化库提示信息可以是中文，但是不引入国际化库，直接写死的话，也可以是中文。上面就是直接写死了

11 其它补充

1 改变错误提示信息的颜色

.error{
    color: red;
}

2 错误信息显示位置问题

错误信息默认显示在第一个匹配的元素的后面

自己写了label标签之后，就不需要这个错误提示信息了。会直接使用后面自己写的label标签。如果有错误信息要显示的时候会自动将显示属性改为显示。

转载于:https://www.cnblogs.com/jepson6669/p/8401136.html

weixin_30772105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
validate表单校验插件笔记

1validation知识点1 validation基础validation插件下载http://bassistance.de/jquery-plugins/jquery-plugin-validation/帮助文档位置：http://jqueryvalidation.org/documentation/目录结构：2 导入3 使用前提...
复制链接

扫一扫