HTML javascript 表单 - 我可以通过哪些其他方式使用表单验证来编写这个 javascript 函数

Posted

技术标签:

【中文标题】HTML javascript 表单 - 我可以通过哪些其他方式使用表单验证来编写这个 javascript 函数【英文标题】：HTML javascript form - what other ways can I code this javascript function with form validation 【发布时间】：2021-06-17 21:36:29 【问题描述】：

我编写了以下代码来获取要在页面上显示的表单数据。我可以使用哪些其他方法来重写以下代码以包含表单验证。 我是 javascript 的初学者，只需要一些指导或代码 sn-p 来帮助。

JSFiddle 链接：https://jsfiddle.net/jphfzgdq/

<head>
  <script type="text/javascript">
    function collect(frm)  
    document.getElementById("results").innerhtml+="Name: "+frm.nm.value+"<br>Age: "+frm.ag.value+"<hr>"
    frm.reset();
     
    </script>
  <style>
  /* #entries,#resultsfloat:left */
  </style> 
  </head>
  <body>
  <div id="entries">
  <form name ="myform">
  Enter name: <input type="text" name="nm"/><br>
  Enter age: <input type="text" name="ag"/><br>
  <input type="button" value="display" onclick="collect(this.form)"/>
  </form>
  </div>
  <div id="results"></div>

</body>

【问题讨论】：

【参考方案1】：

我想这就是你想要的

<head>
    <script type="text/javascript">
        var totalAge = 0;
        
        function collect(frm)  
        var name = frm.nm.value;
        var age = parseInt(frm.ag.value);
        
        totalAge += age;
        
        try 
            if (name == "" || name == null) 
            alert('Enter your name');
           
          else if (age == "" || age == null || age == NaN) 
            alert('Enter a valid age');
          
          else 
            document.getElementById("results").innerHTML+="Name: "+ name +"<br>Age: "+ age + "<br>total age: "+ totalAge +"<hr>"
                frm.reset();
          
        
        catch (e) 
         console.log(e);
        
        
         
        </script>
    <style>
    /* #entries,#resultsfloat:left */
    </style> 
    </head>
    <body>
    <div id="entries">
    <form name ="myform">
    Enter name: <input type="text" name="nm"/><br>
    Enter age: <input type="number" name="ag"/><br>
    <input type="button" value="display" onclick="collect(this.form)"/>
    </form>
    </div>
    <div id="results"></div>
  
    </body>

【讨论】：

感谢您的帮助。 还有一个查询是，如果您想获得每次提交表单时输入的年龄数字的总数。即拐角处的运行总数类似于购物车总数@Manu Sampablo @Testing999 我已经进行了必要的更改。它们是：1- 添加总年龄变量 2- 每次提交表单时将年龄添加到 totalAge var 3- 设置年龄 type="number" 而不是 type="text"（在表单中） @Testing999 我正在测试，一切正常，请确保您没有无意中输入字母【参考方案2】：

我只是做了一个简单的年龄验证。

function collect(frm) 
  if (Number(frm.ag.value) >= 18) 
    document.getElementById("results").innerHTML +=
      "Name: " + frm.nm.value + "<br>Age: " + frm.ag.value + "<hr>";
    document.getElementById("warn").textContent = "";
    frm.reset();
   else 
    document.getElementById("warn").textContent =
      "18+ Are only allowed!";
  

#warn 
  color: red;

<div id="entries">
  <form name="myform">
    Enter name: <input type="text" name="nm" /><br> Enter age: <input type="number" name="ag" /><br>
    <input type="button" value="display" onclick="collect(this.form)" />
  </form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>

编辑：

你没有以正确的方式做这件事，所以试图让它变得更好。

const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const btnInput = document.getElementById("btnInput");

const results = document.getElementById("results");
const warn = document.getElementById("warn");
const ageCounter = document.getElementById("totalAgeCounter");

let ageCount = 0;

function collectData() 
  if (nameInput.value !== "" && Number(ageInput.value) >= 18) 
    results.innerHTML += `Name: $nameInput.value <br>Age: $ageInput.value <hr>`;

    ageCount += Number(ageInput.value);
    ageCounter.textContent = ageCount;

    warn.textContent = "";
    nameInput.value = "";
    ageInput.value = "";
   else 
    warn.textContent = "18+ Are only allowed!";
  


btnInput.addEventListener("click", collectData);
#warn 
  color: red;


#totalAgeCounter 
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background-color: blue;
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  border-radius: 50%;
  font-weight: bolder;
  font-size: 18px;

<div id="entries">
  <form name="myform">
    Enter name:
    <input type="text" id="nameInput" />
    <br /> Enter age:
    <input type="number" id="ageInput" />
    <br />
    <input type="button" value="display" id="btnInput" />
  </form>
</div>

<h4 id="warn"></h4>
<div id="results"></div>
<div id="totalAgeCounter"></div>

【讨论】：

感谢您的帮助。还有一个问题是，您是否想在每次提交表单时获取输入的年龄数字的总数。即拐角处类似于购物车总数的运行总数 @Testing999 抱歉回复晚了，我已对上述答案进行了必要的编辑，希望对您有所帮助。现在代码更有条理了。 我能问一下你为什么使用 .textContent @Testing999 如果我们想添加一些HTML，那么我们使用innerHTML，但如果我们只想添加一些文本，我们可以使用textContent。我们可以在textContent的地方使用innerHTML。同样textContent返回元素内的文本，但innerHTML返回带有HTML标签的文本。 @Testing999 这些文章不错：FirstSecond

以上是关于HTML javascript 表单 - 我可以通过哪些其他方式使用表单验证来编写这个 javascript 函数的主要内容，如果未能解决你的问题，请参考以下文章

通过 HTML 表单 + JavaScript 向 MailChimp API 提交 JSON 结构

如何使 PHP 或 JavaScript 生成 HTML 表单

HTML 表单中的 onClick JavaScript 函数

是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？

javascript获取html表单中的值？

如何在没有 JavaScript 的情况下设计可扩展的 HTML 表单？