员工信息登记表

最新推荐文章于 2021-02-28 11:27:02 发布

tian_to_tian

最新推荐文章于 2021-02-28 11:27:02 发布

阅读量468

点赞数

文章标签： js

本文链接：https://blog.csdn.net/tian_to_tian/article/details/105446965

版权

员工信息登记表

JS版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 750px;
				height: 450px;
				border: #93BAFF 2px solid;
				background-color: #FFC0CB;
			}
			li {
				line-height: 35px;
				list-style: none;
			}
			li:nth-child(1) {
				line-height: 5px;
				text-align: center;
			}
			#color{
				width: 125px;
				height: 30px;
				margin-top: 5px;
			}
			input {
				width: 250px;
				height: 25px;
				border: 1.5px solid #93BAFF;
				background-color:#EBEBE4 ;
			}
			input:active,input:hover{
				box-shadow: 2px 2px #93BAFF;
				width: 275px;
			}
			span{
				margin-right: 16px;
			}
			#btn{
				width: 120px;
				height: 30px;
				margin-top: 40px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<form name="form" onsubmit="return yuangong()">
				<ul>
					<li>
						<h2>员工信息登记表</h2>
					</li>
					<li>
						<span style="margin-right: 0px;">用户登录名：</span><input type="" name="" placeholder="wcz@163.com"  >
					</li>
					<li>
						<span>真实姓名：</span><input type="text" placeholder="王传智" id="name" name="name">(必填，只能输入汉字)
					</li>
					<li>
						<span>真实年龄：</span><input type="number" placeholder=" 24" id="age" name="age" >(必填)
					</li>
					<li>
						<span>出生日期：</span><input type="data"  placeholder=" 年/月/日" id="birthday" name="birthday">(必填)
					</li>
					<li>
						<span>电子邮箱：</span><input type="email"  placeholder="123456@126.com" id="email" name="email">(必填)
					</li>
					<li>
						<span>身份证号：</span><input type="number"  id="idnumber" name="idnumber" >(必填，能够以数字、字母X结尾的短身份证号)
					</li>
					<li>
						<span>手机号码：</span><input type="number" id="phone" name="phone">(必填)
					</li>
					<li>
						<span>幸运颜色：</span><input type="color" id="color">(请选择你喜欢的颜色)
					</li>
					<input type="submit" value="提交"/ id="btn">
					<input type="reset"  value="重置"/ id="btn">
				</ul>
			</form>
		</div>
		<script >
			function yuangong(){
				var yuanName = /^[\u0391-\uFFE5]+$/;//姓名
				var yuanAge=/^((1[8-9])|([2-9][0-9])|(1[0-1][0-9])|120)$/;//年龄
				var yuanEmail = /^\s*\w+@\w+\s*$/;//邮箱
				var yuanBirthday=/^(18|19|20)\d{2}(.)((0[1-9])|(1[0-2]))(.)(([0-2][1-9])|10|20|30|31)$/;//生日
				var yuanIdnumber=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/;//身份证号码
				var yuanPhone = /^1[0-9]{10}$/;//手机号码
				
				
				var name=document.getElementById("name").value;
				var age=document.getElementById("age").value;
				var birthday=document.getElementById("birthday").value;
				var email=document.getElementById("email").value;
				var idnumber=document.getElementById("idnumber").value;
				var phone=document.getElementById("phone").value;
				
				if(!yuanName.test(name)){
					alert("真实姓名栏输入错误！");
					document.getElementById("name").focus();
					return false;
				}
				else if(!yuanAge.test(age)){
					alert("真实年龄栏输入错误！");
					document.getElementById("age").focus();
					return false;
				}
				else if(!yuanBirthday.test(birthday)){
					alert("生日输入错误！");
					document.getElementById("birthday").focus();
					return false;
				}
				else if(!yuanEmail.test(email)){
					alert("电子邮箱栏输入错误！");
					document.getElementById("email").focus();
					return false;
				}
				else if(!yuanIdnumber.test(idnumber)){
					alert("身份证号码输入错误！")
					document.getElementById("idnumber").focus();
					return false;
				}
				else if(!yuanPhone.test(phone)){
					 alert("电话号码输入错误！");
					 document.getElementById("phone").focus();
					 return false;
				 }
			}
		</script>
	</body>
</html>

在这里插入图片描述
HTML版

<!DOCTYPE html>
<html>
   <head>
        <meta charset=utf-8" />
        <title>员工信息登记表</title>
   </head>
<body>
   <table width="700" border="3" align="center" cellspacing="0" bordercolor="#7092BE" bgcolor="#FF8080" >
      <tr>
         <td >
	 <center><h1>员工信息登记表</h1></center>
	  <form>
	      用户登录名：<input type="text" placeholder="wcz@163.com" size="20"><p>
	      真实姓名：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="王传智" size="20">（必填，只能输入汉字）<p>
	      真实年龄：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="24" size="20">（必填）<p>
	      出生日期：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="  年/  月/  日" size="20">（必填）<p>
	      电子邮箱：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="123456@126.com" size="20">（必填）<p>
	      身份证号：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="20">（必填，能够以数字、字母x结尾的短身份证号）<p>
	      手机号码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="20">（必填）<p>
	      幸运色：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="color">（请选择你喜欢的颜色）<p>
	     <center>
                            <input name="提交" type="submit" value="提交"  style="height:40px;width:80px;"/>
                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	            <input name="重置" type="reset"   value="重置"  style="height:40px;width:80px;"/>
                     </center>
	</form>
         </td>
      </tr>
   </table>
</body>
</html>

在这里插入图片描述