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

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

GmailJavaScriptJ#YahooHTML 
阅读更多

本文原创作品，如需转载请注明来源，作者：姜涛， 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>
分享到：
| RHAS linux下如何打开core文件设置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript的form表单验证中的身份证校验.pdf

    4. **校验码**（第18位）：用于检验身份证号码的正确性，该位可能为0~9中的任意一个数字或字母X。 #### 三、正则表达式的构建 为了准确地验证身份证号码，我们需要构建一个正则表达式来匹配这些规则。以下是对每个...

    JS 正则验证表单

    **JS正则验证表单**是前端开发中一个至关重要的环节，主要用于确保用户输入的数据符合预设的格式，从而提高数据质量和应用安全性。在本文中，我们将深入探讨JavaScript中的正则表达式及其在表单验证中的应用。 正则...

    javascript简单判断输入内容是否合法的方法

    本篇文章将通过一个实例来介绍如何使用JavaScript来判断输入的用户名是否只包含数字、字母和下划线，以此来确保输入内容的合法性。 首先，我们需要定义一个合法的字符集，这个例子中，合法的字符包括大小写字母（a-...

    Js检测判断URL网址输入是否正确

    JavaScript中，可以利用正则表达式来检测URL的合法性。正则表达式（Regular Expression）是一种文本模式，包括普通字符（例如，每个字母或数字）和特殊字符（称为“元字符”）。在JavaScript中使用正则表达式通常...

    js验证表单 js验证表单

    2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 1. 检查一段字符串是否全由数字组成 2. 怎么判断是否是字符 3. 怎么判断是否含有汉字 4. 邮箱格式验证 5. 数字格式...

    javascript表单验证使用示例(javascript验证邮箱)

    JavaScript 表单验证是网页开发中一种常见的技术，它允许开发者在用户提交数据到服务器之前对用户输入的数据进行检查，确保其格式正确、合法。这不仅提高了用户体验，减少了无效请求，也减轻了服务器端的处理压力。...

    js+html+css实现简易商城项目

    - **表单验证**：在用户提交表单前，JavaScript可以验证输入数据的合法性，例如邮箱格式、密码强度等，防止无效数据的提交。 - **验证码**：JavaScript可以生成随机验证码图像，并在用户输入后进行比对验证，增加...

    Jquery表单检验

    在网页开发中，表单验证是必不可少的一部分，用于确保用户输入的数据符合预设的规则，比如邮箱格式、密码强度、手机号码合法性等。jQuery 提供了强大的插件 `jQuery Validate`，使得表单验证变得非常简单。 **...

    WEB交互界面设计和验收的指导性原则

    4. 尽可能早的在客户端完成输入数据合法性验证：输入数据的合法性检验应该在客户端使用JavaScript进行验证，以避免一次服务器请求和回复通讯，这种通讯是需要用户等待的。 在实际应用中，许多开发者都会忽视这个...

    检验是否符合条件 表单 登录 交验

    综上所述，"检验是否符合条件 表单 登录 交验"这一主题涵盖了从客户端到服务器端的整个表单验证流程，包括JavaScript的客户端验证，JSP的服务器端处理，以及在用户登录场景中的数据验证策略。这些都是Web开发中不可...

    web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作

    本项目为一个典型的HTML+CSS+JavaScript的综合应用实例，主要涉及以下几个关键知识点： 1. **HTML5**: 使用HTML5标准语法构建网页的基本结构，包括文档类型定义、头部信息（元信息）、主体内容等部分。 2. **CSS3**...

    php版本upload实例.zip

    "描述"中提到"js有点多"，可能是指实例中使用JavaScript进行前端验证和用户体验优化，例如实时显示文件大小、格式等信息，或者使用AJAX无刷新上传，提高交互性。 7. **示例分析**： "demo"可能是上传功能的演示...

    基于JS设计12306登录页面

    文中提到的代码段实现了一个基本的登录表单，包括用户名、密码和验证码的输入，以及一个验证函数来检验用户输入的合法性。以下知识点详细解释了该代码所涉及的技术细节： 1. HTML结构：代码首先使用HTML创建了一个...

    HTML规范及正确写法

    HTML Validator 工具是 W3C 提供的一个在线工具，用于检查 HTML 代码是否合法。可以通过 URI 输入、上传文件和直接输入代码三种方式进行检验。 六、HTML 元素参考手册 HTML 元素参考手册是指 HTML 元素的详细说明...

    使用bootstrap validator的remote验证代码经验分享(推荐)

    // 在异常情况下，仍然返回合法性的标志 } } ``` 在这个例子中，我们检查了用户名是否已存在于数据库中。如果存在，返回`{"valid": false}`，否则返回`{"valid": true}`。 在客户端，我们需要配置Bootstrap ...

    Vue Element校验validate的实例

    - `validate` 接受一个回调函数作为参数，这个回调函数会在验证完成后被调用，接收两个参数：一个布尔值 `isPass` 表示验证是否成功，以及一个对象 `obj`，包含了未通过验证的字段信息。 - 如果不提供回调函数，`...

Magicbox
Global site tag (gtag.js) - Google Analytics