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

最新推荐文章于 2024-03-14 07:00:00 发布

风神.NET跨平台

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量365

点赞数

分类专栏： Jquery及其组件

原文链接：https://blog.csdn.net/WuLex

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

一、下载依赖包

二、引入依赖包

 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>

三、添加错误样式

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>

七、效果如下：

在这里插入图片描述

风神.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Validate 表单验证插件----自定义校验结果样式

一、下载依赖包二、引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script>三、添加错误样式e...
复制链接

扫一扫