一、下载依赖包

网盘下载：https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224

二、引入依赖包

  1.  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  2.  <script src="lib/jquery.validate.js" type="text/javascript"></script>

三、添加错误样式和成功样式

  1. em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  2. em.error {
  3.   background:url("images/unchecked.gif") no-repeat 0px 0px;
  4.   padding-left: 16px;
  5. }
  6. em.success {
  7.   background:url("images/checked.gif") no-repeat 0px 0px;
  8.   padding-left: 16px;
  9. }

四、自定义一个验证方法

  1.  //自定义一个验证方法
  2.     $.validator.addMethod(
  3.     "formula", //验证方法名称
  4.     function(value, element, param) {//验证规则
  5.         return value == eval(param);
  6.     },
  7.     '请正确输入数学公式计算后的结果'//验证提示信息
  8.     );

五、调用样式显示。

  1.  errorElement: "em",                //用来创建错误提示信息标签
  2.         success: function(label) {            //验证成功后的执行的回调函数
  3.             //label指向上面那个错误提示信息标签em
  4.             label.text(" ")                //清空错误提示消息
  5.                 .addClass("success");    //加上自定义的success类
  6.         }

六、详细代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery表单验证插件----自定义一个验证方法</title>
  6.  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7.  <script src="lib/jquery.validate.js" type="text/javascript"></script>

  8. <style type="text/css">
  9. * { font-family: Verdana; font-size: 96%; }
  10. label { width: 10em; float: left; }
  11. label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  12. p { clear: both; }
  13. .submit { margin-left: 12em; }
  14.  
  15. em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  16. em.error {
  17.   background:url("images/unchecked.gif") no-repeat 0px 0px;
  18.   padding-left: 16px;
  19. }
  20. em.success {
  21.   background:url("images/checked.gif") no-repeat 0px 0px;
  22.   padding-left: 16px;
  23. }
  24.  
  25. </style>
  26.   <script type="text/javascript">
  27.   $(document).ready(function(){
  28.  
  29.     //自定义一个验证方法
  30.     $.validator.addMethod(
  31.     "formula", //验证方法名称
  32.     function(value, element, param) {//验证规则
  33.         return value == eval(param);
  34.     },
  35.     '请正确输入数学公式计算后的结果'//验证提示信息
  36.     );
  37.  
  38.     $("#commentForm").validate({
  39.         rules: {
  40.             username: {
  41.                 required: true,
  42.                 minlength: 2
  43.             },
  44.             email: {
  45.                 required: true,
  46.                 email: true
  47.             },
  48.             url:"url",
  49.             comment: "required",
  50.             valcode: {
  51.                 formula: "7+9"
  52.             }
  53.         },
  54.  
  55.         messages: {
  56.             username: {
  57.                 required: '请输入姓名',
  58.                 minlength: '请至少输入两个字符'
  59.             },
  60.             email: {
  61.                 required: '请输入电子邮件',
  62.                 email: '请检查电子邮件的格式'
  63.             },
  64.             url: '请检查网址的格式',
  65.             comment: '请输入您的评论'
  66.         },    
  67.  
  68.         errorElement: "em",                //用来创建错误提示信息标签
  69.         success: function(label) {            //验证成功后的执行的回调函数
  70.             //label指向上面那个错误提示信息标签em
  71.             label.text(" ")                //清空错误提示消息
  72.                 .addClass("success");    //加上自定义的success类
  73.         }
  74.  
  75.       });
  76.  
  77.   });
  78.   </script>
  79.  
  80. </head>
  81. <body>
  82.  
  83.  <form class="cmxform" id="commentForm" method="get" action="">
  84.  <fieldset>
  85.    <legend>jQuery表单验证插件----自定义一个验证方法</legend>
  86.    <p>
  87.      <label for="cusername">姓名</label>
  88.      <em>*</em><input id="cusername" name="username" size="25" />
  89.    </p>
  90.    <p>
  91.      <label for="cemail">电子邮件</label>
  92.      <em>*</em><input id="cemail" name="email" size="25"  />
  93.    </p>
  94.    <p>
  95.      <label for="curl">网址</label>
  96.      <em>  </em><input id="curl" name="url" size="25"  value="" />
  97.    </p>
  98.    <p>
  99.      <label for="ccomment">你的评论</label>
  100.      <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
  101.    </p>
  102.    <p>
  103.      <label for="cvalcode">验证码</label>
  104.      <input id="cvalcode" name="valcode" size="25"  value="" />=7+9
  105.    </p>
  106.    <p>
  107.      <input class="submit" type="submit" value="提交"/>
  108.    </p>
  109.  </fieldset>
  110.  </form>
  111. </body>
  112. </html>

七、效果如下：

验证失败效果：

验证成功效果：

jQuery Validate 表单验证插件----自定义一个验证方法的更多相关文章

  1. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  2. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  4. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  5. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  6. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  7. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  8. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  9. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

随机推荐

  1. MVC ，Action方法传数据给视图有几种方式？--PS：tempData和Viewbag，还有ViewData之间的区别

    //---------------------------------控制器向视图传递数据 public ActionResult TransData() { //1.ViewBag ViewBag. ...

  2. 微软modern.IE网站，多版本IE免费测试工具集

    微软今天发布了modern.IE,这是一系列免费的.针对Web 开发者的测试工具和资源集合网站,微软希望以此来帮助开发者更轻松地实现跨 IE 和其他现代浏览器.跨设备的兼容性,其他还有代码检测工具.标 ...

  3. C#获取url中参数键值对的方法

    方法如下: /// <summary> /// 遍历Url中的参数列表 /// </summary> /// <returns>如:(?userName=keley ...

  4. onclick事件与onserverclick事件

    1.这里仅对web控件而言,onclick事件执行的是客户端中的代码, <%@ Page Language="C#" AutoEventWireup="true&q ...

  5. 分享一些WinForm数据库连接界面UI

    1.动软代码生成器源码中. 2.DevExpress控件包中有类似的界面 3.代码生成器:http://www.csharpwin.com/csharpspace/11666r2577.shtml 4 ...

  6. 用Perl编写Apache模块续 - SVNAuth

    目标:以整合各类项目管理系统中的用户体系及权限体系为目标,实现SVN的集成式动态鉴权 支持平台:usvn.禅道等 - 开发中,本文仅对前期的探索工作做点整理 开发环境: Windows.XAMPP 1 ...

  7. Visual Studio中设置默认VC++路径

    菜单"View" -> "Other Windows" -> "Property Manager" 选择对应的配置并修改即可.

  8. JavaMail入门第五篇 解析邮件

    上一篇JavaMail入门第四篇 接收邮件中,控制台打印出的内容,我们无法阅读,其实,让我们自己来解析一封复杂的邮件是很不容易的,邮件里面格式.规范复杂得很.不过,我们所用的浏览器内置了解析各种数据类 ...

  9. 关于我的OI生涯（AFO）｛NOIP2016 后｝

    这篇我就随意写啦~不用统一的“题解”形式.♪(^∀^●)ﾉ 也分好几次慢慢更吧~ 对于NOIP2016的总结,我本想善始善终back回,但是心情不足以支撑我,那就只能有始有终了......下面进入我的 ...

  10. ASP.NET Boilerplate 深入系列之：概述

    因为项目需要,最近个人购买了一直在研究的ABP框架的一个Regular Licience,马上要用到一个实际的项目中,为了能够准确把握该框架涉及到设计思想.使用模式.内在实现细节.准备在接下来的一个月 ...