jquery-validation输出提示信息美化

先看看美化过的输出信息吧

1、完成页面的基本布局以及导入jquery-1.8.3.js和jquery.validate.min.js还有页面css文件(conhui.css),配置jquery validate的校验规则

学生注册个人信息

 

    
   

      学号:
     

      
     

     

    

    

      姓名:
     

      
     

     

    

    

      性别:
    

                男
                女
    

     

    

     

            *身份证号码:
            

                
            

            

        

     

            *密码：
            

                
            

            

        

        

            *确认密码：
            

                
            

            

        

        

            

                
            

        

 

 

 

这个时候还真是没法看不截图啦

2、改变输出元素的样式，在该页面中添加输出验证信息的css

3、当验证时将该样式输出到正确的位置，正确的时候显示正确的样式，错误的时候显示错误的样式，王上面的$("#student").validate中添加如下内容

        success:function(label){
            label.text(" ").addClass("checked"); //正确的时候输出的样式为checked
        },
        errorPlacement: function(error, element) {
            if (element.is(":radio"))
                error.appendTo(element.parent().next());  //如果元素色type为radio将错误的信息输出到该元素的父类元素的下一个元素中，就是我们上面的

            else if (element.is(":checkbox")) //如果元素色type为checkbox将错误的信息输出到该元素的父类元素的下一个元素中，就是我们上面的

                error.appendTo(element.next());
            else
                error.appendTo(element.parent().next());
        },
        highlight: function(element, errorClass) {
            $(element).parent().next().find("." + errorClass).removeClass("checked");//表单用户(获取到焦点)操作时如果正确就移除错误的css属性添加正确的css属性
        }

我这个也是从官方实例中学来的，大家多看看官方示例肯定会有很大的收获的

源码文件下载