web实验四表单处理实验

矫情吗；* 2024-04-17 11:47 63阅读 0赞

> #### 实验原理 ####
> 
> 通过jQuery实现修改HTML标签属性，完成网页的动态显示效果，理解JavaScript语法、动态页面的实现原理、基本设计思想及实现方法。
> 
> #### 实验目的 ####
> 
> 理解并掌握基于id、class、name等HTML属性选择器的实现方法  
> 理解并掌握控制disabled、checked、hidden等HTML标签元素属性值的方法  
> 理解并掌握控制if、for等基本语法的使用  
> 理解并掌握HTML基本事件方法  
> 理解并掌握jQuery中css选择器，jQuery选择的使用方法  
> 理解并掌握jQuery基本事件监听方法  
> 理解并掌握Callback回调方法的作用、意义  
> 理解并掌握定义回调的匿名方法的实现方法  
> 理解并掌握基本jQuery基本动画效果的实现方法
> 
> #### 实验内容 ####
> 
> 创建maven Web项目及模块，experiment-04，项目打包类型为war
> 
> #### 需求+设计提示 ####
> 
> **需求+1**  
> 必须同意协议，方可填写注册表单  
> 用户名必须大于等于6位，否则弹出警告框  
> 未来意向，支持取消选中的单选框  
> 喜欢的课程，能且仅能选择2项  
> 当用户名大于等于6字符，喜欢的课程小于等于2项时，不可提交表单
> 
> ![6c7a2722ce3db8da512e44713f1a6530.png][]
> 
> **解决方案**  
> 协议，对多个元素实现同时的disabled/abled元素状态。  
> 实现思路：初始化时，基于jquery将表单内所有输入域禁用，协议复选框选中结果， 与表单内除提交按钮以外的全部元素禁用状态绑定。Form表单没有disabled属性。
> 
> 用户名，监听值改变事件判断用户输入长度。
> 
> 课程，判断数量，disabled/abled部分元素。实现思路：监听checkbox组的点击事件， 判断选中状态数量与设定数量关系，注意使用合适的选择器。
> 
> 提交按钮，当符合2个条件时，按钮可用。实现思路：为2个条件声明判断标识， 在元素事件监听中改变标识值，监听指定元素值改变事件，判断标识。
> 
> 动态添加地址，动态在列表中添加元素。实现思路：监听button click事件， 创建不显示的元素对象，追加至列表底端，添加滑动动画效果
> 
> **需求+1**  
> 输入地址后，点击添加地址按钮，将输入信息动态添加至列表
> 
> **需求+1**  
> 意向，再次点击radio时取消radio的选中状态。
> 
> **实现思路**  
> 添加HTML隐藏输入框，用于存放单选框值，点击单选框时判断值是否与隐藏域相等；  
> 不相等，则为第一次点击，将单选框值赋给隐藏框，  
> 相等，则为第二次点击，置被点击单选框为未选中状态，重置隐藏域值
> 
> 无法基于radio checked状态判断，因为每次点击radio时该radio均为checked状态

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <h1>注册</h1>
    <label>
      <input type="checkbox" id="legal">我已阅读相关说明并遵守相关法律</label>
    <form id="register">
      <div>
        用户名:
        <input type="text" name="username">
        <br> 未来意向：
        <label><input type="radio" name="purp" value="1">Java工程师</label>
        <label><input type="radio" name="purp" value="2">测试工程师</label>
        <label><input type="radio" name="purp" value="3">前端工程师</label>
        
        <input type="hidden" name="purpose">
        <br>
        <br> 请从以下课程中选择2项最喜欢的课程
        <ul>
          <li>
            <label>
              <input type="checkbox" name="courses">Web开发技术
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="courses">软件项目管理
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="courses">数据库原理
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="courses">系统分析与设计
            </label>
          </li>
        </ul>
        地址：
        <ul id="ul_address">
        </ul>
        <input name="address">
        <button type="button" id="button_address">添加地址</button>
        <br>
      </div>
      <button type="submit">提交</button>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function (){
        var usernameValid = false;
        var coursesValid = false;
        // 初始化时，禁用表单内所有输入域
        $("#register :input").not("#legal").prop("disabled",true);
        //协议复选框选中结果，与表单内除提交按钮以外的全部元素禁用状态绑定
        $("#legal").on("change",function (){
          $("#register :input").not("#legal,:submit").prop("disabled",!this.checked);
        });
        /* 去空格后，判断输入长度 */
       $("[name=username]").change(function (){
          var len = $(this).val().trim().length;
          if(len < 6){
            usernameValid = false;
            alert("用户名长度必须大于等于6")
          }
          else{
            usernameValid = true;
          }
        });
        // 未来意向，支持取消选中的单选框
        $("[name=purp]").on("click",function (){
          var val = $(this).val();
          var hidden = $("[name=purpose]");
          if(val == hidden.val()){
            $(this).prop("checked", false);
            hidden.val("");
          }
          else{
            hidden.val(val);
          }
        });
        $("[name=courses]").on("change", function(){
          var checked = $("[name=courses]:checked");
          var len = checked.length;
          if(len >= 2){
            // 超过2项，禁用未选中的复选框
            $("[name=courses]:not(:checked)").prop("disabled", true);
            coursesValid = true;
    
          }else{
            // 小于等于2项，启用所有复选框
            $("[name=courses]").prop("disabled", false);
            coursesValid = false;
          }
        });
        // 当用户名大于等于6字符，喜欢的课程小于等于2项时，不可提交表单
        $("input[name=username], input[name=courses]").change(() => {
          let dis = usernameValid && coursesValid;
          // 当2个状态均符合规范时，提交按钮可用
          $("button:submit").prop("disabled", !dis);
        });
      });
    
      // 输入地址后，点击添加地址按钮，将输入信息动态添加至列表
      /* 方法一
    $("#button_address").on("click", function(){
       var address = $("[name=address]").val();
       if(address){
    
         var li = $("<li>").text(address).hide();
         //使用 $("<li>") 创建一个 li 元素的 jQuery 对象。
        // 使用 .text(address) 方法为这个对象设置文本内容为 address 变量的值。
       // 使用 .hide() 方法为这个对象设置 display 属性为 none，使其不可见。
         // 追加至列表底端，并添加滑动动画效果
         $("#ul_address").append(li).find(":last").slideDown();
         // 清空地址输入框的值
         $("[name=address]").val("");
       }
     });
     */
      /* 方法二 */
      $("#button_address").click(() => {
        let input = $("input[name=address]");
        let item = $(`<li>${input.val()}</li>`);
        input.val("");
        item.css("display", "none");
        $("#ul_address").append(item);
        item.fadeIn(1000);
        // 使用 .fadeIn(1000) 方法为 item 对象添加一个渐显的动画效果，使其从不可见变为可见。
      });
    </script>
    </body>
    </html>

![445ed268fa4743aebc6863645f6ab2d8.png][]

[6c7a2722ce3db8da512e44713f1a6530.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/6bd61c09c66c441faec60906bcb41837.png
[445ed268fa4743aebc6863645f6ab2d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/516aab1c1cb44b238a776a061c746bb6.png