`
zy116494718
  • 浏览: 477710 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery validate框架

 
阅读更多
$(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'); 
  } 
}); 
}); 
 
分享到:
评论

相关推荐

    jQuery validate框架的个性化验证

    通过以上介绍,我们可以看出 jQuery Validate 框架的强大之处,它提供了丰富的验证功能,允许开发者根据项目需求进行高度自定义,从而实现个性化的表单验证。在实际开发中,结合 CSS 和 JavaScript,可以打造出美观...

    Jquery validate框架学习

    NULL 博文链接:https://269629151.iteye.com/blog/1699635

    jquery-validate验证框架使用详解及JS文件

    jQuery Validate框架极大地简化了客户端表单验证,它提供了丰富的预设规则和自定义功能,可以灵活地处理各种验证需求。通过学习和实践,开发者可以快速地在项目中应用这个强大的验证工具,提升用户体验,减少无效...

    jquery-validate前台验证框架,带详细使用方法

    通过上述方法,你可以灵活地使用jQuery Validate框架实现丰富的前端验证功能。无论是简单的表单还是复杂的业务场景,都能找到合适的解决方案。在实际开发中,记得根据项目需求合理选择和组合这些特性,以提供最佳的...

    jquery-validate验证框架使用详解

    在jQuery Validate框架中,主要包含以下几个核心知识点: 1. **安装与引入**:首先,你需要在项目中引入jQuery库和jQuery Validate插件的JavaScript文件。通常,这两个文件可以从CDN(内容分发网络)获取,或者下载...

    jquery validate依赖包及其帮助文档.rar

    jQuery Validate是一个强大的JavaScript库,专为jQuery框架设计,用于简化和优化HTML表单的验证过程。本篇文章将深入探讨jQuery Validate的依赖、核心功能、使用方法以及相关文档资源。 首先,jQuery Validate依赖...

    jquery validate 验证自定义样式

    总之,jQuery Validate插件提供了一个强大且灵活的框架,用于创建自定义验证样式。通过理解其内部机制并结合CSS和JavaScript,你可以为你的Web应用构建出符合品牌风格和用户体验的验证功能。在实践中不断探索和优化...

    Struts2+jquery.validate框架实现用户名是否存在

    ### Struts2与jQuery.validate框架简介 #### Struts2框架 Struts2是Apache软件基金会的一个开源项目,它是Struts1的升级版,提供了一个用于构建企业级Java Web应用的强大MVC框架。Struts2的核心组件包括拦截器、...

    jquery[1].validate_框架详解

    本文将深入解析jQuery Validate框架的核心功能和用法。 首先,引入jQuery库和jQuery Validate插件的JavaScript文件是必要的。在示例代码中,我们可以看到`&lt;script&gt;`标签分别引入了`jquery-min.js`和`jquery....

    jquery.validate表单验证框架详解.pdf

    首先,让我们看下如何引入jQuery Validate框架。在HTML文档中,你需要先引入jQuery库,然后引入jQuery Validate的脚本文件。以下是一个基本的设置示例: ```html &lt;script type="text/javascript" src="js/jquery-...

    Jquery validate验证框架案例

    非常好的Jquery validate:每个案例独立,都有注释 讲解了: 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果

    jquery.validate Validation .js验证框架 帮助 手册 文档.doc

    这个文档主要涵盖了一系列关于jQuery Validate框架的使用方法、可选参数、验证器和实用工具。以下是对这些知识点的详细说明: 1. **启用调试模式**: - `debug` 参数是一个布尔值,默认为 `false`。如果设置为 `...

    jQuery validate 自定义样式、规则

    jQuery Validate 默认提供了一套简单的样式,但往往需要与现有的前端框架(如Bootstrap、Foundation等)或自定义CSS样式相融合。以下是一些关键步骤: 1. **覆盖默认样式**:jQuery Validate 使用`error`、`valid`...

    jquery validate的漂亮css样式验证

    `jQuery Validate`是一个非常流行的JavaScript库,用于在前端进行表单验证。这个库极大地简化了对用户输入数据的检查,确保它们符合特定的规则和格式。`jQuery Validate`结合自定义CSS样式,可以让表单验证既实用又...

    jquery validate配合struts2简单整改

    《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...

    jquery validate 使用详解

    jQuery Validate 是一款强大的表单验证插件,基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能,大大提高了用户体验并减少了服务器端的压力。通过简单地配置选项,即可启用各种内置验证规则。...

    jQuery表单验证框架

    下面我们将详细探讨jQuery Validate框架的主要特性和使用方法。 首先,要使用jQuery Validate,你需要引入jQuery库以及jQuery Validate的JavaScript文件。在示例代码中,我们看到以下引入: ```html ...

    jquery校验框架

    总结,jQuery Validate框架提供了一套强大且易用的表单验证解决方案,通过自定义错误提示,我们可以打造出符合项目需求的交互体验。无论是初学者还是经验丰富的开发者,都能从中受益,提升Web应用的质量和用户体验。

Global site tag (gtag.js) - Google Analytics