js表单案例

最新推荐文章于 2022-12-10 10:05:51 发布
最新推荐文章于 2022-12-10 10:05:51 发布
阅读量206 收藏 1
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sosadtoday/article/details/128078488
版权

js表单案例。包括阻止提交的默认行为。添加节点操作以及删除节点操作等等

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="layui/css/layui.css" />

    <!-- 引入 layui.js -->
    <script src="layui/layui.js"></script>
  </head>

  <body>
    <fieldset class="layui-elem-field">
      <legend>要求</legend>
      <div class="layui-field-box">
        1.完成基本布局；有代码注释50%以上，商品类别为优选水果、卤味熟食、饮料酒水、休闲零食四类。<br />
        2.点击提交表单将提交的内容显示在表格的最上面; 提交后清空输入框的内容;
        表单各项不允许为空; 原价，现价，数量必须为数字;<br />
        3.奇数行背景色为白色（white);
        <br />偶数行背景灰为(#FAFAFA)；完成删除功能，点击删除，删除数据
      </div>
    </fieldset>
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
          <input type="text" class="layui-input goodsName" />
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-block">
          <select class="goodsType">
            <option>优选水果</option>
            <option>卤味熟食</option>
            <option>饮料酒水</option>
            <option>休闲零食</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">商品原价</label>
        <div class="layui-input-block">
          <input type="text" class="layui-input marketPrice" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">商品现价</label>
        <div class="layui-input-block">
          <input type="text" class="layui-input shopPrice" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">商品数量</label>
        <div class="layui-input-block">
          <input type="text" class="layui-input goodsNumber" />
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn">立即提交</button>
        </div>
      </div>
    </form>
    <table class="layui-table">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>商品类别</th>
          <th>商品原价</th>
          <th>商品现价</th>
          <th>商品数量</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
</html>
<script>
  // 保存完整数据
  let data = [];
  document.querySelector(".layui-btn").addEventListener("click", (event) => {
    // 阻止默认行为
    event.preventDefault();
    // 阻止默认行为是这样写的，网上哪些是错误的，我曹他妈的。

    // 获取表单的相关信息
    let goodsName = document.querySelector(".goodsName").value;
    let goodsType = document.querySelector(".goodsType").value;
    let marketPrice = Number(document.querySelector(".marketPrice").value);
    let shopPrice = Number(document.querySelector(".shopPrice").value);
    let goodsNumber = Number(document.querySelector(".goodsNumber").value);

    验证商品名称必须填写;
    if (!goodsName) {
      alert("商品名称必须填写");
      return;
    }
    if (isNaN(marketPrice) || isNaN(shopPrice) || isNaN(goodsNumber)) {
      alert("输入的必须是数值");
      return;
    }
    // 添加数据
    data.push({ goodsName, goodsType, marketPrice, shopPrice, goodsNumber });
    showData();
  });
  // 实现删除
  document.querySelector("table").addEventListener("click", (event) => {
    if (event.target.nodeName == "BUTTON") {
      // 获取当前删除这一行在数据中序号
      let index = event.target.dataset.index;
      data.splice(index, 1);
      console.log(data);
      showData();
    }
  });
  function showData() {
    let html = "";
    data.forEach((item, index) => {
      html += `<tr style="background-color:${
        index % 2 == 0 ? "#FAFAFA" : "white"
      }">
                <th>${item.goodsName}</th>
                <th>${item.goodsType}</th>
                <th>${item.marketPrice}</th>
                <th>${item.shopPrice}</th>
                <th>${item.goodsNumber}</th>
                <th><button data-index="${index}">删除</button></th>
            </tr>`;
    });
    document.querySelector("tbody").innerHTML = html;
  }
</script>
Djdhfnfnnf
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS:表单案例（效果图及代码）
weixin_59519449的博客
10-07 548
图上为效果图 以下为代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box>div{ border: 1px solid red; margin: 10px; padding: 10px; } </sty...
js_06 表单案例
weixin_66616840的博客
04-10 518
文章目录1.表单增加功能2.表单删除功能3.表单修改功能4.表单确定功能 1.表单增加功能 获取要操作的表格。 开始增加行：增加的行的位置在表格的倒数第二行，下标：总行数-1。空行 获取表格行目前的最大下标 给新增加的行对象 newRow添加 id属性 往空行里面增加4个列 // 增加行 var myTable = document.getElementById("order"); function addRow(){ var row
JavaScript案例-js表单验证
02-16
JavaScript案例-js表单验证
JS表单验证案例
qq_44241861的博客
10-15 571
首先进行表单的创建：验证时将后台设为# 将post方式变为get方式 设置一个总的检验函数在表单提交进行总校验 定义一个空的span块 用来显示错误提示 用 oninput 来检测输入用户名的格式 边检测边输入 也可以使用onblur 输入完成后再进行判断检测验证 调用checkUsername()函数进行检测 checkUsername()函数内容：通过document.getElementById来获取用户名的value值 (注意 这样返回的结果是String类型) 然后定义用户名的正则表达..
关于表单的三个小案例（js）
weixin_45773503的博客
04-18 337
栗子1：点击 input 的 value 变化 点击前 点击后 <body> <button>按钮</button> <input type="text" value="输入内容"> <script> // 1. 获取元素 var btn = document.querySele...
_JavaScript表单验证实例 js 前端 例子
02-06
_JavaScript表单验证实例 js 前端 例子_JavaScript表单验证实例 js 前端 例子
一个完美的js表单验证案例
10-21
"一个完美的js表单验证案例"利用JavaScript（特别是jQuery库）实现了这一功能，提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少...
JS正则验证注册表单案例
08-02
本案例“JS正则验证注册表单”聚焦于利用JavaScript的正则表达式进行前端验证，主要涉及到手机号码、验证码、身份证号、用户名和密码等常见字段的验证。下面将详细介绍这些知识点。 1. **正则表达式**：正则表达式...
JavaScript1全部表单验证案例
08-04
JavaScript 全部表单验证案例 本文将详细讲解 JavaScript 实现的表单验证案例，涵盖了多种常见的验证规则，包括长度限制、汉字、英文、数字、英文字符和数字、邮箱格式、关键字屏蔽、两次输入密码是否相同等。 1. ...
500套JavaScript小案例
05-11
案例可能包含从服务器获取数据、提交表单、实时更新内容等应用场景。 4. **DOM操作**：文档对象模型（DOM）是HTML和XML文档的结构表示。JavaScript通过DOM API可以查找、修改、添加或删除页面元素。案例中会涉及...
js实现todolist总结
Hello，this is cirzear
06-06 3502
首先在网页布局设置好的情况下，进行js文件的编写，要求实现增加，删除，和实时变化，其实这都可以在存在浏览器的本地存储中。下面先列出我的html页面及css文件内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表</title> ...
javascript实现todolist(基于本地存储)
m0_64288219的博客
11-04 563
点击单选框，实现切换任务的完成与未完成状态（未完成在上方，已完成在下方）todolist可以实现点击上方输入框添加任务。任务上方数字显示未完成任务和已完成任务的数量。点击清除任务，会清除任务以及本地存储中的数据。点击计时器，实现倒计时效果。
web大学生网页作业成品 响应式网站水果超市7页(html+css+javascript+jquery+bootstarp)
网页设计与制作
12-10 1682
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
java源文件基本布局结构_请调试课本 “第117页”5.4.1节 菜单资源 的代码， 并将程序运行的屏幕截图 和 核心源代码的截图（布局文件，菜单资源文件，Java文件，程序结构图等）提交。...
weixin_39889597的博客
02-28 327
【单选题】EAN/UCC-13代码的结构有( )个层次【判断题】我国的商品标准按其适用范围可分为国家标准、区域标准、行业标准、地方标准、企业标准五级。 (5.0分)【判断题】GBP 49 per piece FOB Hamburg less 2% discount【判断题】商品质量管理主要包括两个方面:微观质量管理和宏观质量管理。 (5.0分)【填空题】商品标识代码是____________ ...
2021.3.24
weixin_56143175的博客
03-25 1825
给定四种商品，分别是薯片(crisps)、爆米花(popcorn)、巧克力(chocolate)和可乐(cola)，单价分别对应为3.0元/公斤、2.5元/公斤、4.0元/公斤、3.5元/份。 首先在屏幕上显示以下菜单： [1] crisps [2] popcorn [3] chocolate [4] cola [0] exit 用户可以输入编号1~4查询对应食品的单价。当连续查询次数超过5次时，程序应自动退出查询；不到5次而用户输入0即退出；输入其他编号，显示价格为0。 输入格式: 输入在一行中给出用户连
提交form后，清空form内input值
热门推荐
b809220024的博客
06-17 2万+
经常要用到的一个功能，新增一行数据，但是新增完成后，原来填的值会继续留在上面。 比如下图的tt，第二次打开依旧存在 jquery下，用form表单提交$(‘#form’).submit()那么，就可以简单的用$(‘#form’).reset() 不过我用ajax提交的时候没用form的表单提交功能，所以想了想，手动清除$("#form_sample_eventAdd input").val
js表单全选和取消案例
最新发布
01-08
以下是一个JavaScript实现表单全选和取消的案例： ```javascript // 获取全选复选框元素 var selectAllCheckbox = document.getElementById("selectAll"); // 获取所有子复选框元素 var checkboxes = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值