javascript 验证数字和字符串的文本框

Question

我需要一些有关此 javascript 代码的帮助。我想验证 Nights tax box 和 name text box，所以它们有一个值。夜间文本框只能接受数字。

这是我的代码

$(document).ready(function() {
    
    var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
    //var numeric =  /^[0-9]+$/;
    var regex = /[0-9]|\./;
        
        $(":text, #error").after("<span>*</span>");
        $("arrival_date").focus();
        
    $(document).on("click", "#submit", function (e) {
        
        var valid = true;
        
        if ($("#name").val() === "") {
            $("#name").next().text("This field is required.").css({
                "color": "#FF0000",
                "font-size": "13px"
            });
            valid = false;
        }
        else {
            
            valid = true;
        }
        
        if ($("#nights").val() === "") {
            valid = false;
            $("#nights").next().text("This field is required.").css( {
                "color": "#FF0000",
                "font-size": "13px"
            });
        } else if (!regex.test("nights")) {
            $("#nights").next().text("This field is required.").css( {
                "color": "#FF0000",
                "font-size": "13px"
            });
            valid = false;
        }
        else {
            valid = true;
        }
ad

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Reservation request</title>
 <link rel="stylesheet" href="main.css">
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="reservation.js"></script>
</head>
 
<body>
 <h1>Reservation Request</h1>
 <form action="response.html" method="get"
     name="reservation_form" id="reservation_form">
  <fieldset>
         <legend>General Information</legend>
         <label for="arrival_date">Arrival date:</label>
         <input type="text" name="arrival_date" id="arrival_date" autofocus><br>
         <label for="nights">Nights:</label>
         <input type="text" name="nights" id="nights"><br>
         <label>Adults:</label>
         <select name="adults" id="adults">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>                              
         </select><br>
         <label>Children:</label>
         <select name="children" id="children">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>                              
         </select><br>         
  </fieldset>
  <fieldset>
         <legend>Preferences</legend>
         <label>Room type:</label>
   <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp;          
   <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp;
   <input type="radio" name="room" id="suite" class="left last">Suite<br>
         <label>Bed type:</label>
   <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp;
   <input type="radio" name="bed" id="double" class="left last">Double Double<br>
   <input type="checkbox" name="smoking" id="smoking">Smoking<br>
  </fieldset>  
  <fieldset>
      <legend>Contact Information</legend>
      <label for="name">Name:</label>
   <input type="text" name="name" id="name"><br>
         <label for="email">Email:</label>
         <input type="text" name="email" id="email"><br>
   <label for="phone">Phone:</label>
   <input type="text" name="phone" id="phone" placeholder="999-999-9999"><br>
  </fieldset>

  <input type="submit" id="submit" value="Submit Request"><br>

 </form>
</body>
</html>

UPDATED Code.

$(document).ready(function() {

var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
//var numeric =  /^[0-9]+$/;
var regex = /[0-9]|\./;

    $(":text, #error").after("<span>*</span>");
    $("arrival_date").focus();


function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
} 
$(document).on("click", "#submit", function (e) {

    var valid = true;

    if ($("#name").val() === "") {
        $("#name").next().text("This field is required.").css({
            "color": "#FF0000",
            "font-size": "13px"
        });
        valid = false;
    }

    if ($("#nights").val() === "") {
        valid = false;
        $("#nights").next().text("This field is required.").css( {
            "color": "#FF0000",
            "font-size": "13px"
        });
    } else if (isNumeric("#nights")) {
        $("#nights").next().text("This field is required.").css( {
            "color": "#FF0000",
            "font-size": "13px"
        });
        valid = false;
    }

     if (valid === false)
         e.preventDefault();

});        });

我希望有人能帮助我

Answer 1

您可以使用现有函数来检查输入是否为数字（取自 here）：

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

你可以使用 HTML5's input type number:

<input type="number" min="1" max="5">

您当前的正则表达式将不起作用，因为它对包含任何类型数字的任何字符串都 return 为真，这不是预期的行为。

您对变量 valid 的使用也不正确：正如您现在的代码一样，如果 #nights 得到正确验证，您的表单输入将 return 有效 - 它将忽略您输入姓名的结果。

javascript 验证数字和字符串的文本框

javascript validate text box for numeric and string

javascript

jquery

netbeans-8