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

一个检验form数据合法性的js类

阅读更多

本文原创作品,如需转载请注明来源,作者:姜涛, towerjt@gmail.com

 

参考了一些其他人的代码,自己写了一个检验form数据合法性的js类

 

function ValidForm(formObj){
	
	function validateOnChange(){  
        var textfield = this;  
        var pattern = textfield.getAttribute("pattern").toString(); 
        var plen = pattern.length;
//        alert(plen);
        pattern = pattern.replace(/\//g,'');
//        alert(pattern);
        var value = this.value;  
          
//        alert(pattern+'  '+value+'  '+ value.search(pattern));  
        var required = textfield.getAttribute("required") != null;  
        
        if (!required && value.length==0){
        	textfield.className = "valid";
        	return;
        }
        
        if(value.search(pattern) == -1)
        	textfield.className = "invalid";  
        else 
        	textfield.className = "valid";   
    }; 
          
    this.form = formObj;
    
	this.defaultRegExp	= {
    	email : /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
    	cnPhone : /^(\d{3,4}-)\d{7,8}(-\d{1,6})?$/,
    	cnMobile : /^1[3,5]\d{9}$/,
    	yid : /^[a-z][a-z_0-9]{3,}(@yahoo\.cn)?$/,
    	date : /^\d{4}\-[01]?\d\-[0-3]?\d$|^[01]\d\/[0-3]\d\/\d{4}$|^\d{4}年[01]?\d月[0-3]?\d[日号]$/,
    	integer : /^[1-9][0-9]*$/,
    	number : /^[+-]?[1-9][0-9]*(\.[0-9]+)?([eE][+-][1-9][0-9]*)?$|^[+-]?0?\.[0-9]+([eE][+-][1-9][0-9]*)?$|^0$/,
    	currency : /^\d*(.\d{1,2})?$|^0$/,
    	alpha : /^[a-zA-Z]+$/,
    	alphaNum : /^[a-zA-Z0-9_]+$/,
    	urls : /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
    	chinese : /^[\u2E80-\uFE4F]+$/,
    	postal : /^[0-9]{6}$/
    };	
    
    this.bind = function(){
    	var needsValidation = false;  
        for(var j = 0;j < formObj.elements.length; j++){  
        	var e = formObj.elements[j];  
        	if(e.type != "text") continue;        	
        	var pattern = this.defaultRegExp[e.getAttribute("pattern")]; 
        	if (!pattern) pattern = e.getAttribute("pattern");
        	e.setAttribute("pattern", pattern);
        	var required = e.getAttribute("required") != null;  
                  
            if(required && !pattern){  
            	pattern = "\\S";  
            	e.setAttribute("pattern", pattern);   
            }                       
            if(pattern){  
                e.onchange = validateOnChange;  
                needsValidation = true;  
            }  
        }  
        //if(needsValidation) formObj.onsubmit = validateOnSubmit;    	
    };
    
    this.doValid = function(){
    	var invalid = false;  
        for(var i = 0; i < formObj.elements.length;i++){  
            var e = formObj.elements[i];  
            if(e.type == "text" && e.onchange == validateOnChange){  
                e.onchange();     
                if(e.className == "invalid") 
                {
                	invalid = true;
                	var tips = e.getAttribute("tips");
                	if (!tips) tips = "输入数据非法";
                	alert('提示 :' + tips);  
            		return false;  
                }
            }  
        }
        return true;
    };
}

 

 

使用方法

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head>
<body>
<script src="validate_obj.js" ></script>                                            
<style>                                                                         
    input.invalid{background: #faa;}                                            
    input.valid{background: #afa;}                                              
</style>                                                                        
                                                                                
<form id="form1" name="form1">                                                                          
    name : <input type="text" name="name" required tips="名字非空"><br>                         
    email: <input type="text" name="email" pattern="email" tips="邮件地址:towerjt@gmail.com"><br>  
    zipcode : <input type="text" name="zipcode" pattern="^\s*\d{5}\s*$"><br>    
    unvalidate : <input type="text"><br>                                        
                                                                                
    <input type="submit" value="submit query">                                  
</form>

<script language="javascript">
	var vf = new ValidForm(document.getElementById('form1'));	
	vf.bind();	
</script>

<input type="button" value="增加" onClick="alert(vf.doValid());"/>
</body>
</html>
分享到:
评论

相关推荐

    数据库基础测验20241113.doc

    数据库基础测验20241113.doc

    微信小程序下拉选择组件

    微信小程序下拉选择组件

    DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

    DICOM文件+DX放射平片—数字X射线图像DICOM测试文件,文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用,请勿用于非法用途。

    Jupyter Notebook《基于双流 Faster R-CNN 网络的 图像篡改检测》+项目源码+文档说明+代码注释

    <项目介绍> - 基于双流 Faster R-CNN 网络的 图像篡改检测 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    使用epf捕获没有CA证书的SSLTLS明文(LinuxAndroid内核支持amd64arm64).zip

    c语言

    (源码)基于Arduino的天文数据库管理系统.zip

    # 基于Arduino的天文数据库管理系统 ## 项目简介 本项目是一个基于Arduino的天文数据库管理系统,旨在为Arduino设备提供一个完整的天文数据库,包括星星、星系、星团等天体数据。项目支持多种语言的星座名称,并提供了详细的天体信息,如赤道坐标、视星等。 ## 项目的主要特性和功能 星座目录包含88个星座,提供拉丁语、英语和法语的缩写和全名。 恒星目录包含494颗亮度达到4等的恒星。 梅西耶目录包含110个梅西耶天体。 NGC目录包含3993个NGC天体,亮度达到14等。 IC目录包含401个IC天体,亮度达到14等。 天体信息每个天体(不包括星座)提供名称、命名、相关星座、赤道坐标(J2000)和视星等信息。 恒星额外信息对于恒星,还提供每年在赤经和赤纬上的漂移以及视差。 ## 安装使用步骤 1. 安装库使用Arduino IDE的库管理器安装本项目的库。 2. 解压数据库将db.zip解压到SD卡中。

    (源码)基于JSP和SQL Server的维修管理系统.zip

    # 基于JSP和SQL Server的维修管理系统 ## 项目简介 本项目是一个基于JSP和SQL Server的维修管理系统,旨在提供一个高效、便捷的维修管理解决方案。系统涵盖了从维修订单的创建、管理到配件的录入、更新等多个功能模块,适用于各类维修服务行业。 ## 项目的主要特性和功能 1. 用户管理 管理员和客户的注册与登录。 管理员信息的管理与更新。 客户信息的创建、查询与更新。 2. 维修订单管理 维修订单的创建、查询与更新。 维修回执单的创建与管理。 3. 配件管理 配件信息的录入与更新。 配件库存的管理与查询。 4. 评价与反馈 客户对维修服务的评价记录。 系统反馈信息的收集与管理。 5. 数据加密与安全 使用MD5加密算法对用户密码进行加密存储。 通过过滤器实现登录验证,确保系统安全。 ## 安装使用步骤

    devecostudio-windows-3.1.0.501.zip

    HUAWEI DevEco Studio,以下简称DevEco Studio)是基于IntelliJ IDEA Community开源版本打造,为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。 作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点: - 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考[编辑器使用技巧] - 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    《计算机视觉技术》实验报告-8.1提取车辆轮廓

    springboot小徐影城管理系统(代码+数据库+LW)

    随着现在网络的快速发展,网上管理系统也逐渐快速发展起来,网上管理模式很快融入到了许多生活之中,随之就产生了“小徐影城管理系统”,这样就让小徐影城管理系统更加方便简单。 对于本小徐影城管理系统的设计来说,系统开发主要是采用java语言技术,在整个系统的设计中应用MySQL数据库来完成数据存储,具体根据小徐影城管理系统的现状来进行开发的,具体根据现实的需求来实现小徐影城管理系统网络化的管理,各类信息有序地进行存储,进入小徐影城管理系统页面之后,方可开始操作主控界面,主要功能包括管理员:首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订单管理,用户前台;首页、电影信息、电影资讯、个人中心、后台管理、在线客服等功能。 本论文主要讲述了小徐影城管理系统开发背景,该系统它主要是对需求分析和功能需求做了介绍,并且对系统做了详细的测试和总结。具体从业务流程、数据库设计和系统结构等多方面的问题。望能利用先进的计算机技术和网络技术来改变目前的小徐影城管理系统状况,提高管理效率。

    C++与Matlab实现SIFT特征提取算法+项目源码+文档说明+代码注释

    <项目介绍> - SIFT特征提取算法C++与Matlab实现 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    (1991-2024年)国家自然、社科基金部分名单(含部分标书)(最新!!!)

    数据介绍 数据名称:国家自然、社科基金部分名单 数据年份:1991-2024年 样本数量:10万+ 数据格式:PDF、excel

    卓晴-信号与系统课件.pdf

    卓晴

    as-bundled-clients

    as-bundled-clients

    学习时最后的资料包括面试等信息

    学习时最后的资料包括面试等信息

    (源码)基于Spring Boot和Ant Design的雨选课系统.zip

    # 基于Spring Boot和Ant Design的雨选课系统 ## 项目简介 雨选课系统是一个基于Spring Boot和Ant Design框架构建的前后端分离的选课系统。该系统实现了学生选课、成绩查询、教师成绩修改、课程编辑、课程新增等功能。登录信息使用Redis存储,并支持课程图片的上传功能。 ## 项目的主要特性和功能 1. 用户登录与权限管理 学生、教师和管理员分别有不同的登录权限。 登录信息使用Redis进行存储。 2. 课程管理 学生可以查看可选课程列表,并进行选课和退选操作。 教师可以查看自己教授的课程,并修改学生成绩。 管理员可以编辑和新增课程。 3. 成绩管理 学生可以查询自己的成绩。 教师可以修改学生的成绩。 4. 图片上传 支持课程图片的上传和展示。 5. 日志记录 系统记录请求和响应的日志信息,便于问题追踪和性能分析。

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)

    数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目),含有代码注释,满分大作业资源,新手也可看懂,期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。该项目可以作为课程设计期末大作业使用,该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)数据库期末作业基于Python+mysql的餐厅

    江苏镇江两座小桥的技术状况评估与维修建议

    内容概要:本文针对镇江市丹徒区辛丰镇的两座小型桥梁(大叶二组滚水坝桥与东联组桥)进行了详细的技术状况评定和现状调查。主要内容包括:桥梁的基本参数描述、桥梁各部分的具体检查结果以及存在的具体病害及其原因分析,同时依据《公路桥梁技术状况评定标准》对每座桥梁分别给出了综合评分和技术状况等级,并提出了具体的维护与修复建议。大叶二组滚水坝桥技术状况良好(2类),但需要解决桥面铺装裂缝和桥墩的混凝土剥落问题;而东联组桥则需重点关注桥面施工不完整及护栏损坏等问题。 适用人群:桥梁管理人员、维护工作人员及城市基础设施规划相关人员。 使用场景及目标:适用于中小跨度桥梁的常规检查与维修决策制定过程中,旨在帮助专业人士快速掌握桥梁的实际状态,确保桥梁安全可靠运行。 其他说明:文中附有多张实拍图片用于直观展示桥梁现状及存在问题。

    基于套接字API开发的高性能高稳定性跨平台MQTT客户端,可以在嵌入式设备FreeRTOS LiteOS RTThre.zip

    c语言

    【Unity 天气系统插件】Enviro 3 - Sky and Weather 高度可定制的云、雾和光照系统

    文件名:Enviro 3 - Sky and Weather v3.1.6b.unitypackage Enviro 3 - Sky and Weather 是一款功能强大的 Unity 插件,专门用于模拟逼真的天空、天气和环境效果。它适用于需要动态天气和日夜循环的游戏或应用,如开放世界 RPG、模拟类游戏等。Enviro 3 提供了大量的设置选项和自定义功能,帮助开发者在 Unity 中创建沉浸式的自然环境效果。 以下是 Enviro 3 - Sky and Weather 的一些关键特点和功能介绍: 1. 动态天气系统 天气变化:支持多种天气效果,如晴天、阴天、雨天、雪天、雾天、暴风雨等,所有天气效果可以动态切换,使游戏环境更加生动。 天气事件:允许开发者设置特定的天气事件,如风暴、雷电等,添加到游戏中的特殊场景或事件。 湿度与温度控制:可以根据天气变化动态控制湿度和温度,影响环境效果和玩家体验。 2. 日夜循环系统 动态时间系统:Enviro 3 支持实时的日夜循环,包括昼夜的过渡,太阳和月亮的运动轨迹。 光照调整:随着时间变化,Enviro 3 会自动调整环境光、

Global site tag (gtag.js) - Google Analytics