jQuery插件Validate实现自定义表单验证

2024-09-26 20:02:49

本文实例讲解了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 { 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;
}

3、自定义一个验证方法

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

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

 //自定义一个验证方法
 $.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表单验证大全》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家学习表单验证有所帮助。

jquery实现简单的表单验证

jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路. 大概思路: 先为每一个required添加必填的标记,用each()方法来实现. 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面. 这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素. 然后为input元素添加失去焦点事件.然后进行用户名.邮件的验证. 这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证. 在jQ
详解jQuery的表单验证插件--Validation

大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员.该插件
使用 jQuery 实现表单验证功能

5.1.5 表单验证表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁.在表单中,表单验证的作用也是非常重要的,它能使表单更加灵活.美观和丰富. 以一个简单的用户注册为例.首先新建一个表单, HTML 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" c
jQuery Validate让普通按钮触发表单验证的方法

一般的表单校验都是直接注册在页面上的匿名函数,导致只能通过固定的提交方式触发表单校验,如果想自定义一个按钮触发表单校验如何实现呢? 目前写法: $(function(){ $("#form").validate({ rules : { user_name : { required : true }, -- }, messages : { user_name : { required : '用户名必填', }, -- } }); }); 改写方法: //编写表单验证函数validform
jQuery Validate表单验证插件添加class属性形式的校验

本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla
jquery validate表单验证的基本用法入门

一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要
jquery插件bootstrapValidator表单验证详解

Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali
jquery实现表单验证简单实例演示

本文实例讲述了jquery实现表单验证代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var def
实例解析jQuery插件EasyUI最常用的表单验证规则

例如:校验输入框只能录入0-1000之间最多有2位小数的数字表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox" validType="rateCheck[0,1000]" maxlength="6" /> $.extend($.f
实例详解jQuery表单验证插件validate

validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq

jQuery插件Validate实现自定义表单验证

相关推荐

随机推荐