注册页面学习html

最新推荐文章于 2023-05-04 14:58:12 发布

原创最新推荐文章于 2023-05-04 14:58:12 发布 · 290 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   *{
       margin:0;
       padding: 0;

   }
   #body{
       width:1366px;
       height:1200px;
       background-image: url("Bg4.jpg");
       background-size: cover;
       background-repeat: round;
       /*margin:auto;*/
   }
   #form{
       position:absolute;
       left:400px;
       top:40px;
       color:white;
   }
   #p{
       font-style: italic;
       font-size:20pt;
       color:red;
   }
   .error_prompt{
   border:solid 1px #ff3300;
   background-color:#fff2e5;
   background-image: url(error1.jpg);
   color: red;
   background-repeat:no-repeat;
   background-position:5px 2px;
   padding:2px 5px 0px 25px;
}
.ok_prompt{
   border:solid 1px #01be00;
   background-color:#e6fee4;
   background-image:url(ok1.jpg);
   background-repeat:no-repeat;
   background-position:5px 2px;
   padding:2px 5px 0px 25px;
   color: green;
}
.msg_prompt{
   border:solid 1px #ffcd00;
   background-color:#ccaaee;
   padding-left:5px;
   padding-right:5px;
}
   </style>
   <script type="text/javascript">
   //判断用户名
   function userInput(){
       var span = document.getElementById('userSpan');
       span.className = "msg_prompt";//修改标签的类为msg_prompt，提示消息的类
       //会自动加载msg_prompt类的样式
       span.innerHTML = "请输入6-12位的用户名，包含英文和数字";
       //innerHTML就是标签内部的文本<span> XXXX </span>
   }
   function checkUser(){
       var user = document.getElementById('user');
       var span = document.getElementById('userSpan');//获取提示框标签
       if(user.value.length < 6 || user.value.length > 12){
           span.className = "error_prompt";
           span.innerHTML = "输入用户名不是6-12位";
           return;
       }
       //是否字符串是英文和数字
       var reg = /^[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*$/;// /正则表达式/
       if(reg.test(user.value) == false){//test(变量字符串)
           span.className = "error_prompt";
           span.innerHTML = "输入用户名必须是英文和数字";
           return;
       }

       span.className = "ok_prompt";
       span.innerHTML = "用户名符合要求";
       }
// 判断密码
   var pwd =null;//记录密码
   function pwdInput(){
       var span = document.getElementById('pwdSpan');
       span.className = "msg_prompt";//修改标签的类为msg_prompt，提示消息的类
       //会自动加载msg_prompt类的样式
       span.innerHTML = "请设置6-12位的密码，包含英文和数字";
       //innerHTML就是标签内部的文本<span> XXXX </span>
   }
   function checkPwd(){
       var password = document.getElementById('password');
       var span = document.getElementById('pwdSpan');//获取提示框标签
       if(password.value.length < 6 || password.value.length > 12){
           span.className = "error_prompt";
           span.innerHTML = "设置的密码不是6-12位";
           return;
       }
       //是否字符串是英文和数字
       var reg = /^[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*$/;// /正则表达式/
       if(reg.test(password.value) == false){//test(变量字符串)
           span.className = "error_prompt";
           span.innerHTML = "设置的密码必须是英文和数字";
           return;
       }
       pwd=password.value;//记录密码
       span.className = "ok_prompt";
       span.innerHTML = "密码符合要求";
       }
//重复密码
   function confirmpwdInput(){
       var span = document.getElementById('confirmpwdSpan');
       span.className = "msg_prompt";//修改标签的类为msg_prompt，提示消息的类
       //会自动加载msg_prompt类的样式
       span.innerHTML = "请再输入一次密码进行确认";
       //innerHTML就是标签内部的文本<span> XXXX </span>
   }
   function checkconfirmPwd(){
       var confirmPwd = document.getElementById('confirmPwd');
       var span = document.getElementById('confirmpwdSpan');//获取提示框标签
       if(confirmPwd.value != pwd){
           span.className = "error_prompt";
           span.innerHTML = "两次输入的密码不符";
           return;
       }
       span.className = "ok_prompt";
       span.innerHTML = "密码验证正确";
       }
//手机号
   function phoneNumInput(){
       var span = document.getElementById('phoneNumSpan');
       span.className = "msg_prompt";//修改标签的类为msg_prompt，提示消息的类
       //会自动加载msg_prompt类的样式
       span.innerHTML = "请填写您的11位手机号码";
       //innerHTML就是标签内部的文本<span> XXXX </span>
   }
   function checkphoneNum(){
       var phoneNum = document.getElementById('phoneNum');
       var span = document.getElementById('phoneNumSpan');//获取提示框标签

       if(!(/^1(3|4|5|7|8)\d{9}$/.test(phoneNum.value))){
           span.className = "error_prompt";
           span.innerHTML = "手机号不符合实际，请重新填写";
           return;
       }
       span.className = "ok_prompt";
       span.innerHTML = "手机号符合要求";
       }
   //省份
   var pro=null;
   function checkPrvo(){
       var prov = document.getElementById('prov');
       pro=prov.value;

   }
   //市
   var ci=null;
   function checkCity(){
       var city = document.getElementById('city');
       city=city.value;
       var textarea = document.getElementById('textarea');
       textarea.value=pro+"省"+city+"市";
   }

   </script>
</head>
<body>
   <div id="body">
       <div id="form">
       <p id="p">&emsp;&emsp;欢迎注册！</p><br>
           <form action="">
           用 户 名：<input type="text" id="user" onfocus="userInput()" onblur="checkUser()">
           &emsp;<span id="userSpan"></span><br><br>

密&emsp;&emsp;码：<input type="password" id="password" onfocus="pwdInput()" onblur="checkPwd()">
&emsp;<span id="pwdSpan"></span><br><br>

重复密码：<input type="password" id="confirmPwd" onfocus="confirmpwdInput()" onblur="checkconfirmPwd()">
&emsp;<span id="confirmpwdSpan"></span><br><br>

性别：<input type="radio" name="radio1" value="M" checked="checked" >男
&emsp;<input type="radio" name="radio1" value="F">女<br><br>

手&emsp;&emsp;机：<input type="text" id ="phoneNum" onfocus="phoneNumInput()" onblur="checkphoneNum()">
&emsp;<span id="phoneNumSpan"></span><br><br>

所在城市：
           
           <select name="" id="prov" onblur="checkPrvo()">
           <option value="福建" selected="selected">福建</option>
           </select> 省
           
           <select name="" id="city" onblur="checkCity()">
               <option value="福州" selected="selected" >福州</option>
               <option value="莆田" >莆田</option>
               <option value="泉州" >泉州</option>
               <option value="厦门" >厦门</option>
               <option value="漳州" >漳州</option>
               <option value="龙岩" >龙岩</option>
               <option value="南平" >南平</option>
               <option value="三明" >三明</option>
               <option value="宁德" >宁德</option>
           </select> 市<br><br>

详细住址：<br><textarea name="" id="textarea" cols="30" rows="5">福建省福州市</textarea><br><br>

           兴趣商品：<br>&emsp;<input type="checkbox" name="" id="" >电子&emsp;
           <input type="checkbox" name="types" id="">家居&emsp;
           <input type="checkbox" name="types" id="">服装<br><br>
           &emsp;<input type="checkbox" name="types" id="">鞋包&emsp;
           <input type="checkbox" name="types" id="">食品&emsp;
           <input type="checkbox" name="types" id="">其他<br><br>
           &emsp;&emsp;&emsp;<input type="submit" value="注册">&emsp;&emsp;&emsp;&emsp;<input type="reset" value="取消"><br><br>
           </form>
       </div>
   </div>
</body>
</html>