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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 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 中的类
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
php实现图片缩放功能类
2013/12/18 PHP
php实现文件编码批量转换
2014/03/10 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
键盘KeyCode值列表汇总
2013/11/26 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
利用Python实现命令行版的火车票查看器
2016/08/05 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python实现飞机大战小游戏
2019/11/08 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
销售业务员岗位职责
2014/01/29 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
病危通知书样本
2015/04/17 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
紫日观后感
2015/06/05 职场文书
环保建议书作文400字
2015/09/14 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
教你一步步实现一个简易promise
2021/11/02 Javascript