一、下载依赖包

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

二、引入依赖包

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

 <script src="lib/jquery.validate.js" type="text/javascript"></script>

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

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;

}

四、自定义一个验证方法

 //自定义一个验证方法

    $.validator.addMethod(

    "formula", //验证方法名称

    function(value, element, param) {//验证规则

        return value == eval(param);

    },

    '请正确输入数学公式计算后的结果'//验证提示信息

    );

五、调用样式显示。

 errorElement: "em",                //用来创建错误提示信息标签

        success: function(label) {            //验证成功后的执行的回调函数

            //label指向上面那个错误提示信息标签em

            label.text(" ")                //清空错误提示消息

                .addClass("success");    //加上自定义的success类

        }

六、详细代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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(){

    //自定义一个验证方法

    $.validator.addMethod(

    "formula", //验证方法名称

    function(value, element, param) {//验证规则

        return value == eval(param);

    },

    '请正确输入数学公式计算后的结果'//验证提示信息

    );

    $("#commentForm").validate({

        rules: {

            username: {

                required: true,

                minlength: 2

            },

            email: {

                required: true,

                email: true

            },

            url:"url",

            comment: "required",

            valcode: {

                formula: "7+9"

            }

        },

        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"></textarea>

   </p>

   <p>

     <label for="cvalcode">验证码</label>

     <input id="cvalcode" name="valcode" size="25"  value="" />=7+9

   </p>

   <p>

     <input class="submit" type="submit" value="提交"/>

   </p>

 </fieldset>

 </form>

</body>

</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. [JS] JavaScript框架(2) D3

    D3(Data-Driven Documents)是一个用于网页作图.生成互动图形的JavaScript函数库. 官网:http://d3js.org/ 下载: cdn:<script src= ...

  2. 【EF 译文系列】韧性连接、重试（EF 版本至少为 6）

    原文链接:Connection Resiliency / Retry Logic (EF6 onwards) 一个应用程序的数据库连接,是非常容易受其它因素影响的,比如后端的异常或者不稳定的网络连接等 ...

  3. 【Android】将Xamarin For VS升级为4.1.0.530版

    分类:C#.Android.VS2015(自带Update2).Win10 创建日期:2016-06-10 2016-08-03说明:该版本已过时,新版本详见本博客置顶的更新. 一.Xamarin f ...

  4. ASP.NET MVC进阶二

    一.数据验证 数据验证的步骤 在模型类中添加与验证相关的特性标记 在客户端导入与验证相关的js文件和css文件 使用与验证相关的Html辅助方法 在服务器端判断是否通过服务器端验证 常用的验证标记 R ...

  5. 常用 Git 命令清单（摘录）

    来源:阮一峰的网络日志 网址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 我每天使用 Git ,但是很多命令记不住. 一般来 ...

  6. python 任意新闻正文提取

    在github上搜到一个正文提取程序,测试了一下基本可以对现在大多数大型新闻网站进行提取 后续我会分析一下这个程序的源码 使用非常简单 如下 # -*- coding: utf-8 -*- impor ...

  7. Verilog学习笔记简单功能实现（一）...............D触发器

    module D_flop(data,clk,clr,q,qb); input data,clk,clr; output q,qb; wire a,b,c,d,e,f,ndata,nclk; nand ...

  8. Android 手机卫士18--流量统计

    //获取手机下载流量 //获取流量(R 手机(2G,3G,4G)下载流量) long mobileRxBytes = TrafficStats.getMobileRxBytes(); //获取手机的总 ...

  9. linux下log4j乱码解决

    使用log4j的时候,在WIN系统的时候正常显示中文,但是发布到linux系统的时候中文就显示成乱码了 由于log4j配置文件中没有设置编码格式(encoding),所以log4j就使用系统默认编码. ...

  10. 【GOF23设计模式】原型模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_原型模式.prototype.浅复制.深复制.Cloneable接口  浅复制 package com.test.prot ...