jQuery验证插件validate使用详解

2024-12-04 21:55:50

一、jQuery.validate简介

　　jQuery.validate.js插件用于对表单输入进行验证，其使用配置非常简单。支持多事件触发，自带多种验证规则，还支持自定义验证规则。

1、配置方法

　　先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。

　　注意Validate的导入要在jQuery库之后。代码如下：

  <script src="jQuery.1.8.3.js" type="text/javascript"></script>
  <script src="jquery.validate.js" type="text/javascript"></script>
  <script src="messages_zh.js" type="text/javascript"></script>

　　然后只要定义验证规则和指定错误提示位置就可以了。

　　在$(document).ready()里加入验证规则与错误提示位置，代码如下：

JS代码：

　　<script type="text/javascript">
    $(function () {
      $("#form1").validate({
        /*自定义验证规则*/
        rules:{
          username:{ required:true,minlength:6 },
          userpass:{ required:true,minlength:10 }
        },
        /*错误提示位置*/
        errorPlacement:function(error,element){
          error.appendTo(element.siblings("span"));
        }
      });
    })
  </script>

HTML代码：

　　<form id="form1" action="#" method="post">
　　　　<p>用户登录</p>
　　　　<p>名称:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<p>密码:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<div>
　　　　　　<input id="btnLogin" type="button" value="登录" class="btn" />  
　　　　　　<input id="btnReset" type="button" value="取消" class="btn" />  
　　　　</div>
　　</form>

　　这样就完成了非常简单的表单验证功能，当表单填写不正确时Validate在<input>的兄弟<span>元素里显示错误提示。

2、name属性

　　说明：jQuery.validate.js插件与<input>的关联使用的是表单的name属性。只有存在name属性的<input>才能验证！

二、自定义错误提示位置

　　当我们想设置错误提示的显示位置怎么设置呢？

　　答案就是在errorPlacement参数里，你可以按照自己的需要自定义书写，用的是jQuery

     /*错误提示位置*/
     errorPlacement:function(error,element){　　//第一个参数是错误的提示文字，第二个参数是当前输入框
        error.appendTo(element.siblings("span"));　　//用的是jQuery，这里设置的是，错误提示文本显示在当前文本框的兄弟span中
     }

三、自定义错误提示信息

　　例如当我们有多个require:true选项，我想根据不同的选项设置不同的提示怎么办呢？

　　答案就是在messages参数里。用层层嵌套的方式设置自己需要的提示信息。如果某个字段没有message信息，这时才调用默认的提示信息。

 messages: {
        UserName: {
          required: "请输入用户名！"　　//注意，同样是必填项，但是优先显示在messages里的提示信息
        },
        Email:{
          required:"请输入邮箱地址!"　　//不会统一输出 必填字段 了哦
        }
      }

实际上，jQuery.Validate默认的错误提示是生成一个class=error的label，所以，如果想设置样式，最简单的方法就是针对这个label设置就OK了，当然默认的label是可以手动更改的。

四、ajax异步验证
　　只需要用到remote即可，注意后台返回的JSON只能够是true或false。

　　以下给出一个综合示例，前台HTML代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>表单验证插件</title>
  <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
  <script src="/Scripts/messages_zh.js" type="text/javascript"></script>
  <script src="/Scripts/validates.js" type="text/javascript"></script>
  <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#form1").validate({
        rules: {
          UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" },
          Email: { required: true,email:true },
          UserPassword: { required: true ,minlength: 6 },
          Mobile: { required: true, number:true },
          IdCard: { required: true,isIdCardNo: true },
          Age: { required: true ,number:true,min:1,max:100 }
        },
        messages:{
          UserName: {
            required: "请输入用户名！",
            minlength: "用户名长度最少需要3位！",
            maxlength: "用户名长度最大不能超过18位！",
            remote: "此用户名已存在！"
           },
          Email: {
            required: "请填写邮箱",
            email: "请输入正确的邮箱格式"
          },
          UserPassword: {
            required: "请填写你的密码!",
            minlength: "密码长度不能小于6位"
          },
          Mobile: {
            required: "请填写你的手机号码",
            number:"手机号码只能为数字"
           },
          IdCard: {
            required: "请输入身份证号码！",
            isIdCardNo:"请输入正确的身份证号码！"
          },
          Age: {
            required: "请输入年龄!",
            number: "请输入数字",
            min: "年龄不能小于1",
            max: "年龄不能大于100"
          }
        },
        /*错误提示位置*/
        errorPlacement: function (error, element) {
          error.appendTo(element.parent());
        }
      })
    })
  </script>
</head>
<body>
  <form id="form1" method="post" action="">
    <div>
    <p> 用户名:<input type="text" value="" name="UserName" /> </p>
    <p> 密码:<input type="password" value="" name="UserPassword" /> </p>
    <p> 邮箱:<input type="text" value="" name="Email" /> </p>
    <p> 手机号码:<input type="text" value="" name="Mobile" /> </p>
    <p> 身份证号码:<input type="text" value="" name="IdCard" /> </p>
    <p> 年龄:<input type="text" value="" name="Age" /> </p>
    <p> <input type="submit" id="btn1" value="提交"></p>
    </div>
  </form>
</body>
</html>

后台控制器代码:

  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    [HttpGet]
    public ActionResult CheckUserName()
    {
      string username = HttpContext.Request.QueryString["username"];
      bool succeed = true;
      if (username == "admin")
      {
        succeed = false;
      }
      return Json(succeed, JsonRequestBehavior.AllowGet);
    }
  }

最终效果如下图所示：

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

jQuery.Validate表单验证插件的使用示例详解

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例示例包含验证错误时,显示红色错误提示自定义验证规则引入中文错误提示重置表单需要执行2句话源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
jQuery Validate插件实现表单验证

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

Validate验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. Description 浏览器支持:IE7+ .Chrome.Firefox.Safari.Mobile Browser jQuery版本:1.7.0+ Usage 载入jQuery.validate <script type="text/javascript" src="jquery
jQuery验证插件validate使用方法详解

1. 写在前面我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页
jQuery validate插件实现ajax验证重复的2种方法

本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
jQuery验证插件validate使用详解

一.jQuery.validate简介 jQuery.validate.js插件用于对表单输入进行验证,其使用配置非常简单.支持多事件触发,自带多种验证规则,还支持自定义验证规则. 1.配置方法先导入jQuery库,然后导入Validate插件,如果是中文提示还需要导入messages_zh.js. 注意Validate的导入要在jQuery库之后.代码如下: <script src="jQuery.1.8.3.js" type="text/javascript&qu
jQuery Migrate 插件用法实例详解

jQuery Migrate是应用迁移辅助插件,是用于高级版本兼容低级版本辅助插件. 例如jQuery版本用的是1.x,计划升级到3.x,就可以在页面删除1.x版本,换成3.x版本,如果有脚本错误,就引入jquery-migrate插件用于兼容低版本,同时也显示低版本方法替换成新版本方法的方案. 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>te
jQuery验证插件 Validate详解

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证
jQuery旋转插件jqueryrotate用法详解

本文实例讲述了jQuery旋转插件jqueryrotate用法.分享给大家供大家参考,具体如下: CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好. 今天介绍一款 jQuery 插件--jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本
jQuery表格插件datatables用法详解

一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的二.如何使用在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我
jQuery日历插件datepicker用法详解

jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入下
jQuery dateRangePicker插件使用方法详解

jQuery dateRangePicker插件使用总结. 版本说明: 当前使用版本:2.1.25 特别说明:版本不同,部分api可能会发生变化,需要引起重点关注效果图关键代码片段 $("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); $("#dateTimeRa
jQuery EasyUI之验证框validatebox实例详解

1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>
jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides

jQuery验证插件validate使用详解

相关推荐

随机推荐