`

客戶端驗證--jquery

阅读更多

最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。
它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习

官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml

开发使用起来非常简单明了,
我的代码:

$(document).ready(function(){ 

/* 设置默认属性 */ 
$.validator.setDefaults({ 
  submitHandler: function(form) { form.submit(); } 
}); 
// 中文字两个字节 
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 
  var length = value.length; 
  for(var i = 0; i < value.length; i++){ 
   if(value.charCodeAt(i) > 127){ 
    length++; 
   } 
  } 
  return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 

/* 追加自定义验证方法 */ 
// 身份证号码验证 
jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
  return this.optional(element) || isIdCardNo(value); 
}, "请正确输入您的身份证号码"); 

// 字符验证 
jQuery.validator.addMethod("userName", function(value, element) { 
  return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); 
}, "用户名只能包括中文字、英文字母、数字和下划线"); 

// 手机号码验证 
jQuery.validator.addMethod("isMobile", function(value, element) { 
  var length = value.length; 
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value)); 
}, "请正确填写您的手机号码"); 

// 电话号码验证 
jQuery.validator.addMethod("isPhone", function(value, element) { 
  var tel = /^(\d{3,4}-?)?\d{7,9}$/g; 
  return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的电话号码"); 

// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
  var tel = /^[0-9]{6}$/; 
  return this.optional(element) || (tel.test(value)); 
}, "请正确填写您的邮政编码"); 
$(regFrom).validate({ 
/* 设置验证规则 */ 
  rules: { 
   userName: { 
    required: true, 
    userName: true, 
    byteRangeLength: [3,15] 
   }, 
   password: { 
    required: true, 
    minLength: 5 
   }, 
   repassword: { 
    required: true, 
    minLength: 5, 
    equalTo: "#password" 
   }, 
   question: { 
    required: true 
   }, 
   answer: { 
    required: true 
   }, 
   realName: { 
    required: true 
   }, 
   cardNumber: { 
    isIdCardNo: true 
   }, 
   mobilePhone: { 
    isMobile: true 
   }, 
   phone: { 
    isPhone: true 
   }, 
   email: { 
    required: true, 
    email: true 
   }, 
   zipCode: { 
    isZipCode:true 
   } 
  }, 
/* 设置错误信息 */ 
  messages: { 
   userName: { 
    required: "请填写用户名", 
    byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" 
   }, 
   password: { 
    required: "请填写密码", 
    minlength: jQuery.format("输入{0}.") 
   }, 
   repassword: { 
    required: "请填写确认密码", 
    equalTo: "两次密码输入不相同" 
   }, 
   question: { 
    required: "请填写您的密码提示问题" 
   }, 
   answer: { 
    required: "请填写您的密码提示答案" 
   }, 
   realName: { 
    required: "请填写您的真实姓名" 
   }, 
   email: { 
    required: "请输入一个Email地址", 
    email: "请输入一个有效的Email地址" 
   } 
  }, 
/* 错误信息的显示位置 */ 
  errorPlacement: function(error, element) { 
   error.appendTo( element.parent() ); 
  }, 
/* 验证通过时的处理 */ 
  success: function(label) { 
   // set   as text for IE 
   label.html(" ").addClass("checked"); 
  }, 
/* 获得焦点时不验证 */ 
  focusInvalid: false, 
  onkeyup: false 
}); 

// 输入框获得焦点时,样式设置 
$('input').focus(function(){ 
  if($(this).is(":text") || $(this).is(":password")) 
   $(this).addClass('focus'); 
  if ($(this).hasClass('have_tooltip')) { 
   $(this).parent().parent().removeClass('field_normal').addClass('field_focus'); 
  } 
}); 

// 输入框失去焦点时,样式设置 
$('input').blur(function() { 
  $(this).removeClass('focus'); 
  if ($(this).hasClass('have_tooltip')) { 
   $(this).parent().parent().removeClass('field_focus').addClass('field_normal'); 
  } 
}); 
}); 

 网上的资料有人说,它跟prototype包会有冲突,我还没有同时使用过,这点不是很清楚,但我是发现一个问题:
对于最小/大长度的验证方法,作者可能考虑到大家的命名习惯不同,同时做了minLength和minlength(maxLength和 maxlength)方法,应该哪一个都是可以的,但对于用户Message来说,只能够定义针对minlength(maxlength),才能调用用 户自定义的Message,
否则只是调用包的默认Message,但具体原因还没有查清楚。同时,这个插件提供了本地化的消息,但对于我这里初学者来说,怎么使用它还有待摸索!

分享到:
评论

相关推荐

    jquery和纯javaScript实现的客户端验证

    本主题将探讨如何使用jQuery和纯JavaScript实现客户端验证,包括图片轮换、Tab切换、图片上下滚动以及表单验证。 首先,jQuery是一个轻量级的JavaScript库,它使得JavaScript的使用更加简洁和高效。在图片轮换功能...

    客户端验证Jquery插件

    在这里,我们将深入探讨如何使用JQuery插件进行客户端验证,以及与JSON和JavaScript的关系。 首先,让我们了解JQuery Validate插件。JQuery Validate是JQuery的一个扩展,专门用于表单验证。它提供了丰富的内置验证...

    jquery-validation-1.19.1.zip

    其内部结构清晰,源码易于阅读,是学习和实践客户端验证的优秀资源。通过深入研究这个压缩包的内容,开发者不仅可以提升使用jQuery-validation的技能,还能了解项目管理和自动化构建的相关知识。

    Angle-3.4-jquery

    这个框架结合了backend-jquery和backend-jquery-seed两个组件,为开发者构建Web应用程序提供了强大的支持。 首先,我们要理解jQuery。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作...

    web开发中的用户验证-JQuery-Ajax

    ### Web开发中的用户验证——JQuery与Ajax技术详解 #### 一、引言 随着互联网技术的飞速发展,Web应用程序越来越复杂,用户体验也日益受到重视。为了提高用户体验并确保数据的安全性,开发者们需要对用户输入进行...

    jquery-validation.zip

    jQuery验证插件,以"jquery-validation"为名,是Web开发中广泛使用的客户端表单验证库。它极大地简化了网页表单数据验证的过程,提高了用户体验,使得开发者无需编写复杂的JavaScript代码即可实现对用户输入的有效性...

    jquery-validation-unobtrusive-master

    6. **无侵入式(Unobtrusive)**:提及的"jquery-validation-unobtrusive-master"可能指的是jQuery Validation的无侵入式版本,它与ASP.NET MVC框架结合使用,通过数据注解实现服务器端和客户端验证的一致性。...

    jquery-validate-1.4.0

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    自定义基于jQuery的客户端表单验证工具

    表单数据验证一般分为客户端验证和服务器端验证。客户端验证是利用Javascript/DOM技术,对表单域输入的数据的有效格式做检查,然后动态给出相关的结果。这种验证方式非常灵活,表单数据无需提交到服务器即可完成验证...

    前端项目-jquery-ajaxchimp.zip

    【前端项目-jquery-ajaxchimp.zip】是一个前端开发的资源包,主要目的是利用jQuery库和Ajax技术来增强Mailchimp订阅表单的功能。Mailchimp是一款流行的电子邮件营销服务,它允许用户创建和管理邮件订阅列表,发送...

    jQuery Validation Plugin1.19.5(jQuery验证插件最新)

    jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...

    JQuery_客户端文本验证

    **jQuery 客户端文本验证** 在Web开发中,数据验证是必不可少的步骤,它可以确保用户输入的数据符合预期,防止无效或错误的信息进入系统。jQuery,一个轻量级的JavaScript库,提供了丰富的API来简化这一过程。本篇...

    JS 客户端验证JS 客户端验证JS 客户端验证JS 客户端验证JS 客户端验证

    - 提供的文件`jquery-validation-1.8.0`是jQuery的一个验证插件,它简化了客户端验证的过程。 - **安装**:引入jQuery库和验证插件文件,通过`$("#formId").validate()`初始化验证。 - **规则设置**:使用`.rules...

    使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由

    在本文中,我们将探讨如何使用jQuery Validate库进行客户端验证,并解释为什么在某些情况下不使用微软的验证控件。jQuery Validate是一个强大的JavaScript库,专门用于处理HTML表单验证,它为开发者提供了灵活且易于...

    jquery-validation-1.8.1里面有很多例子

    《jQuery Validation插件详解——基于jquery-validation-1.8.1实例分析》 在Web开发领域,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端处理的压力。jQuery ...

    一个基于事件的jQuery插件用于HTML表单的客户端验证

    在provejs-jquery-master压缩包中,可能包含了以下内容: - `provejs-jquery.js`:插件的主要代码文件,包含验证逻辑和事件处理。 - 示例或测试文件:可能包含HTML和JavaScript示例,展示如何在实际项目中使用插件...

    前端项目-jquery-xmlrpc.zip

    **前端项目-jquery-xmlrpc.zip** 这个前端项目的核心是利用jQuery库来实现与远程XML-RPC(Remote Procedure Call)服务的交互。XML-RPC是一种轻量级的远程调用协议,它允许客户端通过HTTP发送结构化的XML数据到...

    jquery-cookie-master.jar

    在Java环境中,由于"jquery-cookie-master.jar"的存在,开发者可以方便地在服务器端处理与Cookie相关的逻辑,例如验证Cookie的有效性,或者在服务器端根据Cookie信息来个性化用户的服务。 需要注意的是,虽然Cookie...

    前端项目-jquery-validate.zip

    `jquery-validate` 是一个非常流行的 jQuery 插件,用于实现高效、灵活的客户端表单验证。这个压缩包"前端项目-jquery-validate.zip"包含了一个基于 `jquery-validation` 的前端项目,它简化了在网页中实施验证的...

    前端项目-jquery-validation-unobtrusive.zip

    "前端项目-jquery-validation-unobtrusive"是一个基于jQuery的验证插件,它的主要功能是在data-*属性中启用不显眼的验证选项,使得验证过程更为简洁、高效且对用户友好。本文将深入探讨这一技术的原理、使用方法以及...

Global site tag (gtag.js) - Google Analytics