jquery validate 添加自定义样式

左手的ㄟ右手 2021-06-26 16:06 570阅读 0赞

## 实现效果: ##

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

## 错误信息的默认位置以及标签 ##

`validate`插件的默认错误信息插入位置是 要验证的元素的后面,所用的标签是 ,验证不通过时,会给`label`以及所验证的元素添加 `class=error`, 验证通过后,`label`会被隐藏.

## 先要知道下面这几个方法 ##

**1.`errorElement`:标签名**  
表示错误信息所用的标签,默认是`label`  
**2.`errorPlacement:function(error,element) { 修改错误信息的位置 }`**  
`error`指的是错误信息,如用户名有误,`element`指的是校验的元素,如用户名输入框,方法体内可以写错误信息出现在校验元素,如:

errorPlacement: function (error, element) {  $(element).after(error); },

**3.`success:function(参数名) { }`**  
参数指的是错误信息的标签,方法体可以写对这个标签的样式的操作.  
**4.`showErrors:function (errorMap, errorList) {}`**  
这里只用到`errorMap`,`errorMap`是出错元素的一个键值对的集合, 其中的键是元素`name`属性的值,值是元素的`value`.

## 直接上代码 ##

css代码:

em { font-size:10px; color:red}
    em.success { 
        color:green;
    }

js代码:

$(function () { 
        var pic = '<span class="glyphicon glyphicon-remove"></span>';
        //bootstrap的字体图标,这是上面图片中的×
        $("#myForm").validate({ 
            rules: { 
                name: "required",
                password: "required"
            },
            messages: { 
                name: pic + "用户名不能为空",
                password:pic + "密码不能为空"
            },
    
            errorElement: "em", //可以用其他标签，记住把样式也对应修改
            success: function(em) { 
                //em指向上面那个错误提示信息标签em
                $(em).text("").addClass("glyphicon glyphicon-ok-circle success");
                //先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色
            },
    
            showErrors:function (errorMap, errorList) { 
                for (var element in errorMap) { 
                    $("#" + element).next("em").removeClass();
                    //去除success样式和字体图标,不去除会跟错误信息一起出现
                }
                this.defaultShowErrors();
                //默认的错误信息显示样式
            }
        })
    });

完整html代码:

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <style type="text/css"> em { color: red; font-size: 15px; } #myForm { margin: 20px; } em.success { color: green; } </style>
        <script src="scripts/jquery-1.8.2.js"></script>
        <script src="scripts/jquery.validate.js"></script>
        <script src="scripts/bootstrap.min.js"></script>
        <script type="text/javascript"> $(function() { var pic = '<span class="glyphicon glyphicon-remove"></span>'; //bootstrap的字体图标,这是上面图片中的× $("#myForm").validate({ rules: { name: "required", password: "required" }, messages: { name: pic + "用户名不能为空", password: pic + "密码不能为空" }, errorElement: "em", //可以用其他标签，记住把样式也对应修改 success: function(em) { //em指向上面那个错误提示信息标签em $(em).text("").addClass("glyphicon glyphicon-ok-circle success"); //先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色 }, showErrors: function(errorMap, errorList) { for (var element in errorMap) { $("#" + element).next("em").removeClass(); //去除success样式和字体图标,不去除会跟错误信息一起出现 } this.defaultShowErrors(); //默认的错误信息显示样式 } }); }); </script>
    </head>
    
    <body>
    <form id="myForm">
        <div>
            <label for="name">用户名</label>
        </div>
        <div>
            <input type="text" name="name" id="name" />
        </div>
        <div>
            <label for="password">密码</label>
        </div>
        <div>
            <input type="text" name="password" id="password" />
        </div>
        <div>
            <button type="submit">提交</button>
        </div>
    </form>
    </body>
    
    </html>

[20190728200351252.png]: /images/20210626/278dc375e69f437cb29887a11211df4f.png