“21天好习惯”第一期－4-优快云博客

本文链接：https://blog.youkuaiyun.com/xzyYYDS/article/details/120979766

程序创新大会报名表表单验证，运用CSS和JS对页面进行美化。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <style>
       *{
           padding:0;
           margin: 0;

       }
       .a{
           background-color: lightblue;
           width: 630px;
           margin: 0 auto;
           border: solid lightgrey 10px;


       }
       h1{

           color: chocolate;
           font-size: 28px;
       }
       .c{
           background-color:#CCC;

       }


   </style>
   <script>
   function validate(){
       var name=document.getElementById("username").value;
       var msg=document.getElementById("nameMsg");
       if(name==null || name==""){
           msg.innerHTML="用户名不能为空!";
           msg.style.color="red";
           return false;
       }else if(name.length<6){
           msg.innerHTML="用户名长度必须大于6！";
           msg.style.color="red";
           return false;

       }
       msg.innerHTML="用户名可用";
       msg.style.color="green";
       return true;
   }

   function validatepwd(){
       var password1=document.getElementById("password1").value;
       var msg=document.getElementById("pwdMsg");
       if(password1==null || password1==""){
           msg.innerHTML="密码不能为空!";
           msg.style.color="red";
           return false;
       }else if(password1.length<8){
           msg.innerHTML="用户名长度必须大于8！";
           msg.style.color="red";
           return false;
       }
       msg.innerHTML="密码合法";
       msg.style.color="green";
       return true;
   }
   function confirmpwd(){
       var pwd1=document.getElementById("password1").value;
       var pwd2=document.getElementById("password2").value;
       var msg=document.getElementById("pwdMsg2");
       if(pwd1!=pwd2){
           msg.innerHTML="两次输入不一致!";
           msg.style.color="red";
           return false;
       }
       msg.innerHTML="密码合法";
       msg.style.color="green";
       return true;
   }
   function validateGender(){
       var gender=document.getElementById("gender").value;
       if(gender==-1){
           alert("性别为必选项！");
           return false;
       }
       return true;
   }
   function register(){
       return validate()&&validatepwd()&&confirmpwd()&&validateGender();
   }
   </script>
</head>

<body>

   <h1 style="text-align: center">程序创新大会报名表</h1>
   <div class="a">
   <form action="提交.html" method="get" onSubmit="return register()">
       用户名:<input type="text" id="username" placeholder="请输入用户名" οnblur="validate()"/>
           <span id="nameMsg">用户名长度至少6位</span><br/>
       密码:<input type="password" id="password1" placeholder="请输入密码" οnblur="validatepwd()"/>
           <span id="pwdMsg">密码长度至少8位</span><br/>
       确认密码:<input type="password" id="password2" placeholder="请确认密码" οnblur="confirmpwd()" />
           <span id="pwdMsg2">确认密码长度一致</span><br/>
       性别:<select id="gender">
               <option value="-1">请选择性别</option>
               <option value="0">女</option>
               <option value="1">男</option>
       </select>
       <br/>
   年龄:
       <input type="number" name="age" />
       <br />
   毕业学校:
       <input type="text" name="school" />
       <br />
   专业:
       <input type="text" name="major" />
       <br />
   邮箱:
       <input type="email" name="email" />
       <br />
   联系电话:
       <input type="number" name="phone" />
       <br />
   兴趣爱好:
       <br />
       <input type="checkbox" name="hobby" value="swim"/>游泳
       <input type="checkbox" name="hobby" value="sing"/>唱歌
       <input type="checkbox" name="hobby" value="dance"/>跳舞
       <input type="checkbox" name="hobby" value="basketball"/>打篮球 <br/>

        协议:<textarea class="c" rows="20%" cols="70%" readonly="readonlys" disabled="disabled">
           程序创新大会:
       1................
       2.................
       </textarea>
       <br />
       <input type="submit" value="注册" />
       <input type="reset" value="重置" />
       <input type="button" value="按钮" />
       </ form>
           </div>
</body>
</html>

2.jquery 实现省市级联

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
               <script type="text/javascript" src="jquery-1.11.1.js"></script>
   </head>
   <body>
       <select id="province">
           <option>--请选择省份--</option>
           <option value="0">北京</option>
           <option value="1">浙江省</option>
           <option value="2">河北省</option>
           <option value="3">江西省</option>
           </select>
           <select id="city">


           </select>
   </body>

</html>