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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
js保留两位小数方法总结
Jan 31 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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/04/24 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php封装一个异常的处理类
2017/06/08 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python3基础之输入和输出实例分析
2014/08/18 Python
Python栈类实例分析
2015/06/15 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
Sql面试题
2013/03/20 面试题
五年级学生评语
2014/04/22 职场文书
课外访万家心得体会
2014/09/03 职场文书
自我查摆剖析材料
2014/10/11 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
清洁工工作总结
2015/08/11 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis