快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。作为一个标准的验证方法库,Validation拥有如下特点:

  • 1.内置验证规则: 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
  • 2.自定义验证规则: 可以很方便地自定义验证规则
  • 3.简单强大的验证信息提示: 默认了验证信息提示,并提供自定义覆盖默认的提示信息的功能
  • 4.实时验证: 可能通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证

使用方法:
1.引入jQuery库和Validation插件

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

2.确定哪个表单需要被验证

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
  $("#commentForm").validate();
});
//]]>
</script> 

3.针对不同的字段,进行验证规则编码,设置字段相应的属性

class="required"  必须填写
class="required email"    必须填写且内容符合Email格式验证
class="url"       符合URL格式验证
minlength="2"   最小长度为2 

可验证的规则有19种:
required:      必选字段 
remote:        "请修正该字段", 
email:         电子邮件验证 
url:           网址验证 
date:          日期验证 
dateISO:       日期 (ISO)验证 
dateDE: 
number:        数字验证 
numberDE: 
digits:       
只能输入整数 
creditcard:    信用卡号验证 
equalTo:       “请再次输入相同的值”验证 
accept:        拥有合法后缀名的字符串验证 
maxlength/minlength:    最大/最小长度验证 
rangelength:     字符串长度范围验证 
range:           数字范围验证 
max/min:         最大值/最小值验证 
另个一种验证方法(将所有的与验证相关的信息写到class属性中方便管理)
1).引入一个新的jQuery插件---jquery.metadata.js(支持固定格式解析的jQuery插件)

代码如下:

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

2).改变调用的验证方法

<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
  //将$("#commentForm").validate(); 改成
  $("#commentForm").validate({meta: "validate"});
});
//]]>
</script> 

3).将验证规则全部编写到class属性中

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}"
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"    

也可以通过name属性来关联字段和验证规则的验证写法(验证行为和HTML结构完全脱钩)

$("#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: '请输入您的评论'
  }
});

国际化
Validation插件的验证信息默认语言是英文,如果要改成中文,只需要引入Validation提供的中文验证信息即可,引入代码如下:

代码如下:

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

自定义验证信息并美化

errorElement: "em",        //可以用其他标签,记住把样式也对应修改
success: function(label) {  //label指向上面那个错误提示信息标签em
   label.text("")            //清空错误提示消息
       .addClass("success");  //加上自定义的success类
   }
在CSS中添加样式与之关联
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);
  },
  '请正确输入数学公式计算后的结果'//验证提示信息
); 

$("#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: '请输入您的评论',
   valcode: '验证码错误'
  }
}); 

以上就是关于表单验证插件jquery.validate.js的详细介绍,希望对大家的学习有所帮助。

(0)

相关推荐

  • jquery.validate.js 多个相同name的处理方式

    1.将引入的插件:jquery.validate.js 第484行的代码注释: // select only the first element for each name, and only those with rules specified //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) { return false; } 2.页面中需要验证的输入框必须加上不同的id. 如:html中

  • jquery表单验证插件(jquery.validate.js)的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • IE8兼容Jquery.validate.js的问题

    只需在jquery.validate.js 文件中 在446行附近找到 return $([]).add(this.currentForm.elements).filter(":input") 更换成 var listeElements = new Array(); for(var k=0;k<this.currentForm.elements.length;k++){ listeElements[k] = this.currentForm.elements[k]; } retu

  • jquery.validate.js插件使用经验记录

    最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [例子如下] 1.前台页面 <form id="form1" method="post"> 用户名:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error&q

  • jQuery.validate.js表单验证插件的使用代码详解

    Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

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

  • jquery validate.js表单验证入门实例(附源码)

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • vue.js表单验证插件(vee-validate)的使用教程详解

    综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立

  • bootstrapValidator.min.js表单验证插件

    本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下 注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可. 测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <

  • 自己编写的支持Ajax验证的JS表单验证插件

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式调用验

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • 手把手教你自己写一个js表单验证框架的方法

    在表单程序中,在页面上需要很多的Js代码来验证表单,每一个field是否必须填写,是否 只能是数字,是否需要ajax到远程验证,blablabla. 如果一个一个单独写势必非常的繁琐,所以我们的第一个目标就是构建一个类似DSL的东西, 用表述的语句而非控制语句来实现验证. 其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交,但是单独验证会因为 这个特征而增加很多额外的控制代码,且经常会验证不全面.所以第二个目标就是能够全面 的整合整个验证的过程. 最后不能是一个无法扩展的一切写死的实现

  • jquery.validate表单验证插件使用方法解析

    为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易.jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1.在控件中使用默认验证规则,例子: 电子邮件(必填) <input id="email" class="required email" value="email@" /> 2.可以在控件中自定义验证规则

随机推荐