软件工程网

时间:2011-07-28 16:47:22 384次阅读 关键词: jQuery 表单 javascript

 表单验证是Web开发中必不可少的一部分，单纯使用后台验证非空和格式都是不靠谱的，传统的javascript弹框也是非常不人性的，使用jQuery操作DOM节点来完成表单前台的验证则方便高效。本文涉及jQuery对form表单的操作和验证，前端攻城师们请含笑飘过。

$(function(){
	RealName = false ;  
	Email = false ;
	Phone = false ;
    Content = false ;
	//JS过滤空字符串
	function trimAll(str)
	{
		return str.replace(/(^s*)|(s*$)/g, "");
	}
	
	//验证邮箱
	function checkEmail(str)
	{
		var myReg = /^[._-a-zA-Z0-9]+@([_a-zA-Z0-9]+.)+[a-zA-Z0-9]{2,3}$/;
		if(!myReg.test(str)) 
			return false;
		else
			return true;
	}
	
	//文本框美化
	$("input:text").focus(function()
	{
		$(this).css({
			border: "1px solid red",
			backgroundColor: "#ffffe1"
		});
	}).blur(function() {
		$(this).css({
			border: "1px solid rgb(198,204,216)",
			backgroundColor: "#FFFFFF"
		});
	});
	
	//验证用户名
	$("#real_name").focus(function() {
		if ( $("#msgRealName").html() == "" )
		{
			$("#msgRealName").html("请输入您的姓名");
		}           
	}).blur(function() {
		var temp = trimAll($("#real_name").val());
		if (temp != null && temp.length > 0) {
			if (temp.length < 2 || temp.length > 16  ) {
				$("#msgRealName").html("请输入您正确的姓名");
				RealName = false;            
			}
			else
			{
				$("#msgRealName").html("");
				RealName = true;
			}
		} else {
			$("#msgRealName").html("您的姓名不能为空");
			RealName = false;
		}
	});
	
	//验证邮箱
	$("#email").focus(function() {
		if ( $("#msgEmail").html() == "" )
		{
			$("#msgEmail").html("请输入正确的邮箱格式");
		}           
	}).blur(function() {
		var temp = trimAll($("#email").val());
		if (temp != null && temp.length > 0) {
			if ( checkEmail(temp) ) {
				$("#msgEmail").html("");
				Email = true;       
			}
			else
			{
				$("#msgEmail").html("请输入正确的邮箱格式");
				Email = false;   
			}
		} else {
			$("#msgEmail").html("邮箱不能为空");
			Email = false;
		}
	});
	
	//验证电话
	$("#phone").focus(function() {
		if ( $("#msgPhone").html() == "" )
		{
			$("#msgPhone").html("请输入您的联系电话，例如037912345678或者13612345678");
		}           
	}).blur(function() {
		var temp = trimAll($("#phone").val());
		if (temp != null && temp.length > 0) {
			reg=/^(d{10,12})$/; 
			if ( reg.test(temp) ) {
				$("#msgPhone").html("");
				Phone = true;       
			}
			else
			{
				$("#msgPhone").html("请输入正确的电话号码，例如0379-12345678或者13612345678");
				Phone = false;   
			}
		} else {
			$("#msgPhone").html("联系电话不能为空");
			Phone = false;
		}
	});
	
	//验证留言内容
	$("#content").focus(function() {
		if ( $("#msgContent").html() == "" )
		{
			$("#msgContent").html("请输入您的留言内容");
		}           
	}).blur(function() {
		var temp = trimAll($("#content").val());
		if (temp != null && temp.length > 10) {
			$("#msgContent").html("");
			Content = true;       
		} else {
			$("#msgContent").html("请至少输入10个字符");
			Content = false;
		}
	});
	
	
	$("#addbtn").click(function(){
		if( RealName && Email && Phone && Content)
		{
			return true;
		}
		return false;
	});
 
	
})

这个表单需要验证是有三个方面，非空、长度和格式，当然绝大多数表单需要验证的也都是这三个方面，不同的就是表现形式上面的问题，要是一个一个input框去罗嗦就不能体现咱们学过软件工程这门课程了不是。

关于验证非空，这里面有一个需要注意的地方，PHP或者C#中空格也会被当做空字符串处理的，但是在js中的空格依然被当做字符串，并且js的trim函数到javascript1.8.1版本才开始支持，所以一般使用正则表达式模拟trim函数，这里有一篇探讨各种正则表达式效率的文章：JavaScript trim函数大赏。长度验证调用length方法就行，没有什么可多说的，汉字也是占用一个字符的。

格式验证基本上都要使用正则表达式，比如邮箱的格式、国内电话的格式等等，正则表达式面前一切都是浮云。