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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 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设计模式之装饰者模式
2012/02/29 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Express框架之connect-flash详解
2017/05/31 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
搞笑征婚广告词
2014/03/17 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015双创工作总结
2015/07/24 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书