JavaWeb実験一:jsp簡単登録ページ

ユーザー登録インタフェースを作成します.
ユーザーログイン機能の実装
1、ログインページ
フォームを使用してコミットするユーザー登録ページを実装します.ページに含まれる要素は、図2-1に示すように、適切な入力要素タイプを選択し、名前を付けることに注意してください.フォームのactionプロパティ・レッスンが空に設定されています.
 
 
図2-1ユーザ登録ページ要素
2、ユーザー入力情報の検証を実現する
JavaScriptやjQueryなどを利用してページ要素の合法性の検証を完了し、例えばユーザーが入力した名前が要求に合わない場合、マウスが名前入力ボックスを離れると、後ろの文字が赤くなる.逆に,ユーザが入力した名前が要求に合致すると,マウスが名前ボックスから離れると後ろの文字が緑色になる.
 
図2-2入力正当性検査
ユーザーが「登録ボタン」をクリックしても、ページ内の要素の正当性を検証できます.
 

	function checkForm() {
		checkName();
		checkPassword();
		checkEmail();
		checkTel();
		checkTrueName();
		checkProvince();
	}
	function checkName() {

		var username = document.getElementById("username").value;
		if (username.length<3 || username.lenth>5) {
			document.getElementById("name_Span").innerHTML = "<em style = 'color:#EF0000'>    3-5     </em>";
			document.getElementById("username").focus();
		} else
			document.getElementById("name_Span").innerHTML = "<em style = 'color:#008000'>    3-5     </em>";
	}

	function checkPassword() {

		var password = document.getElementById("password").value;
		if (password.length<8 || password.lenth>12) {
			document.getElementById("password_Span").innerHTML = "<em style = 'color:#EF0000'>   8-12   </em>";
			document.getElementById("password").focus();
		} else
			document.getElementById("password_Span").innerHTML = "<em style = 'color:#008000'>   8-12   </em>";

		var pwdRept = document.getElementById("pwdRept").value;
		if (pwdRept != password) {
			document.getElementById("pwdRept_Span").innerHTML = "<em style = 'color:#EF0000'>       </em>";
			document.getElementById("pwdRept").focus();
		}

		else
			document.getElementById("pwdRept_Span").innerHTML = "<em style = 'color:#008000'>       </em>";
	}

	function checkEmail() {

		var email = document.getElementById("email").value;

		var pattern = /^[a-zA-Z0-9#_\^\$\.\+\-\?\=\!\|\:\\\/\(\)\[\]\{\}]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;

		if (email.length == 0 || !pattern.test(email)) {
			document.getElementById("email_Span").innerHTML = "<em style = 'color:#EF0000'>    :[email protected]</em>";
			document.getElementById("email").focus();
		}

		else
			document.getElementById("email_Span").innerHTML = "<em style = 'color:#008000'>    :[email protected]</em>";
	}

	function checkTel() {

		var tel = document.getElementById("tel").value;

		var phone_reg = /^1[3|4|5|7|8]\d{9}$/; //     

		if (tel.length == 0 || !phone_reg.test(tel)) {
			document.getElementById("tel_Span").innerHTML = "<em style = 'color:#EF0000'>    :13800154200</em>";
			document.getElementById("tel").focus();
		} else
			document.getElementById("tel_Span").innerHTML = "<em style = 'color:#008000'>    :13800154200</em>";
	}

	function checkTrueName() {

		var name = document.getElementById("trueName").value;
		var true_reg = /^[\u4e00-\u9fa5]{2,5}$/;
		if (!true_reg.test(name)) {
			document.getElementById("trueName_Span").innerHTML = "<em style = 'color:#EF0000'> 2-5     </em>";
			document.getElementById("trueName").focus();
		}

		else
			document.getElementById("trueName_Span").innerHTML = "<em style = 'color:#008000'> 2-5     </em>";
	}

	function checkProvince() {

		var pve = document.getElementById("province").value;
		if (pve.length < 1 || pve == "0")
			document.getElementById("province_Span").innerHTML = "<em style = 'color:#EF0000'>     </em>";
		else
			document.getElementById("province_Span").innerHTML = "<em style = 'color:#008000'>     </em>";
	}




	

		

			

				

					
*   :
					

					
    3-5     
				

				

					
*  :
					

					
   8-12   
				

				

					
*    :
					

					
       
				

				

					
*Email:
					

					
    :[email protected]
				

				

					
*    :
					

					
    :13800154200
				

				

					
*    :
					

					
 2-5     
				

				

					
*  :
					

							   
							  
							  
							  
							  
							  
					      
				

				

					
*    :
					
Java .Net PHP
						   IOS Android