验证表单编号类型 Javascript答案

【问题标题】：Validating Form Number Type Javascript验证表单编号类型 Javascript
【发布时间】：2013-09-19 09:25:06
【问题描述】：

您好，我遇到了这个问题。在我的 html 代码中，我似乎无法验证我的输入类型“数字”。我已经使用此代码尝试验证它，但它不起作用

function validateForm()
{
var x=document.forms["form_name"]["number_name"].value;
if (x==null || x=="")
  {
  alert("The following must be filled out");
  return false;
  }
}

我从验证输入类型“文本”而不是数字的网站获取此代码。我正在尝试对我的完整 html 代码实施有效的“数字”验证。顺便说一句，这是我的表单示例：

<form action = "test.php" method = "post" onsubmit = "return validateForm()" name ="form_name">
<input type = "number" min = "0" placeholder = "0" name = "number_name" size = "2"/>

我想知道是否可以使用上面的 javascript valdiation 来验证数字形式，或者有没有更简单的方法。

*深入 * 我为我的第一个问题制作了一个快速的 html 代码，并制作了多种形式的“数字”。它不完整......我决定在实现整个表单的代码之前测试一个“数字” 到目前为止，这是我的代码：

<html>
    <head>
    <script language="javascript">
    function validateForm()
    {
    var x=document.forms["order"]["cappuccino_qty"].value;
    if (x >= 0 || x < 0);
    {
    alert("The following must be filled out");
    return false;
    }
    }
    </script>   
    <body>              
    <form action = "test.php" method = "post" onsubmit = "return validateForm()" name ="order">
                <label class = "field" for = "Cappucino">Cappuccino
                <input type = "number" min = "0" placeholder = "$3.75" name = "cappuccino_qty" size = "2"/><br>
                <label class = "field" for = "Espresso">Espresso
                <input type = "number" min = "0" placeholder = "$3.00" name = "espresso_qty" size = "2"/><br>
                <label class = "field" for = "Double Espresso">Double Espresso
                <input type = "number" min = "0" placeholder = "$4.25" name = "double_espresso_qty" size = "2"/><br>
                <label class = "field" for = "Flat White">Flat White
                <input type = "number" min = "0" placeholder = "$3.75" name = "flat_white_qty" size = "2"/><br>
                <label class = "field" for = "Latte">Latte  
                <input type = "number" min = "0" placeholder = "$3.50" name = "latte_qty" size = "2"/><br>
                <label class = "field" for = "Ice Coffee">Ice Coffee
                <input type = "number" min = "0" placeholder = "$2.50" name = "ice_qty" size = "2"/><br>
                <input type = "submit" value = "submit" name = "submit"/>
                <p>
       </form>
       </body>  
       </head>
       </Html>

【问题讨论】：

if (!/^\d+$/.test(x)) {...}
你从来没有调用函数来做检查，这就是代码失败的原因。

标签： javascript html validation

【解决方案1】：

改变

if (x==null || x=="")

到

if (/[^\d\.]/.test(x))

检查任何非数字或句点字符（假设您希望允许小数）。

[编辑]

查看更新的小提琴：http://jsfiddle.net/5UxGp/1/

【讨论】：

它确实有效 - 在控制台中尝试：if (/[^\d\.]/.test("asd")) alert('not num');
x 代表什么？
我试过你的代码，它有效！但是我现在唯一的问题是，即使“数字”有一个值，它也会给我一个警报弹出...对不起，我对 Javascript 真的很陌生
使用我的代码，只有当值包含除数字和点以外的字符时，警报才会触发。如果您遇到奇怪的行为，请设置一个 JS Fiddle。
您需要研究诸如事件绑定和字符串与变量之类的概念（您将“x”放在引号中，这意味着它将作为字符串进行测试，而不是 x 变量。请参阅我的更新小提琴。jsfiddle.net/5UxGp/1

【解决方案2】：

一个简单的方法

function validateForm()
{
var x=document.forms["form_name"]["number_name"].value;
if (!(x >= 0) || !(x < 0))
  {
  alert("The following must be filled out");
  return false;
  }
}

顺便说一句，如果 0 在您的表单中是最小值

 function validateForm()
    {
    var x=document.forms["form_name"]["number_name"].value;
    if (!(x >= 0))
      {
      alert("The following must be filled out");
      return false;
      }
    }

【讨论】：

如果没问题请返回true

【解决方案3】：

您只测试变量是否为空或空，但是当您在其上输入字符时，它会跳出您的 if 语句。尝试使用此功能。如果需要，请参阅此处的参考：Validate decimal numbers in JavaScript - IsNumeric()。希望对您有所帮助。

function isNumber(x) {
    return !isNaN(parseFloat(x)) && isFinite(x);
}

【讨论】：