常用Javascript数据验证(二)

     常说学习在于积累,在此之前我写过一篇博客<<常用Javascript数据验证(一)>>,时过半年,随着项目经验的不断增多,慢慢的有积累了相关的javascript数据验证的一些内容,今天就来和大家分享一下我的积累.

<script type="text/javascript">
		//返回主界面
	function goBack() {
		window.self.location="user_maint.jsp"
	}
	
		
//判断用户代码不能为空
	function addUser() {
		var userIdField = document.getElementById("userId");
		//用户代码不能为空
		if (trim(userIdField.value) == "" ) {
			alert("用户代码不能为空！");
			userIdField.focus();
			return;
		}
		//用户代码至少四个字符
		if (trim(userIdField.value).length < 4) {
			alert("用户代码至少4个字符！");
			userIdField.focus();
			return;
		}
		
		//第一个字符必须是字母
		if (!(trim(userIdField.value).charAt(0) >='a' && trim(userIdField.value).charAt(0) <='z')) {
			alert("用户代码首字符必须为字母！");
			userIdField.focus();
			return;
		}
		
		//判断用户代码只能是数字或字母，为4~6位
		/*
		if (!(trim(userIdField.value).length >=4 && trim(userIdField.value).length <=6)) {
			alert("用户代码只能为4~6位！！");
			userIdField.focus();
			return;
		}
		for (var i=0; i<trim(userIdField.value).length; i++) {
			var c = trim(userIdField.value).charAt(i);
			if (!((c >= '0' && c <='9') || (c >='a' && c <='z') || (c >='A' && c <='Z'))) {
				alert("用户代码必须为数字和字母！");
				userIdField.focus();
				return;
			}
		}
		*/
		
		//采用正则表达式判断用户代码只能是数字或字母，为4~6位（中午作业）
		var re = new RegExp(/^[a-zA-Z0-9]{4,6}$/);
		if (!re.test(trim(userIdField.value))) {
			alert("用户代码必须为数字或字母,只能为4~6位！");
			userIdField.focus();
			return;
		}
		
		
		//用户名称必须输入，不能和用户代码不能为空一致（中午作业）
		if (trim(document.getElementById("userName").value).length == 0) {
			alert("用户名称不能为空！");
			document.getElementById("userName").focus();
			return;
		}
		
		//密码至少6位（中午作业）
		if (trim(document.getElementById("password").value).length < 6) {
			alert("密码至少6位！");
			document.getElementById("password").focus();
			return;
		}
		//如果联系电话不为空，进行判断，判断规则：都为数字，采用两种方式：1、采用正则，2、不采用正则（中午作业）
		var contactTelField = document.getElementById("contactTel");
		//alert("a" + trim(contactTelField.value) + "a");
		//不采用正则
		/*
		if (trim(contactTelField.value) != "") {
			
			for (var i=0; i<trim(contactTelField.value).length; i++) {
				var c = trim(contactTelField.value).charAt(i);
				if (!(c >= '0' && c <= '9')) {
					alert("电话号码不合法！");
					contactTelField.focus();
					return;
				}
			}
		}
		*/
		if (trim(contactTelField.value) != "") { 
			//采用正则
			re.compile(/^[0-9]*$/);
			if (!re.test(trim(contactTelField.value))) {
				alert("电话号码不合法！");
				contactTelField.focus();
				return;
			}	
		}
				
		//如果emial不能空，进行判断，判断规则：只要包含@即可，@最好不再最前面和最后面（中午作业）
		var emailField = document.getElementById("email");
		if (trim(emailField.value).length != 0) {
			var emailValue = trim(emailField.value);
			if ((emailValue.indexOf("@") == 0) || (emailValue.indexOf("@") == (emailValue.length - 1))) {
				alert("email地址不正确！");
				emailField.focus();
				return;				
			}
			if (emailValue.indexOf("@") < 0) {
				alert("email地址不正确！");
				emailField.focus();
				return;				
			}
		}
		 
		//失去焦点时判断用户代码是否存在
		if(document.getElementById("spanUserId").innertHTML!=""){
			alert("用户代码已经存在");
			userIdField.focus();
			return;
		}
	
		
		//等同上面的写法
		with (document.getElementById("userForm")) {
			action="user_add.jsp";
			method="post";
			submit();
		}
	}
	
	
		
		//获得焦点
	function init() {
		document.getElementById("userId").focus();
	}
	
		
	//不能输入数字
	function userIdOnKeyPress() {
		//alert(window.event.keyCode);
		if (!(event.keyCode >= 97 && event.keyCode <=122)) {
			event.keyCode = 0;
		}
	}
	
	
	function document.onkeydown() {
		//alert(window.event.keyCode);
		if (window.event.keyCode == 13 && window.event.srcElement.type != 'button') {
			window.event.keyCode = 9; 
		}
	}
	
	 

	
	//失去焦点的时候开始判断用户代码是否已经存在
	function validate(field){
		
	if (trim(field.value).length != 0) {
			
		var xmlHttp;
		//表示当前浏览器不是ie,如ns,firefox
		if(window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
			
		//添加时间戳处理缓存问题
			var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
			
			//设置请求方式为GET，设置请求的URL，设置为异步提交
			xmlHttp.open("GET", url, true);
			
			//将方法地址复制给onreadystatechange属性
			//类似于电话号码
			xmlHttp.onreadystatechange=function(){
				//alert(xmlHttp.readyState);
				//ajax引擎状态为成功
					if (xmlHttp.readyState == 4) {
					//HTTP协议状态为成功
					if (xmlHttp.status == 200) {
						if (trim(xmlHttp.responseText) != "") {
							//alert(xmlHttp.responseText);
							document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
						}else {
							document.getElementById("spanUserId").innerHTML = "";
						}
					}else {
						alert("请求失败，错误码=" + xmlHttp.status);
					}
				}

			};
			
			
			//将设置信息发送到Ajax引擎
			xmlHttp.send(null);
		} else {
			document.getElementById("spanUserId").innerHTML = "";
		}
	}
</script>

user_validate.jsp:

%
	String userId=request.getParameter("userId");
	if(UserManager.getInstance().findUserById(userId) !=null){
		out.println("用户代码已经存在");
	}
%>

注:

findUserById是一个通过用户ID查询用户表的方法.

总结:

     这些javascript看着很简单,如果平常没有写过的,没有积累过,当有一天突然使用到的时候,头脑却是空白的,不知道如何写.为了防止这种情况出现,我们就从现在,最简单的开始积累.