`
sunarrow
  • 浏览: 18028 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个JavaScript 验证API与表单自动验证组件

阅读更多

这个验证API提供了许多不错的验证函数,能满足常规开发的大部需求。
并且提供了诸如身份证,手机号码,邮政编码,严格的日期验证(闰年判断)...等等。

而表单自动验证组件。则利用HTML控件的自定义属性来定义输入限制。使用方式很简单:
比如有一个输入控件<input type="text" name="age">,比如需要限制为 12岁到70岁之间,只需如这样写<input type="text" name="age" limit="type:int;between:12-70">,即可。
那么,调用验证方法可以这样写:<input type="text" name="age" limit="type:int;between:12-70" onblur="validElement(this).">
如果这个控件属于某一个表单,则可以调用checkForm(form,isCheckAll)来完成验证。

可以在此下载这个组件:
http://code.google.com/p/cwin/downloads/list

以下是这个验证组件的API文档。
功能1.表单字段验证
      方法签名:validElement(element).
      功能:如果验证失败,返回false。显示在页面或跳出错误信息。
      参数说明:element:HTML元素,在页面上调用此方法时请使用 'this'调用。
                limit:验证条件串:如:'type:float;required:true;decLen:2'
                      limit的属性可以有: type,required,len,between,decLen,
                                         equals,general
                      属性说明:
type:string,int,digit,float,email,ip,url,date,datetime,time
                             tel,fax,mobileCn,idCard,signName,name,postcodeCn
                             default: string.
                        required:可选值有true和false.default:false.
                        len:字符串长度,值为 "6-20",表示长度在6和20之间。也可
                             以为"-20",表示不超过20。
between:数值有效,在两个值之间。可为 "10-100",表示大
                                小在10与00之间,也可为"-100",表示小于100。
                        decLen:浮点型精度长度.若不符合精度将会自动纠正.
                        equals:是否要求与其它元素相等。用于密码确认等场合.
                        general:是否是一般字符。不包括特殊字符.Default:true.
                msgArea:显示错误信息的SPAN或DIV的ID。如果传入为空,则会查找
                        global_error_msg_area 的SPAN或DIV,如果也为空,则会
                        alert 这些错误信息。
                msg:错误信息,如果这个参数为"",则会打出默认的错误信息.
功能2.表单自动验证:
      方法签名:checkForm(form,isCheckAll)
      isCheckAll:是否检查所有的元素:如为False,验证会在第一个错误出现时退出,否则,会验证所有的元素
      功能:验证表单中所有需要验证的字段.失败返回false.显示或跳出错误信息.
      使用条件:需要验证的元素需要定义至少 limit 属性,程序会自动搜索这个表单中所有需要验证的元素。
提示:如果您需要把错误信息显示在某一个单独的地方,可以定义一个ID为 global_error_msg_area 的DIV或是SPAN
    表单的验证将默认限制特殊字符,可以加入 general:false 来取消限制
----------------------------------------------------------------------------
----------------------------------------------------------------------------
  Subject:       JavaScript validation API
验证API
验证函数列表:

judgeDigit(arguments...) :判断是否数字
三种调用方式:
1.一个参数,简单判断是否为数字,但长度不超过10位
2.三个参数,第二个参数为 '>'(大于) 或 '<'(小于),第3个参数为要比较的数字
3.三个参数,第二个参数与第三个参数均为整数,判断传入的第一个参数值是否在他们中间.(含边界)

judgeFloat(arguments...):浮点数
如果是一个参数,那么判断是否为浮点数
如果有两个参数,那么将第二个参数作为精度限定参数
如果有三个参数,那么第二个参数为最小值,第三个参数是将作为数值上限

isDigit(str):是否数字

isSignName(arguments...)
两种调用方式:
一个参数:(默认为2--32位),判断标识符或是登录名
判断标识符或是登录名,以字母开头,可带数字、"_"、"." 的字串
三个参数:
限定最小长度(第二个参数)与最大长度(第三个参数)

isRealName(str) :判断是否是真实姓名
isTel(str) :电话号码:除数字外,可含有"-".校验普通电话,除数字外,可用"-"或空格分开
isMobileCN(s) :中国大陆地区手机号码,以13或15开头,使用时请根据变化修改,
isPostalCodeCN(s):中国地区邮编
isEmail(s) :E-mail
isURL(s) :URL
isIP(s):IP-32
isHtmlTag(s):HTML Tag
isIDNumber15(s):身份证号15位
isIDNumber18(s):身份证号18位
isChineseString(s):中文字符
isDoubleByteString(s):双字节
hasHESpace(s):是否包含首尾空格,如果包含,返回TRUE
isQQ(s):QQ
isFloat(s):是否是浮点数
isLeapYear(y):是否闰年
isDateYMD(s):日期:yyyy-mm-dd 或 yyyy/mm/dd,支持1600年以后(包含闰年验证)
isDateDMY(s):日期:dd-mm-yyyy 或 dd/mm/yyyy,支持1600年以后(包含闰年验证)
isDateMDY(s):日期:mm/dd/yyyy 或 mm-dd-yyyy,支持1600年以后(包含闰年验证)
isDateTimeYMD(s):日期:yyyy/mm/dd hh:mm:ss 或 yyyy-mm-dd hh:mm:ss,支持1600年以后(包含闰年验证)

containsSpecialChar()
是否包含非特殊字符(正常字符包括字母数字,下划线,和点号,空格,@#$% 和双字节)若包含,返回true

以下方法遵守这样的调用法则:
1.一个参数,不限制长度
2.三个参数,第二个参数表示允许的最小长度,第三个参数表示允许的最大长度

isDigitString():数字
isLetter():字母
isUpperLetter():大写字母
isLowerLetter():小写字母
isLetterNumString():字母与数字
isLNUString() :数字,字母,下划线字符串

兼容性:在IE6.0与Firefox2.0下测试通过。

 

分享到:
评论
1 楼 yyb_0211 2008-10-14  
谢谢,又长见识了!

相关推荐

    根据配置动态生成有验证的表单

    async-validator是一个轻量级的JavaScript验证库,专门用于异步验证。它提供了一种声明式的方式来定义验证规则,支持同步和异步验证,并能与各种框架或库(如React、Vue等)无缝集成。在iview中,async-validator被...

    Web客户端统一验证JavaScript函数库组件概述Web客户端统一验证JavaScript函数库组件概述Web客户端统一验证JavaScript函数库组件概述Web客户端统一验证JavaScript函数库组件概述

    Web客户端统一验证JavaScript函数库组件是前端开发中一个至关重要的工具,它主要用于在用户提交数据前进行实时的数据验证,确保输入的信息符合预期的格式和规则,从而提高用户体验并减轻服务器端的压力。JavaScript...

    jquery表单验证组件

    **jQuery表单验证组件**是基于JavaScript库jQuery的一款强大且易于使用的工具,它极大地简化了网页表单的数据验证过程。这个组件旨在提供一种灵活、高效的方式,确保用户在提交表单时输入的数据符合预设的规则,从而...

    轻量、无依赖的 JavaScript 验证组件

    本文将深入探讨一个轻量、无依赖的JavaScript验证组件,它能帮助开发者轻松实现表单验证,提高用户体验。 这个名为"validator.js"的组件专注于提供简洁、高效的验证功能,无需额外引入其他库或框架。这意味着开发者...

    基于layui自定义表单组件

    6. **表单验证**:layui提供了表单验证功能,可以方便地对用户输入进行校验,保证数据的正确性。 7. **自定义组件**:layui允许开发者根据需求自定义组件,扩展其功能,例如创建复杂表单控件或交互效果。 8. **...

    vue表单验证插件

    Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、数据双向绑定以及简易API而著称。在实际项目中,特别是在涉及到用户输入时,表单验证是必不可少的一部分。Vue.js 提供了一些基本的验证功能,但为了实现更...

    Javascript自动填表单

    表单验证也是JavaScript自动填表单的一个重要方面。在用户填写表单过程中,JavaScript可以实时检查输入是否符合要求,如长度限制、格式验证(如邮箱、电话号码等)和复杂性验证(如密码强度)。这可以提供即时反馈,...

    bootstrap表单验证

    Bootstrap,一个流行的前端开发框架,提供了美观的UI组件和强大的交互功能,其中包括表单验证功能。这个压缩包文件"jqcool.net-bootstrapvalidator"可能包含了一套基于Bootstrap的表单验证插件或者示例代码,帮助...

    微信小程序的表单验证

    `WxValidate.js`是一个专门为微信小程序设计的表单验证库,它提供了丰富的验证规则和简便的API,可以帮助开发者快速实现表单验证功能。主要特性包括: - **规则丰富**:内置多种常见验证规则,如非空、长度、邮箱、...

    v8n终极JavaScript验证库拥有超级简单的fluentAPI可定制可重复使用

    V8n是一个强大的JavaScript验证库,专为开发者提供简洁易用的fluent API,以便进行高效且可定制化的数据验证。这个库的核心理念是让验证过程变得简单、灵活且易于维护,适合各种项目需求,尤其是涉及到表单验证的...

    一个完整的WEB表单验证程序

    总结起来,一个完整的WEB表单验证程序是Web开发中的重要组件,它利用JavaScript实现客户端验证,提高用户体验,并可能配合后端验证确保数据安全。通过合理的设计和组织,这样的程序可以帮助开发者更高效地完成工作,...

    leovuevalidator一个基于vue2异步的表单验证组件

    `leovuevalidator` 是一个专为Vue2框架设计的异步表单验证组件,它旨在简化在Vue2应用中进行复杂且高效的数据验证的过程。在Web开发中,尤其是在用户交互丰富的应用场景,如注册、登录或购物车等,表单验证是不可或...

    表单自动生成器.zip

    Vue.js是一个非常流行的前端JavaScript框架,它的轻量级和灵活性使其成为构建自定义表单的理想选择。本篇文章将深入探讨如何利用Vue.js实现自定义表单生成,以及相关的核心知识点。 首先,我们要理解Vue.js的基本...

    微信小程序表单验证.rar

    在微信小程序开发中,表单验证是一个至关重要的环节,它确保了用户输入的数据符合预期,提高了用户体验,并且有助于保持后台数据的准确性。由于微信小程序的原生表单组件并未内置完整的验证功能,开发者通常需要借助...

    使用FormValidation进行表单验证

    `FormValidation`是一个强大的JavaScript库,它结合了`jQuery`和`Bootstrap`框架,使得表单验证变得更加简单易用。本文将详细介绍如何使用`FormValidation`进行表单验证,并探讨与`jQuery`和`Bootstrap`的集成。 ...

    基于Vue表单通用验证插件

    Vue.js 是一个流行的轻量级前端JavaScript框架,用于构建用户界面。在开发Web应用程序时,表单验证是不可或缺的一部分,确保用户输入的数据符合预设的规则。基于Vue的表单通用验证插件是为了简化这一过程而设计的。...

    通用的JS表单验证

    在IT行业中,JavaScript是一种广泛使用的客户端脚本语言,特别是在网页交互和表单验证方面。"通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则,从而提高数据质量...

    表单验证框架

    本篇文章将探讨一种名为"表单验证框架"的技术,这种框架通常用于自动化和简化客户端及服务器端的表单验证过程。 在传统的Web开发中,表单验证往往需要开发者手动编写JavaScript代码来处理前端验证,同时还需要在...

    EasyValidator 基于JQuery的表单验证组件演示.zip

    《基于JQuery的EasyValidator表单验证组件深度解析与应用》 在Web开发中,表单验证是必不可少的一环,它能确保用户输入的数据符合预设的规则,从而提高用户体验和数据准确性。EasyValidator是一款基于jQuery的轻量...

    ExtJS+Servlet表单验证和注册

    **ExtJS简介** ExtJS是一款基于...总结来说,这个小例子展示了如何结合ExtJS的前端交互能力和Servlet的后端服务处理能力,构建一个完整的用户注册流程,包括前端的美观界面、表单验证以及后端的数据处理和存储。

Global site tag (gtag.js) - Google Analytics