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 去除数组的重复元素
May 04 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python多分支if语句的使用
2020/09/03 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
大学军训感言200字
2014/02/26 职场文书
法定代表人身份证明书
2014/09/10 职场文书
违反交通法规检讨书
2014/09/10 职场文书
审美与表现自我评价
2015/03/09 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
房产证明范本
2015/06/19 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python