领域接受一切!如何限制字段接受的数据类型?

时间:2015-02-03 04:41:28

标签: jquery ajax

我有一个错误,我的学生ID字段接受所有内容,包括字符串,它应该只接受整数如何修复此错误,所以我真的不知道如何限制字段学生ID接受的数据类型。是否有可以使用的API或......?

这是HTML CODE:

   <!DOCTYPE HTML>
        <html>
          <form>
            <h1>
              Waiting list for classes
            </h1>
            <body>
              <br>
              <form>
                First Name 
                <input type="text" name="first ">
                <br>
                <br>
                Last Name 
                <input type="text" name="last ">
                <br>
                <br>
                Student ID number 
                <input type="text" name="last ">
                <br>
                <br>
                E-mail: 
                <input type="email" name="email">
                <br>
                <br>
              </br>
              Phone number: 
              <input type="text" name="Phone">
              <br>
              <br>
              Which course's waiting list would you like to join? 
              <select>
                <option value="Visa">
                  CSE 430
                </option>
                <option value="American express">
                  CSE 328
                </option>
                <option value="Discover">
                  CSE 456
                </option>
                <option value="MasterCard">
                  CSE 786
                </option>
                <option value="American express">
                  CSE 987
                </option>
                <option value="Discover">
                  CSE 775
                </option>
                <option value="MasterCard">
                  CSE 342
                </option>
                <option value="American express">
                  CSE 222
                </option>
                <option value="Discover">
                  CSE 134
                </option>
                <option value="MasterCard">
                  CSE 364
                </option>
              </select>
              <br>
            </br>
            Have you ever been on a course's waiting list?
            <br>
          </br>
          <input type="radio" name="Phone" value="no" id="phone_no"/>
          YES
          <br>
          <input type="radio" name="Phone" value="yes" id="phone_yes"/>
          NO, this is the first time
          <br/>
          <br/>
          <button onclick="myFunction()">
            Submit Request
          </button>
          <script>
            function myFunction() {
              alert("Thank you very much for your submission, we will process your request!");
            }
          </script>
          <br>
        </br>
        <br>
        </br>
        <!--color 
        <input type="text" name="Color ">
        <br>
        -->
        <!-- chooser 
        <input type="color" name="chooser-inp">
        <br>
        -->
        <!-- Birthday: 
        <input type="date" name="bday">
        <br>
        -->
        <!--Birthday (date and time): 
        <input type="datetime" name="bdaytime">
        <br>
        -->
        <!-- Birthday (date and time): 
        <input type="datetime-local" name="bdaytime">
        <br>
        -->
        <!-- E-mail: 
        <input type="email" name="email">
        <br>
        -->
        <!--    Birthday (month and year): 
        <input type="month" name="bdaymonth">
        <br>
        -->
        <!-- Quantity (between 1 and 5): 
        <input type="number" name="quantity" min="1" max="5">
        <br>
        -->
        <!--Points:
        <input type="range" name="points" min="1" max="10">
        10
        <br>
        -->
        <!--Search Google: 
        <input type="search" name="googlesearch">
        <br>
        -->
        <!--    Select a time: 
        <input type="time" name="usr_time">
        <br>
        -->
        <!-- Add your homepage: 
        <input type="url" name="homepage">
        <br>
        -->
        <br>
        </br>
        <br>
        </br>
        
        </form>
        </body>
        </html>
        </body>
        </html>
        <br>
        </br>
        
        </form>
        </body>
        </html>

2 个答案:

答案 0 :(得分:0)

<强> HTML

Student Id : <input type="text" id="student_id" />

<强>的jQuery

$("#student_id").keypress(function (e) {         
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)){                      
               return false;
    }
   });

此代码仅允许student_id字段中的整数。

<强> Demo

答案 1 :(得分:0)

要仅接受某个号码,您可以使用HTML5附带的一些新功能。

<input type="number" step="1">

或者

<input type="text" pattern="\d+">

或者您可以使用jQuery,如其他答案中所述。但请记住,这些方法都不是万无一失的。客户端始终可以在开发人员工具中修改HTML / JavaScript。因此,您仍需要验证服务器上的数据。