天天看點
傳回

第三十天 ：Hbuilder+js，注冊界面的前端驗證

第一次學js,一早上時間就寫了一個這東西，個人注冊和企業級注冊的頁面。

1.符合格式則輸出的為對号，錯誤的側輸出的是錯号；

具體的要求格式看js代碼

<!DOCTYPE html>
<html>
	<!--
    	作者：[email protected]
    	時間：2017-06-06
    	描述：
    -->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.a{
				background-color: red;
			}
			.b{
				background-color: lightseagreen;
			}
			.c{
				width: 100%;
				height: 100%;
				background-color: skyblue;
			}			
			
		</style>
		<script type="text/javascript">
				function checkname(){
					var name=document.getElementById("name");
					var mes= document.getElementById("mes");
					if(name.value.length==0||name.value.length>9){
						mes.className="a";	
						mes.innerHTML="×";
					}else{
						mes.innerHTML="√";
						mes.className="b";
					}
				}
			
				
				function checkidnum(){
					var idnum =document.getElementById("idnum");
					var mes2  =document.getElementById("mes2");
					var reg=/\d{17}\w{1}/;
					if(reg.test(idnum.value)){
							mes2.innerHTML="√";
							mes2.className='b';
					}else{
						mes2.innerHTML="×";
						mes2.className="a";
					}
				}
			    
			    function checkusername(){
					var username =document.getElementById("username");
					var mes3  =document.getElementById("mes3");
					var reg=/\W{1,8}/;
					if(reg.test(username.value)){
							mes3.innerHTML="√";
							mes3.className='b';
					}else{
						mes3.innerHTML="×";
						mes3.className="a";
					}
				}
			
				function checkpwd(){
					var pwd =document.getElementById("pwd");
					var mes4  =document.getElementById("mes4");
					var reg=/\w{6,}/;
					if(reg.test(pwd.value)){
							mes4.innerHTML="√";
							mes4.className='b';
					}else{
						mes4.innerHTML="×";
						mes4.className="a";
					}
				}
				
				function checkrepwd(){
					var username =document.getElementById("repwd");
					var mes5  =document.getElementById("mes5");
					var reg=/\w{6,}/;
					if(reg.test(repwd.value)){
							mes5.innerHTML="√";
							mes5.className='b';
					}else{
						mes5.innerHTML="×";
						mes5.className="a";
					}
				}
								
				function checkemail(){
					var email =document.getElementById("email");
					var mes6  =document.getElementById("mes6");
					var reg=/\w+\@{1}\w+\.{1}\w+/;
					if(reg.test(email.value)){
							mes6.innerHTML="√";
							mes6.className='b';
					}else{
						mes6.innerHTML="×";
						mes6.className="a";
					}
				}

			
		</script>
	</head>
		<div class="c" align="center">
				<button >個人使用者注冊</button> <button value="day0109.html"><a href="day0109.html" target="_blank" rel="external nofollow" >企業使用者注冊</a></button>
				<hr />
					<label style="font-size:13px;background-color: red;"> 為了保證使用者資訊安全我們會對每一位使用者資訊認真稽核，是以請您注冊真是資訊！ </label>
		<form action="01.html"  align="center">
			<table align="center">
				<tr >
					<td>真實姓名：</td><td><input   type="text"  id="name"  value=""  οnblur="checkname()" /> </td> <td><span id="mes" class="" ></span></td>
				</tr>
				
				<tr>
					<td>證件類型：</td><td align="left">
						<select id="id">
							<option value="id1">身份證</option>
							<option value="id2">護照</option>
							<option value="id3">駕照</option>
						</select>
					</td>
					<td>
						<span id="mes1" class=""></span>
					</td>
				</tr>
				
				<tr>
					<td>證件賬号：</td>
					<td align="center"><input type="text" id="idnum"  value="" οnblur="checkidnum()" ></td>
					<td><span id="mes2" class=""></span></td>
				</tr>
				
				<tr>
					<td>使用者名：</td>
					<td align="center"><input type="text" id="username"  value=""  οnblur="checkusername()" ></td>
					<td><span id="mes3" class=""></span></td>
				</tr>
				
				<tr>
					<td>密碼：</td>
					<td align="center"><input type="text" id="pwd"  value=""  οnblur="checkpwd()" ></td>
					<td><span id="mes4" class=""></span></td>
				</tr>
				
				<tr>
					<td>确認密碼：</td>
					<td align="center"><input type="text" id="repwd"  value=""  οnblur="checkrepwd()" ></td>
					<td><span id="mes5" class=""></span></td>
				</tr>
				
				</tr>
				
				<tr>
					<td>電子郵箱：</td>
					<td align="center"><input type="text" id="email"  value=""  οnblur="checkemail()" ></td>
					<td><span id="mes6" class=""></span></td>
				</tr>
				<tr>
					<td></td>
					<td ><label style="font-size:13px;background-color: red;"> 請認真填寫以便找回密碼 </label></td>
				</tr>
				<tr>
					<td>聯系電話：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>手機号碼：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>傳真：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>國籍：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>郵政編碼：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>聯系位址：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>備注：</td>
					<td align="center"><input type="text" ></td>
				</tr>

				<tr>
					<td></td>
					<td>
					<table>
					<tr>
					<td align="center"><input type="submit" value="submit" ></td>
					<td align="left"><input type="reset" value="reset" ></td>
					</tr>
					</table>
					</td>
				</tr>
				
			</table>
		</form>
		</div>
	</body>
