`
java_xh
  • 浏览: 10020 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

javascript表单验证工具类

阅读更多
刚刚写的一段实用javascript验证代码,欢迎指正批评


var Validate = function(){}

Validate.prototype =  {
	// 验证字符串
	testString: function(str) {
		return str.replace(/^\s+|\s+$/g, "") != "";
	},
	
	// 验证整数
	testIntegerNumber: function(num) {
		if (!this.testString(num)) {
			return false;
		}
		return /^[0-9]+$/.test(num);
	},
	
	// 验证浮点数
	testDoubleNumber: function(num) {
		if (!this.testString(num)) {
			return false;
		}
		return /^\d+(\.)\d+$/.test(num);
	},
	
	// 验证日期(yyyy/MM/dd)
	testDate: function(date) {
		if (!this.testString(date)) {
				return false;
		}
		var reg = /^[1-2]\d{3}\/(0?[1-9]|1[0-2])\/(0?[1-9]|[12][0-9]|3[0-1])$/; 
		return reg.test(date);
	},
	
	// 验证Email
	testEmail: function(email) {
		if (!this.testString(email)) {
			return false;
		}
		var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
	    return reg.test(email);
	},
	
	// 验证中文
	testChinese: function(str) {
		if (!this.testString(str)) {
			return false;
		}
		return !/^[u4E00-u9FA5]+$/.test(str);
	}
	
}



HTML测试页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>图书管理</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="validate.js"></script>
  </head>
  
  <body>
  	<form action="hello.do" method="post">
	    <table width="40%" cellpadding="0" cellspacing="0" border="1" align="center">
	    	<tbody align="center">
	    		<tr>
	    			<td>书名</td>
	    			<td><input type="text" name="book_title"></td>
	    		</tr>
	    		<tr>
	    			<td>作者</td>
	    			<td><input type="text" name="book_author"></td>
	    		</tr>
	    		<tr>
	    			<td>售价</td>
	    			<td><input type="text" name="book_price"></td>
	    		</tr>
	    		<tr>
	    			<td>出版日期</td>
	    			<td><input type="text" name="book_yr"></td>
	    		</tr>
	    		<tr>
	    			<td>描述</td>
	    			<td><textarea name="book_description"></textarea></td>
	    		</tr>
	    		<tr>
	    			<td colspan="2">
		    			<input type="submit" name="submit" value="提交" onclick="return isNull();">
		    			&nbsp;&nbsp;&nbsp;&nbsp;
		    			<input type="reset" name="reset" value="重置">
	    			</td>
	    		</tr>
	    	</tbody>
	    </table>
    </form>
    <script type="text/javascript">
		var validate = new Validate();
    	function isNull() {
    		if (!validate.testString($("input[name='book_title']").val())) {
	            alert("书名不能为空!");
	            $("input[name='book_title']").get(0).focus();
	            return false;
	        }
	        if (!validate.testString($("input[name='book_author']").val())) {
	            alert("作者不能为空!");
	            $("input[name='book_author']").get(0).focus();
	            return false;
	        }
	        if (!validate.testDoubleNumber($("input[name='book_price']").val())) {
	            alert("售价输入错误!");
	            $("input[name='book_price']").get(0).focus();
	            return false;
	        }
	        if (!validate.testDate($("input[name='book_yr']").val())) {
	            alert("出版日期输入错误!");
	            $("input[name='book_yr']").get(0).focus();
	            return false;
	        }
	        return true;
        }
    </script>
  </body>
</html>


代码在附件
分享到:
评论

相关推荐

    javascript表单验证类

    JavaScript表单验证类是提高Web应用质量的重要工具。通过合理设计和使用,可以有效地增强用户体验,保障数据安全,同时减轻服务器负担。开发者可以根据项目需求,自定义验证规则,扩展验证类功能,使之更适应实际...

    一套JS小工具,包含了一个功能比较强大的表单验证工具

    标题中的“一套JS小工具,包含了一个功能比较强大的表单验证工具”暗示了这是一个JavaScript库,专注于表单验证。在Web开发中,表单验证是必不可少的部分,它确保用户输入的数据符合预设的规则,从而保护服务器免受...

    史上最全Java表单验证封装类

    综上所述,“史上最全Java表单验证封装类”为开发者提供了丰富的工具集,使得在Java项目中进行表单验证变得更加简单高效。通过这些方法的应用,可以有效提升应用程序的安全性和用户体验。希望本文能帮助大家更好地...

    js表单验证工具

    JavaScript表单验证工具是Web开发中的重要组成部分,主要用于在用户提交数据前检查输入是否符合预设规则,确保数据的有效性和安全性。在这个项目中,开发者花费了三天时间编写了一个JavaScript库,专注于表单验证...

    javaScript实现的表单验证,省市级联

    本项目主要探讨了如何使用JavaScript实现一种高效且用户友好的表单验证功能,同时结合了省市级联选择,使得用户在填写地址信息时可以方便地进行选择。 首先,表单验证是确保用户输入的数据符合预设规则的关键环节。...

    轻量级的JavaScript表单验证

    "轻量级的JavaScript表单验证"是一个专为处理此类需求而设计的解决方案,它允许开发者在客户端进行实时的数据检查,以确保用户提交的信息符合预期的格式和规则。 这个验证库的特点在于其轻量级的设计,这意味着它...

    jquery form 表单验证神器

    总结起来,jQuery Form 表单验证神器是一个强大的工具,它利用jQuery的便利性,结合HTML表单,提供了一套完善的验证解决方案。其丰富的文档、本地化支持、可扩展性和自定义皮肤使其成为开发者的得力助手,无论是在...

    使用fValidator库进行Javascript表单验证

    本文将详细介绍如何使用`fValidator`库进行JavaScript表单验证,这是一个轻量级且功能强大的验证工具,结合了MooTools框架。我们将探讨`fValidator`库的安装、基本用法、规则定义以及自定义验证等核心知识点。 首先...

    validate 通用Ajax无刷新表单验证类(JavaScript)

    总的来说,`validate`通用Ajax无刷新表单验证类为开发者提供了一个强大且灵活的工具,使得前端表单验证变得更加便捷和高效。通过合理利用这个类,开发者可以创建出用户体验优秀的Web应用,同时降低了服务器的压力。

    拥有一个属于自己的javascript表单验证插件_.docx

    本文将介绍如何创建一个自定义的JavaScript表单验证插件,并探讨其核心功能和实现原理。 首先,表单验证插件的主要目标是检测表单元素的值是否符合预设的规则。在这个例子中,作者创建了一个名为 `SimpoValidate` ...

    js 表单验证网页特效

    首先,我们需要理解JavaScript表单验证的基本概念。表单是HTML中的一个元素,用于收集用户输入。而验证则是检查这些输入是否符合预设的规则,如非空、邮箱格式、电话号码格式等。JavaScript可以通过监听表单的submit...

    jquery表单验证类

    总的来说,`jQuery表单验证类`是提高Web应用表单数据质量的有效工具,它简化了验证逻辑,使开发者能够专注于业务逻辑,而不是基础的验证功能。通过合理的配置和扩展,我们可以构建出强大且灵活的表单验证机制,确保...

    极好的表单验证方案,非常实用

    标题提到的“极好的表单验证方案”提供了一种高效、实用的方法,避免了传统的逐个通过JavaScript进行验证的繁琐过程。 在Web应用中,表单验证通常分为客户端验证和服务器端验证两部分。客户端验证利用JavaScript或...

    bootstrap风格的html5表单验证示例

    6. **响应式设计**:Bootstrap的网格系统和响应式工具类确保表单在不同屏幕尺寸上都能良好显示。这在移动设备日益普及的今天尤为重要。 7. **错误提示和反馈**:良好的表单验证不仅需要正确处理无效数据,还需要向...

    JS客户端表单验证框架

    总的来说,**JS客户端表单验证框架**是一个强大且灵活的工具,它极大地简化了前端表单验证的工作,提升了开发效率和用户体验。通过学习和运用这个框架,开发者可以更专注于业务逻辑,而非基础的验证实现,从而更好地...

    Ajax表单验证插件

    综上所述,Ajax表单验证插件是现代Web应用中的一个重要工具,它提高了用户交互的响应速度和体验,降低了无效数据提交的可能性。使用这种插件,开发者可以轻松实现动态、高效的表单验证机制,同时保持界面的美观和...

    jquery表单验证实例网站会员注册表单验证提交form表单代码

    总的来说,jQuery为表单验证提供了强大的工具,允许开发者轻松创建高效且用户友好的验证机制。结合适当的前端设计,可以确保网站会员注册过程既安全又流畅。通过不断学习和实践,你可以进一步优化这个过程,提高网站...

    struts的表单验证

    本文将深入探讨Struts中的表单验证,这是构建用户交互界面时一个至关重要的部分。 表单验证是在用户提交数据前检查输入的有效性,以确保数据的完整性和安全性。在Struts框架中,表单验证通常通过两个主要方式实现:...

    jq 表单校验工具

    在网页开发中,表单是收集用户数据...总的来说,"jq 表单校验工具"是一个强大的辅助工具,它简化了前端开发中的表单验证工作,提供了多种验证方式,并允许开发者根据具体需求进行定制,大大提升了开发效率和用户体验。

Global site tag (gtag.js) - Google Analytics