jQuery Validate 表单验证插件----自定义校验结果样式

绝地灬酷狼 2021-06-26 16:06 513阅读 0赞

## 一、下载依赖包 ##

## 二、引入依赖包 ##

## 三、添加错误样式 ##

em.error { 
      background:url("images/unchecked.gif") no-repeat 0px 0px;
      padding-left: 16px;
    }
    em.success { 
      background:url("images/checked.gif") no-repeat 0px 0px;
      padding-left: 16px;
    }

## 四、自定义提示信息 ##

messages: { 
                username: { 
                    required: '请输入姓名',
                    minlength: '请至少输入两个字符'
                },
                email: { 
                    required: '请输入电子邮件',
                    email: '请检查电子邮件的格式'
                },
                url: '请检查网址的格式',
                comment: '请输入您的评论'
            },

## 五、调用错误样式，或是成功样式。 ##

errorElement: "em", //可以用其他标签，记住把样式也对应修改
            success: function(label) { 
                //label指向上面那个错误提示信息标签em
                label.text(" ")                //清空错误提示消息
                    .addClass("success");    //加上自定义的success类
            }

## 六、详细的代码 ##

jQuery表单验证插件----自定义校验结果样式

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>jQuery表单验证插件----自定义错误样式</title>
        <script src="scripts/jquery-1.8.2.js"></script>
        <script src="scripts/jquery.validate.js"></script>
        <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { float: left; width: 10em; } label.error { color: red; float: none; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } em.error { background: url("img/checked.png") no-repeat 0px 0px; padding-left: 16px; } em.success { background: url("img/unchecked.png") no-repeat 0px 0px; padding-left: 16px; } </style>
    
        <script type="text/javascript"> $(document).ready(function() { $("#commentForm").validate({ rules: { username: { required: true, minlength: 2 }, email: { required: true, email: true }, url: "url", comment: "required" }, messages: { username: { required: '请输入姓名', minlength: '请至少输入两个字符' }, email: { required: '请输入电子邮件', email: '请检查电子邮件的格式' }, url: '请检查网址的格式', comment: '请输入您的评论' }, errorElement: "em", //可以用其他标签，记住把样式也对应修改 success: function(label) { //label指向上面那个错误提示信息标签em label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); }); </script>
    
    </head>
    <body>
    
    <form class="cmxform" id="commentForm" method="get" action="">
        <fieldset>
            <legend>jQuery表单验证插件----自定义校验结果样式</legend>
            <p>
                <label for="cusername">姓名</label>
                <em>*</em><input id="cusername" name="username" size="25"/>
            </p>
            <p>
                <label for="cemail">电子邮件</label>
                <em>*</em><input id="cemail" name="email" size="25"/>
            </p>
            <p>
                <label for="curl">网址</label>
                <em> </em><input id="curl" name="url" size="25" value=""/>
            </p>
            <p>
                <label for="ccomment">你的评论</label>
                <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="提交"/>
            </p>
        </fieldset>
    </form>
    </body>
    </html>

## 七、效果如下： ##

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

[2019080817412253.png]: /images/20210626/11f5ad41cbc0493a8dd09180c6726d53.png