html&js笔记--第一个网页工程

最新推荐文章于 2022-06-15 11:32:28 发布

tyrandoupup

最新推荐文章于 2022-06-15 11:32:28 发布

阅读量372

点赞数

分类专栏： HtmlJsCss、Angular Js、Bootstrap

本文链接：https://blog.csdn.net/qq_42293082/article/details/85331103

版权

HtmlJsCss、Angular Js、Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!--zhuce-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:''www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="mystyle2.css">
<title>新用户注册</title>
<script type="text/javascript" src="myjs.js">
</script>
</head>

<body text="blue">
    
    
<h1 align="center">注册</h1>

 <form action="https://www.baidu.com/"  onsubmit="return tovalid()">
<table align="center" >
<tr><td>Name:</td> <td title="only recieve Chinese and English!"><input type="text"  id="name" onblur="recover()"/></td></tr> 
<tr><td>Nickname: </td><td title="only recieve Chinese,English,number and underline!"><input type="text" id="nickname" onblur="recover()"  /></td><tr>
<tr><td>Gender: </td><td><input type="radio" name="gender" value="male"/>Male</td><tr>
<tr><td></td><td><input type="radio" name="gender" value="female"/>Female</td><tr>
           
<tr><td>Password: </td><td><input type="password" id="pwd" onblur="recover()"/></td><tr>
<tr><td>Adress: </td><td title="only recieve Chinese,English,number and underline!"><input type="text" id="address" onblur="recover()"/></td><tr>
<tr><td>Postal Code: </td><td title="only recieve number and underline!"><input type="text" id="postalcode" onblur="recover()" /></td><tr>
<tr><td>E-mail: </td><td title="only recieve English,number and underline!"><input type="text" id="e-mail" onblur="recover()"/></td>
           <td><select><option value="@163.com">@163.com</option>
                   <option value="@qq.com">@qq.com</option>
                   <option value="@bupt.edu.cn">@bupt.edu.cn</option>
           </select>
           </td>
           </tr> 
<tr><td>Personal hobby:</td><td><input type="checkbox" name="hobby" value="going swimming" />Going swimming</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="reading books" />Reading books</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="playing computer games" />Playing computer games</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="going hiking" />Going hiking</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="writing" />Writing</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="extra" />Extra</td><tr>

<tr><td>Telephone number: </td><td title="only recieve number and underline!"><input type="text" id="tel number" onblur="recover()"/></td><tr>
<tr><td>Personal statement: </td><td><textarea rows="5" cols="19" id="per" onblur="recover()"></textarea></td><tr>
</table>

<div align="center">
<input type="submit" value="Submit" id="submit" disabled="disabled"  />    <!--鼠标悬停事件触发事件1（全填完变黑）  鼠标点击触发事件2（检查是否填完并给出提示）-->
</div>
</form>
</body>

</html>

//js
//recover函数用于更改disabled
function recover()
{
	
	var a=document.getElementById("name").value;
	var b=document.getElementById("nickname").value;
	var c=document.getElementById("address").value;
	var d=document.getElementById("postalcode").value;
	var e=document.getElementById("tel number").value;
	var f=document.getElementById("e-mail").value;
	var g=document.getElementById("pwd").value;
	var h=document.getElementById("per").value;
	if(a)
	{if(b)
		{if(c)
			{if(d)
				{if(e)
					{if(f)
						{if(g)
							{if(h)
								{document.getElementById('submit').disabled=false;}
							else
								{document.getElementById('submit').disabled=true;}
							}
						else
							{document.getElementById('submit').disabled=true; }
						}
					else
					{document.getElementById('submit').disabled=true;}
					}
				else
					{document.getElementById('submit').disabled=true;}	
				}
			else
					{document.getElementById('submit').disabled=true;}
			}
		else
			{document.getElementById('submit').disabled=true;}
		}
	else
		{document.getElementById('submit').disabled=true;}	
	}	
	else
	{	
		document.getElementById('submit').disabled=true;
	}
	
	
	
	
}
//tovalid是判断submit
function tovalid(){
   var RegExp=/^[\u4E00-\u9FA5A-Za-z]+$/;
   var checknam=RegExp.test(document.getElementById("name").value);
	   RegExp=/^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
   var checknic=RegExp.test(document.getElementById("nickname").value);
   var checkadd=RegExp.test(document.getElementById("address").value);
       RegExp=/^[0-9_]+$/;
   var checkpos=RegExp.test(document.getElementById("postalcode").value);
   var checktel=RegExp.test(document.getElementById("tel number").value);
       RegExp=/^[A-Za-z0-9_]+$/;
   var checke=RegExp.test(document.getElementById("e-mail").value);
   
   if(checknam&checknic&checkadd&checkpos&checktel&checke==true)
   {    alert("Name:"+checknam+'\n'+"Nickname:"+checknic+'\n'+"Gender: true"+'\n'+"Password: true"+'\n'+
			  "Address:"+checkadd+'\n'+"Postal Code:"+checkpos+'\n'+"E-mail:"+checke+'\n'+"Personal hobby: true"+'\n'+"Telephone number:"+checktel+'\n'+"Personal statement: true");
	    alert("Perfect!waiting for submission! "); 
		return true;
	}
   else 
   {    alert("Name:"+checknam+'\n'+"Nickname:"+checknic+'\n'+"Gender: true"+'\n'+"Password: true"+'\n'+
			  "Address:"+checkadd+'\n'+"Postal Code:"+checkpos+'\n'+"E-mail:"+checke+'\n'+"Personal hobby: true"+'\n'+"Telephone number:"+checktel+'\n'+"Personal statement: true");      
        alert("Please enter again!"); 
		return false;
    }
			  
			 
}

tyrandoupup

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html&js笔记--第一个网页工程

&lt;!--zhuce--&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http:''www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&amp
复制链接

扫一扫

专栏目录