フォーム検証と2段階連動


フォーム検証
フォーム検証は、Webサイトを登録する際によく使用される機能です.
現在サポートされている条件は次のとおりです.
null
email
char-normal//英語、数字、下線char-chinese//中国語、英語、数字、下線、中国語句読点char-english//英語、数字、下線、英語句読点length:1-10  //length:4
equal:xxx//はオブジェクトの値に等しく、ハイフンの後はjqセレクタ構文です.
ajax:fun()
real-time//リアルタイムチェックdate      //2014-10-31
time      //10:30:00
datetime  //2014-10-31 10:30:00
money//正数、2桁の小数uint:1//正の整数、パラメータは開始値easytip//属性はプロンプトボックスの構成であり、構成可能な属性はである.
left: 0,
top: 0,
position: "right",  //top, left, bottom, right
disappear: "other",  //self, other, lost-focus, none, N seconds
speed: "fast",
theme:「white」//現在はwhite、black、blue、red のみ
arrow: "bottom",    //top, left, bottom, right
<!DOCTYPE html>
<html>
  <head>
    <title>    .html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
		<script type="text/javascript">
		//         ,       
			//1        ,     6 10   .         .         "_"  .
			function fun1(){
				var flag = true;
				
				if(!checkEmail()){
				flag =  false;
				}
				
				if(!checkName()){
				flag =  false;
				}
				 alert(flag);
				 return flag;
			}
			//    
			function checkEmail(){
			//1          
				var email  = document.form1.email.value;
			//2     
				var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
			//3   
			if(!reg.test(email)){
				//  =>  ,   false
				addError(document.form1.email,"       !");
					return false;//      
			}else{
				removeError(document.form1.email);
				return true;
			}
			
			}
			//     
			function checkName(){
			//1            
					//var nameInput= 	document.getElementsByName("name")[0];
					var nameInput = document.form1.name;
					
					//var name = nameInput.getAttribute("value");
					var name = nameInput.value;  //DHTML   
				//2          
				var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
				//3   
				if(!reg.test(name)){
					//    =>     . 
					//alert("    6 10 ,       !");
					addError(nameInput,"    6 10 ,       !");
					return false;//      
				}else{
					//    =>      
					removeError(nameInput);
					return true;
				}
				}
				//    
				//  1 :        
				//  2 :        
				function addError(where,what){
						where.nextSibling.innerHTML=what;
				}
				//    
				function removeError(where){
					where.nextSibling.innerHTML="";
				}
		</script>
  </head>
  
  <body>
   		<form action="" name="form1"  onsubmit="return fun1();"   >
   			<table border="1" width="30%" >
   				<tr>
					<th colspan="2" align="center" >
						    
					</th>
				</tr>   
				<tr>
					<td>   :</td>
					<td><input type="text" name="name"  onblur="checkName();" /><font color="red" ></font></td>
				</tr>
				<tr>
					<td>  :</td>
					<td><input type="text" name="email" /><font color="red" ></font></td>
				</tr>     
				<tr>
					<td colspan="2" align="center" >
						<input type="submit" value="  " />
					</td>
				</tr>   			
   			</table>
   		</form>
  </body>
</html>

にだんれんどう
<!DOCTYPE html>
<html>
  <head>
    <title>    .html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript">
		//json  
		//    java   map
		/* 
		var json = {"name":"tom","age":18};
		
		//  json    
		
		for(var key in json){  
			//alert(key);
			
			alert(key+"==>"+json[key])
		}
		 */
		//---------------------------------------------------------
		
		var json = {"   ":["   ","  ","  "],
			   "   ":["  ","  ","  "],
			   "    ":["   ","    ","   "]};
		
		
		//         
		function fun1(){
			//1     select  
			var province = document.getElementById("province");
			//2   json    
			for(var key in json){  
				//     option
				var option = document.createElement("option");
				option.innerHTML = key; // <option>   </option>
				//  option   select 
				province.appendChild(option);
			}
		}
		
		function fun2(){
			//1     select  
			var province = document.getElementById("province");
			var city = document.getElementById("city");
			//2           
			city.length =1; 
			//3         
			if(!province.selectedIndex){
			//          =>     
			return;
			}
			var options = province.options;
			var pName = options[province.selectedIndex].innerHTML;
			//4  json             
			var cities = json[pName];
			//5        
			for(var i = 0 ; i<cities.length;i++){
			var cityName = cities[i];
				//    option
				var option = document.createElement("option");
				option.innerHTML = cityName; 
				//  option   select 
				city.appendChild(option);
			}
		}
		
	</script>
  </head>
  <body onload="fun1();" >
  	<select id="province" onchange="fun2();" >
  		<option>---    ---</option>
  	</select>
  	<select id="city" >
  		<option>---    ---</option>
  	</select>
  </body>
</html>