devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Gausst松鼠会 | 2024-04-21 10:00:41

赞

踩

javaweb html简单页面实验博客

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

实现用户登录功能

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

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

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

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

源代码附上：

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.      <title>用户注册</title>
  5.      <script type="text/javascript">
  6.         function checkForm(){
  7.             if(checkName()||checkPassword()||checkPasswords()||checkEmail()||checkTel()||checkTrueName()||checkProvince()){
  8.                alert("您填写信息有误，请重新检查");
  9.                return false;
  10.             }      
  11.         }
  12.         
  13.         function checkName(){
  14.             var username=document.getElementById("userName").value;
  15.             if(username.length<3||username.length>5){
  16.                 document.getElementById("span_username").innerHTML="<em style = 'color:#EF0000'>用户名由3-5个字符组成</em>";
  17.                 document.getElementById("userName").focus();
  18.                 return 1;
  19.                 }
  20.             else{
  21.                document.getElementById("span_username").innerHTML = "<em style = 'color:#008000'>用户名符合要求</em>";
  22.                return 0;
  23.             }         
  24.         }
  25.         
  26.         function checkPassword() {
  27.          var password = document.getElementById("password").value;
  28.          if (password.length<8 || password.lenth>12) {
  29.             document.getElementById("span_password").innerHTML = "<em style = 'color:#EF0000'>请输入8-12位密码</em>";
  30.             document.getElementById("password").focus();
  31.             return 1;
  32.          } 
  33.          else{
  34.             document.getElementById("span_password").innerHTML = "<em style = 'color:#008000'>密码符合要求</em>";
  35.             return 0;
  36.          }
  37.         }
  38.         
  39.         function checkPasswords(){
  40.           var password = document.getElementById("password").value;
  41.           var pwdRept = document.getElementById("passwords").value;
  42.           if (pwdRept != password) {
  43.              document.getElementById("span_passwords").innerHTML = "<em style = 'color:#EF0000'>两次密码不一致</em>";
  44.              document.getElementById("passwords").focus();
  45.              return 1;
  46.           }else{
  47.             document.getElementById("span_passwords").innerHTML = "<em style = 'color:#008000'>两次密码一致</em>";
  48.             return 0;
  49.           }
  50.         }
  51.         
  52.         function checkEmail() {
  53.          var email = document.getElementById("email").value;
  54.          var pattern = /^[a-zA-Z0-9#_\^\$\.\+\-\?\=\!\|\:\\\/\(\)\[\]\{\}]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
  55.          if (email.length == 0 || !pattern.test(email)) {
  56.             document.getElementById("span_email").innerHTML = "<em style = 'color:#EF0000'>格式示例:xxxxxxxx@163.com</em>";
  57.             document.getElementById("email").focus();
  58.             return 1;
  59.          }else{
  60.           document.getElementById("span_email").innerHTML = "<em style = 'color:#008000'>邮箱格式正确</em>";
  61.           return 0;
  62.          }     
  63.         }
  64.  
  65.         function checkTel() {
  66.          var tel = document.getElementById("phonenumber").value;
  67.          if (tel.length!=11) {
  68.             document.getElementById("span_phonenumber").innerHTML = "<em style = 'color:#EF0000'>格式示例:13800154200</em>";
  69.             document.getElementById("phonenumber").focus();
  70.             return 1;
  71.          } else{
  72.             document.getElementById("span_phonenumber").innerHTML = "<em style = 'color:#008000'>电话号码格式正确</em>";
  73.             return 0;
  74.           }    
  75.         }
  76.  
  77.         function checkTrueName() {
  78.          var name = document.getElementById("trueName").value;
  79.          var true_reg = /^[\u4e00-\u9fa5]{2,5}$/;
  80.          if (!true_reg.test(name)) {
  81.             document.getElementById("span_truename").innerHTML = "<em style = 'color:#EF0000'>由2-5个中文组成</em>";
  82.             document.getElementById("trueName").focus();
  83.             return 1;
  84.          }else{
  85.            document.getElementById("span_truename").innerHTML = "<em style = 'color:#008000'>真实姓名符合要求 </em>";
  86.            return 0;
  87.          }        
  88.         }
  89.         function checkProvince() {
  90.          var pve = document.getElementById("province").value;
  91.          if (pve.length < 1 || pve == "0"){
  92.            document.getElementById("span_province").innerHTML = "<em style = 'color:#EF0000'>请选择省份</em>";
  93.            return 1;
  94.          }    
  95.          else{
  96.            document.getElementById("span_province").innerHTML = "<em style = 'color:#008000'>请选择省份</em>";
  97.            return 0;
  98.          }    
  99.         }
  100.      </script>
  101.    </head>
  102.    <body>
  103.      <h1 align="center" ><font color="blue" size=7 >用户注册</font></h1>
  104.      <form onSubmit="checkForm()">
  105.        <table align="center">
  106.         <tr>
  107.            <td align="right">*用户名：</td>
  108.            <td><input type="text" id="userName" placeholder="请输入你的用户名" onblur="checkName()"/></td>
  109.            <td><span id="span_username">用户名由3-5个字符组成</span></td>
  110.         </tr>
  111.         <tr>
  112.            <td align="right">*密码：</td>
  113.            <td><input type="password" id="password" placeholder="请输入你的密码" onblur="checkPassword()"/></td>
  114.            <td><span id="span_password">请输入8-12位密码</span></td>
  115.         </tr>
  116.         <tr>
  117.            <td align="right">*确认密码：</td>
  118.            <td><input type="password" id="passwords" placeholder="请再次输入密码" onblur="checkPasswords()"/></td>
  119.            <td><span id="span_passwords">两次密码不一致</span></td>
  120.         </tr>
  121.         <tr>
  122.            <td align="right">*Email：</td>
  123.            <td><input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()"/></td>
  124.            <td><span id="span_email">格式示例:xxxxxxxx@163.com</span></td>
  125.         </tr>
  126.         <tr>
  127.            <td align="right">*电话号码：</td>
  128.            <td><input type="text" id="phonenumber" placeholder="请输入电话号码" onblur="checkTel()"/></td>
  129.            <td><span id="span_phonenumber">示例：15136303890</span></td>
  130.         </tr>
  131.         <tr>
  132.            <td align="right">*真实姓名：</td>
  133.            <td><input type="text" id="trueName" placeholder="请输入你的真实姓名" onblur="checkTrueName()"/></td>
  134.            <td><span id="span_truename">由2-5个汉字组成</span></td>
  135.         </tr>
  136.         <tr>
  137.            <td align="right">*省份：</td>
  138.            <td><select id="province" onChange="checkProvince()">
  139.               <option value="0">--请选择--</option>
  140.               <option value="河南">河南</option>
  141.               <option value="重庆">重庆</option>
  142.               <option value="江苏">江苏</option>
  143.               <option value="黑龙江">黑龙江</option>
  144.               <option value="北京">北京</option>
  145.               <option value="陕西">陕西</option>
  146.               </select><span id="span_province">请选择省份</span></td> 
  147.         </tr>
  148.       </table>
  149.      <div align="center">  
  150.         *技术方向：<input type="radio" name="major" value="Java">Java
  151.                    <input type="radio" name="major" value="net">.Net
  152.                    <input type="radio" name="major" value="both">PHP
  153.                    <input type="radio" name="major" value="html">网页
  154.                    <input type="radio" name="major" value="ios">IOS
  155.                    <input type="radio" name="major" value="android">Android<br/>
  156.                    <input type="submit" value="注册" />
  157.                    <input type="reset" value="重置">
  158.        </div>
  159.      </form>
  160.    </body>
  161. </html>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/462399
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号