jQuery插件Validate实现自定义校验结果样式


Posted in Javascript onJanuary 18, 2016

本文实例介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
js实现日期级联效果
Jan 23 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
详解JavaScript 作用域
Jul 14 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 #Javascript
轻松实现js图片预览功能
Jan 18 #Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 #Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 #Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
You might like
PHP 柱状图实现代码
2009/12/04 PHP
php与paypal整合方法
2010/11/28 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
js实现随机点名功能
2020/12/23 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Pytorch to(device)用法
2020/01/08 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
房地产经营管理专业自荐信
2014/09/02 职场文书
美术教师个人总结
2015/02/06 职场文书
如何写新闻稿
2015/07/18 职场文书
导游词之吉林花园山
2019/10/17 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python