Question

我的表单中有一个输入：

<div>
    <label for="phone">Phone Number:</label> <br />
    <input type="text" id="phone" name="phone" /> <br />
    <span id="phoneInfo" style="font-size: 11px;color:red;"></span>
</div>

我希望此输入有限制字符，这里是javascript代码

var phone = $("#phone");
var phoneInfo = $("#phoneInfo");
function validatePhone(){
    var a = $("#phone").val();
    var filter = /^[0-9]$/;
    //it's valid
    if(filter.test(a) || message.val().length > 10){            
        phone.removeClass("error");
        phoneInfo.text("- thank you");
        phoneInfo.removeClass("error");
        return true;
    }
    //it's NOT valid
    else{
        phone.addClass("error");
        phoneInfo.text("X");
        phoneInfo.addClass("error");
        return false;
    }
}

但它不起作用......

Answer 1

有几种方法可以实现这一点，其中一种方法包括使用jQuery插件，称为jQuery Validation。下面是一个示例代码：

示例：

需要“字段”和美国电话号码。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Makes "field" required and a US phone number.</title> <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css"> </head> <body> <form id="myform"> <label for="field">Required, us phone number: </label> <input class="left" id="field" name="field"> <br/> <input type="submit" value="Validate!"> </form> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> <script> // just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#myform" ).validate({ rules: { field: { required: true, phoneUS: true } } }); </script> </body> </html>

但是，如果您不想使用外部插件或JavaScript，则可以依赖输入的HTML 5属性type="number"（而不是type="text"）。

示例：

<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <div> <form id="myform"> <label for="phone">Phone Number:</label> <br /> <input type="number" id="phone" name="phone" /> <br /> <span id="phoneInfo" style="font-size: 11px;color:red;"></span> </form> </div> </body> </html>

有关详细信息，请参阅here。

Answer 2

您忘记了过滤器中的“+”：

var filter = /^[0-9]+$/;

否则你只期望1位数。

另外，您使用了未定义的变量：

message.val().length

我想你想使用phone。

$('#validate').click(function() {
    var phone = $("#phone");
    var phoneInfo = $("#phoneInfo");
    var a = $("#phone").val();
    var filter = /^[0-9]+$/;
    //it's valid
    if (filter.test(a) && phone.val().length <= 10) {
        phone.removeClass("error");
        phoneInfo.text("- thank you");
        phoneInfo.removeClass("error");
        return true;
    }
    //it's NOT valid
    else {
        phone.addClass("error");
        phoneInfo.text("X");
        phoneInfo.addClass("error");
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <label for="phone">Phone Number:</label> <br />
  <input type="text" id="phone" name="phone" /> <br />
  <span id="phoneInfo" style="font-size: 11px;color:red;"></span>
  <input type="button" id="validate" value="Submit"/>
</div>

Answer 3

试用此代码

 function phonenumber(inputtxt)  
    {  
      var phoneno = /^\d{10}$/;  
      if((inputtxt.value.match(phoneno))  
            {  
          return true;  
            }  
          else  
            {  
            alert("message");  
            return false;  
            }  
    }

Answer 4

如果你想设置字符接受输入框，那么你必须只写文本框的maxlength属性...例如......

<input type="text" maxlength="10" id="MobNo" name="MobNo" />

所以输入框只接受10个字符。

将输入字符限制为只是数字

4 个答案: