关于jQuery插件Validate实现自定义校验结果样式的代码

来源：动视网责编：小采时间：2020-11-27 19:35:10

关于jQuery插件Validate实现自定义校验结果样式的代码

关于jQuery插件Validate实现自定义校验结果样式的代码:这篇文章主要介绍了jQuery插件Validate实现自定义校验结果样式的方法，感兴趣的小伙伴们可以参考一下本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码，分享给大家供大家参考，具体内容如下效果如下：具体步骤：1、引入依赖包 <s

推荐度：

点击下载本文 文档为doc格式

导读关于jQuery插件Validate实现自定义校验结果样式的代码:这篇文章主要介绍了jQuery插件Validate实现自定义校验结果样式的方法，感兴趣的小伙伴们可以参考一下本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码，分享给大家供大家参考，具体内容如下效果如下：具体步骤：1、引入依赖包 <s

这篇文章主要介绍了jQuery插件Validate实现自定义校验结果样式的方法，感兴趣的小伙伴们可以参考一下

本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码，分享给大家供大家参考，具体内容如下

效果如下：

具体步骤：

1、引入依赖包

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

2、添加错误样式

 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;
}

3、自定义提示信息

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

4、调用错误样式，或是成功样式

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

5、详细的代码

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----自定义错误样式</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; 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("images/unchecked.gif") no-repeat 0px 0px;
 padding-left: 16px;
}
em.success {
 background:url("images/checked.gif") 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>

关于jQuery插件Validate实现自定义校验结果样式的代码

推荐度：

点击下载本文 文档为doc格式

标签：自定义代码样式

热门焦点

关于jQuery插件Validate实现自定义校验结果样式的代码

关于jQuery插件Validate实现自定义校验结果样式的代码

关于jQuery插件Validate实现自定义校验结果样式的代码

最新推荐

猜你喜欢

热门推荐