</html>

           
<!DOCTYPE html>
<html>
	<!--
    	作者：[email protected]om
    	時間：2017-06-06
    	描述：
    -->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.a{
				background-color: red;
			}
			.b{
				background-color: lightseagreen;
			}
			.c{
				width: 100%;
				height: 100%;
				background-color: skyblue;
			}			
			
		</style>
		<script type="text/javascript">
				function checkname(){
					var name=document.getElementById("name");
					var mes= document.getElementById("mes");
					if(name.value.length==0||name.value.length>9){
						mes.className="a";	
						mes.innerHTML="×";
					}else{
						mes.innerHTML="√";
						mes.className="b";
					}
				}
				
				
				function checkidnum(){
					var idnum =document.getElementById("idnum");
					var mes2  =document.getElementById("mes2");
					var reg=/\d{17}\w{1}/;
					if(reg.test(idnum.value)){
							mes2.innerHTML="√";
							mes2.className='b';
					}else{
						mes2.innerHTML="×";
						mes2.className="a";
					}
				}
			    
			    function checkusername(){
					var username =document.getElementById("username");
					var mes3  =document.getElementById("mes3");
					var reg=/\W{1,8}/;
					if(reg.test(username.value)){
							mes3.innerHTML="√";
							mes3.className='b';
					}else{
						mes3.innerHTML="×";
						mes3.className="a";
					}
				}
			    function checkusername1(){
					var username =document.getElementById("username1");
					var mes3  =document.getElementById("mes31");
					var reg=/\W{1,8}/;
					if(reg.test(username.value)){
							mes3.innerHTML="√";
							mes3.className='b';
					}else{
						mes3.innerHTML="×";
						mes3.className="a";
					}
				}
			
				function checkpwd(){
					var pwd =document.getElementById("pwd");
					var mes4  =document.getElementById("mes4");
					var reg=/\w{6,}/;
					if(reg.test(pwd.value)){
							mes4.innerHTML="√";
							mes4.className='b';
					}else{
						mes4.innerHTML="×";
						mes4.className="a";
					}
				}
				
				function checkcall(){
					var pwd =document.getElementById("call");
					var mes4  =document.getElementById("mes41");
					var reg=/\d{11}/;
					if(reg.test(pwd.value)){
							mes4.innerHTML="√";
							mes4.className='b';
					}else{
						mes4.innerHTML="×";
						mes4.className="a";
					}
				}
				function checkrepwd(){
					var username =document.getElementById("repwd");
					var mes5  =document.getElementById("mes5");
					var reg=/\w{6,}/;
					if(reg.test(repwd.value)){
							mes5.innerHTML="√";
							mes5.className='b';
					}else{
						mes5.innerHTML="×";
						mes5.className="a";
					}
				}
								
				function checkemail(){
					var email =document.getElementById("email");
					var mes6  =document.getElementById("mes6");
					var reg=/\w+\@{1}\w+\.{1}\w+/;
					if(reg.test(email.value)){
							mes6.innerHTML="√";
							mes6.className='b';
					}else{
						mes6.innerHTML="×";
						mes6.className="a";
					}
				}

			
		</script>
	</head>
		<div class="c" align="center">
				<button ><a href="day0108.html" target="_blank" rel="external nofollow" >個人使用者注冊</a></button> <button >企業使用者注冊</button>
				<hr />
					<label style="font-size:13px;background-color: red;"> 為了保證使用者資訊安全我們會對每一位使用者資訊認真稽核，是以請您注冊真是資訊！ </label>
		<form action="01.html"  align="center">
			<table align="center">
				<tr >
					<td>企業名稱：</td><td><input   type="text"  id="name"  value=""  οnblur="checkname()" /> </td> <td><span id="mes" class="" ></span></td>
				</tr>
				
				<tr>
					<td>法人代表：</td>
					<td align="center"><input type="text" id="username"  value=""  οnblur="checkusername()" ></td>
					<td><span id="mes3" class=""></span></td>
				</tr>
				<tr>
					<td>聯系人：</td>
					<td align="center"><input type="text" id="call"  value=""  οnblur="checkcall()" ></td>
					<td><span id="mes41" class=""></span></td>
				</tr>
				
				<tr>
					<td>企業注冊編碼：</td>
					<td align="center"><input type="text" id="idnum"  value="" οnblur="checkidnum()" ></td>
					<td><span id="mes2" class=""></span></td>
				</tr>
				
				
				<tr>
					<td>使用者名：</td>
					<td align="center"><input type="text" id="username1"  value=""  οnblur="checkusername1()" ></td>
					<td><span id="mes31" class=""></span></td>
				</tr>
				
				<tr>
					<td>密碼：</td>
					<td align="center"><input type="text" id="pwd"  value=""  οnblur="checkpwd()" ></td>
					<td><span id="mes4" class=""></span></td>
				</tr>
				
				<tr>
					<td>确認密碼：</td>
					<td align="center"><input type="text" id="repwd"  value=""  οnblur="checkrepwd()" ></td>
					<td><span id="mes5" class=""></span></td>
				</tr>
				
				</tr>
				
				<tr>
					<td>電子郵箱：</td>
					<td align="center"><input type="text" id="email"  value=""  οnblur="checkemail()" ></td>
					<td><span id="mes6" class=""></span></td>
				</tr>
				<tr>
					<td></td>
					<td ><label style="font-size:13px;background-color: red;"> 請認真填寫以便找回密碼 </label></td>
				</tr>
				<tr>
					<td>聯系電話：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>手機号碼：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>傳真：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>國籍：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>郵政編碼：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>聯系位址：</td>
					<td align="center"><input type="text" ></td>
				</tr>
				
				<tr>
					<td>備注：</td>
					<td align="center"><input type="text" ></td>
				</tr>

				<tr>
					<td></td>
					<td>
					<table>
					<tr>
					<td align="center"><input type="submit" value="submit" ></td>
					<td align="left"><input type="reset" value="reset" ></td>
					</tr>
					</table>
					</td>
				</tr>
				
			</table>
		</form>
		</div>
	</body>
</html>
javascript技術 javascript html 系統資料庫單 js函數
上一篇: CSS BFC是什麼【BFC詳解】
下一篇: Qt QFuture詳解簡述基本使用進階操作疊代器QFutureIteratorQFuture::const_iterator

繼續閱讀