Web前端 | 注册表单验证

注册格式要求：

 

页面中所有项均为必填项

登录账号：只能是数字或字母且以字母开头

密码：大于8位且需要有字母和数字之外的字符

姓名：格式为2-4个汉字

出生年月日：格式为yyyy-mm-dd 【eg：1998-02-17】

邮编：正确的6位数字邮编

E-mail：基本格式

Html程序代码如下(页面程序，封装在index.html中)：

	
		
		
		
	
	
		
用户注册
		
·格式要求（注册前必读）
		

		

			

			

				
登录账号
				

			
			
			

				
密码
				

			
			
			

				
确认密码
				

			
			
			

				
姓名
				

			
			
			

				
身份证号码
				

			
			
			

				
出生年月日
				

			
			
			

				
住址
				

			
			
			

				
邮编
				

			
			
			

				
E-mail
				

			
			
			

				

				
      
					
			
			
		
        
        
	

Html代码文件如下（跳转页面代码）：

	
		
		
	
	
		
注册格式要求
		
页面中所有项均为必填项，请勿漏填
		
 登录账号：只能是数字或字母且以字母开头
		
密码：大于8位且需要有字母和数字之外的字符
		
姓名：格式为2-4个汉字
		
出生年月日：格式为yyyy-mm-dd 【eg：1998-02-17】
		
邮编：正确的6位数字邮编
		
E-mail：基本格式
		
	

Css代码文件如下（封装在css.css文件中）：

	body{
		background:url(img/time.jpg) center center;
		width: 100%;
		height: 100%;
		background-size: cover;
		}
	h1{
		align-content: center;
		text-shadow: 0 8px 5px rgba(0,0,8,.3);
		color: indianred;
		font-size: 48px;
	}	
 	.ym{
 		width: 310px;
  		border:px solid write;
   		padding: auto;
   		margin: auto
 }

Javascript代码文件如下（实现表单验证的功能程序，封装在js.js文件中）：

	function print99(x){
		while(x.length>0 && x.charAt(0)==' ')
	 		x = x.substring(1,x.length);
		while(x.length>0&&x.charAt(x.length-1)==' ')
			x = x.substring(0,x.length-1);
		return x;
	}
	
	function isNull(elem,message){
		var va=print99(elem.value);
		if(va==""){
			alert(message);
			elem.focus();
			return false;
		}
		return true;
	}

	function checkName(){
		var first=document.forms[0].Name.value.charAt(0);
		var exp=/^[a-zA-Z0-9]+$/;
		if(isNull(document.forms[0].Name,"账号不能为空，请输入账号！")){
			if(first>='a'&&first<='z'||first>='A'&&first<='Z'){
			}
			else{
				alert("登录账号要求以字母开头，请您重新输入！");
				document.forms[0].Name.focus();
				return false;
			}
			if(!exp.test(document.forms[0].Name.value)){
				alert("账号必须是字母或数字！");
				document.forms[0].Name.focus();
				return false;
			}
			return true;
		}else
			{
			return false;
		}
	}

	function checkpw(){
		var exp=/^[A-Za-z0-9]+$/;
		if(isNull(document.forms[0].pw,"密码不能为空，请输入密码！")){
			if(document.forms[0].pw.value.length<=8){
				alert("密码必须大于8位！");
				document.forms[0].pw.focus();
				return false;
			}
			else{
				if(exp.test(document.forms[0].pw.value)){
					alert("密码需要包含其他字符!");
					document.forms[0].pw.focus();
					return false;
				}
			}
		}
		else{
			return false;
		}
		if(document.forms[0].pw.value!=document.forms[0].pw1.value){
			alert("两次密码输入不同!");
			document.forms[0].pw.focus();
			return false;
		}
		return true;
	}
	
    function checkname(){
    	var exp =/^[\u4e00-\u9fa5]{2,4}$/i;
    	if(isNull(document.forms[0].name,"姓名不能为空，请输入姓名")){
 			if (!exp.test(document.forms[0].name.value)) {
 				alert("请输入正确格式的姓名！");
 				document.forms[0].name.focus();
				return false;
 			}
 			return true;
 		}
 		else{
			return false;
 			}
    }
    
    function checkIdenty(){
		var bir=document.forms[0].birth.value;
		var ide=document.forms[0].identy.value;
		var biride=ide.substring(6,10)+"-"+ide.substring(10,12)+"-"+ide.substring(12,14);
		if(isNull(document.forms[0].identy,"身份证号码不能为空，请输入")){
			if(ide.length!=18){
				alert("请输入正确格式的身份证号码（18位）");
				document.forms[0].identy.focus();
				return false;
			}else
			{
				if(bir!=biride){
					alert("您的身份证信息与生日不符合，请重新输入！");
					document.forms[0].identy.focus();
					return false;
				}
			}
			return true;
		}
		else{
			return false;
		}
	}
    
	function checkecode(){
		var exp=/^[0-9]+$/;
		if(isNull(document.forms[0].ecode,"邮编不能为空，请输入")){
			if(document.forms[0].ecode.value.length!=6){
				alert("请输入正确格式的邮政编码（6位）");
				document.forms[0].ecode.focus();
				return false;
			}else{
				if(!exp.test(document.forms[0].ecode.value)){
					alert("邮编为数字");
					document.forms[0].ecode.focus();
					return false;
				}
			}
			return true;
		}
		else{
			return false;
		}
	}
	
	function checkEmail(){
		var exp=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
		if(isNull(document.forms[0].email,"Email不能为空，请输入")){
			if(!exp.test(document.forms[0].email.value)){
				alert("Email格式错误！");
				document.forms[0].email.focus();
				return false;
			}
			return true;
		}
		else{
			return false;
	}
}

	function last(){
		if(checkName()&&checkpw()&&checkname()&&checkIdenty()&&checkecode()&&checkEmail()){
			document.forms[0].submit();
			return true;
		}
		return false;
	}

通过以上四个文件即可实现一个简单的注册表单验证的功能（本程序中的time.jpg文件在《Web前段编程基础——编写简易计算器》博文 中的time.jpg相同，在此不再上传。）

运行页面如下，并可实现验证功能：