Java Web实验（一） HTML 应用_javaweb html简单页面实验博客-CSDN博客

本文链接：https://blog.csdn.net/qq_55384949/article/details/127310275

一.实验内容编写一个用户注册界面。

实现用户登录功能

1、登录页面设计实现一个用户注册页面，使用表单进行提交。页面应包含的元素如图 2-1 所示，注意选取适当的输入元素类型，并对其命名；表单的 action 属性课设置为空。

图 2-1 用户注册页面元素

2、实现用户输入信息的校验利用 JavaScript 或者 jQuery 等完成页面元素合法性的校验，例如当用户输入的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离开姓名框则后面的文字变为绿色。

图 2-2 输入合法性校验当用户点击“注册按钮”时，仍能够对页面中的元素的合法性进行校验。

源代码附上：

<!DOCTYPE html>
<html>
   <head>
     <title>用户注册</title>
     <script type="text/javascript">
        function checkForm(){
            if(checkName()||checkPassword()||checkPasswords()||checkEmail()||checkTel()||checkTrueName()||checkProvince()){
               alert("您填写信息有误，请重新检查");
               return false;
            }      
        }
        
        function checkName(){
            var username=document.getElementById("userName").value;
            if(username.length<3||username.length>5){
                document.getElementById("span_username").innerHTML="<em style = 'color:#EF0000'>用户名由3-5个字符组成</em>";
                document.getElementById("userName").focus();
                return 1;
                }
            else{
               document.getElementById("span_username").innerHTML = "<em style = 'color:#008000'>用户名符合要求</em>";
               return 0;
            }         
        }
        
        function checkPassword() {
         var password = document.getElementById("password").value;
         if (password.length<8 || password.lenth>12) {
            document.getElementById("span_password").innerHTML = "<em style = 'color:#EF0000'>请输入8-12位密码</em>";
            document.getElementById("password").focus();
            return 1;
         } 
         else{
            document.getElementById("span_password").innerHTML = "<em style = 'color:#008000'>密码符合要求</em>";
            return 0;
         }
        }
        
        function checkPasswords(){
          var password = document.getElementById("password").value;
          var pwdRept = document.getElementById("passwords").value;
          if (pwdRept != password) {
             document.getElementById("span_passwords").innerHTML = "<em style = 'color:#EF0000'>两次密码不一致</em>";
             document.getElementById("passwords").focus();
             return 1;
          }else{
            document.getElementById("span_passwords").innerHTML = "<em style = 'color:#008000'>两次密码一致</em>";
            return 0;
          }
        }
        
        function checkEmail() {
         var email = document.getElementById("email").value;
         var pattern = /^[a-zA-Z0-9#_\^\$\.\+\-\?\=\!\|\:\\\/\(\)\[\]\{\}]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
         if (email.length == 0 || !pattern.test(email)) {
            document.getElementById("span_email").innerHTML = "<em style = 'color:#EF0000'>格式示例:xxxxxxxx@163.com</em>";
            document.getElementById("email").focus();
            return 1;
         }else{
          document.getElementById("span_email").innerHTML = "<em style = 'color:#008000'>邮箱格式正确</em>";
          return 0;
         }     
        }

        function checkTel() {
         var tel = document.getElementById("phonenumber").value;
         if (tel.length!=11) {
            document.getElementById("span_phonenumber").innerHTML = "<em style = 'color:#EF0000'>格式示例:13800154200</em>";
            document.getElementById("phonenumber").focus();
            return 1;
         } else{
            document.getElementById("span_phonenumber").innerHTML = "<em style = 'color:#008000'>电话号码格式正确</em>";
            return 0;
          }    
        }
 
        function checkTrueName() {
         var name = document.getElementById("trueName").value;
         var true_reg = /^[\u4e00-\u9fa5]{2,5}$/;
         if (!true_reg.test(name)) {
            document.getElementById("span_truename").innerHTML = "<em style = 'color:#EF0000'>由2-5个中文组成</em>";
            document.getElementById("trueName").focus();
            return 1;
         }else{
           document.getElementById("span_truename").innerHTML = "<em style = 'color:#008000'>真实姓名符合要求 </em>";
           return 0;
         }        
        }
        function checkProvince() {
         var pve = document.getElementById("province").value;
         if (pve.length < 1 || pve == "0"){
           document.getElementById("span_province").innerHTML = "<em style = 'color:#EF0000'>请选择省份</em>";
           return 1;
         }    
         else{
           document.getElementById("span_province").innerHTML = "<em style = 'color:#008000'>请选择省份</em>";
           return 0;
         }    
        }
     </script>
   </head>
   <body>
     <h1 align="center" ><font color="blue" size=7 >用户注册</font></h1>
     <form onSubmit="checkForm()">
       <table align="center">
        <tr>
           <td align="right">*用户名：</td>
           <td><input type="text" id="userName" placeholder="请输入你的用户名" onblur="checkName()"/></td>
           <td><span id="span_username">用户名由3-5个字符组成</span></td>
        </tr>
        <tr>
           <td align="right">*密码：</td>
           <td><input type="password" id="password" placeholder="请输入你的密码" onblur="checkPassword()"/></td>
           <td><span id="span_password">请输入8-12位密码</span></td>
        </tr>
        <tr>
           <td align="right">*确认密码：</td>
           <td><input type="password" id="passwords" placeholder="请再次输入密码" onblur="checkPasswords()"/></td>
           <td><span id="span_passwords">两次密码不一致</span></td>
        </tr>
        <tr>
           <td align="right">*Email：</td>
           <td><input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()"/></td>
           <td><span id="span_email">格式示例:xxxxxxxx@163.com</span></td>
        </tr>
        <tr>
           <td align="right">*电话号码：</td>
           <td><input type="text" id="phonenumber" placeholder="请输入电话号码" onblur="checkTel()"/></td>
           <td><span id="span_phonenumber">示例：15136303890</span></td>
        </tr>
        <tr>
           <td align="right">*真实姓名：</td>
           <td><input type="text" id="trueName" placeholder="请输入你的真实姓名" onblur="checkTrueName()"/></td>
           <td><span id="span_truename">由2-5个汉字组成</span></td>
        </tr>
        <tr>
           <td align="right">*省份：</td>
           <td><select id="province" onChange="checkProvince()">
              <option value="0">--请选择--</option>
              <option value="河南">河南</option>
              <option value="重庆">重庆</option>
              <option value="江苏">江苏</option>
              <option value="黑龙江">黑龙江</option>
              <option value="北京">北京</option>
              <option value="陕西">陕西</option>
              </select><span id="span_province">请选择省份</span></td> 
        </tr>
      </table>
     <div align="center">  
        *技术方向：<input type="radio" name="major" value="Java">Java
                   <input type="radio" name="major" value="net">.Net
                   <input type="radio" name="major" value="both">PHP
                   <input type="radio" name="major" value="html">网页
                   <input type="radio" name="major" value="ios">IOS
                   <input type="radio" name="major" value="android">Android<br/>
                   <input type="submit" value="注册" />
                   <input type="reset" value="重置">
       </div>
     </form>
   </body>
</html>

注：其中的focus事件，一旦你选中一个输入框，在输入正确之前不能对其他输入框进行编辑。