Question

我尝试使用基本引导程序HTML 5的表格的1000hz验证器，我没有使用任何自定义查询，我不知道。我使用的文本字段接受10位数的电话号码。我修改了我的代码，如1000hz github bootstrap验证器的示例中所提供的。但是，当我开始键入几个数字时，它会在框的末尾显示一个刻度标记，当我切换到下一个元素时，它不会显示符号，因为HTML 5的验证。我想只显示刻度标记用户输入10位数。如果还原并删除几个数字，它应该显示x标记，直到他输入10位数。请帮助谢谢。

<div class="form-group textareawidth has-feedback">
    <label for="mobile">Principal's Mobile number </label>
    <input type ="text"  minlength = "10" maxlength="10" class="form-control" placeholder="Enter mobile number" name = "hmmobile" id="mobile" data-error="Phone number is invalid" required>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    <span class="help-block with-errors">Please enter 10 digit number</span>
</div>

另一个用户指出我使用1000hz足以包含validator.js。但它不起作用我需要包含更多的文件。然后该站点提供的示例工作。我是正确的，因为我是新手。

<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{ site.cdn_bootstrap_js }}"></script>
<script src="dist/validator.min.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/application.js"></script>

这些是包含的文件。

Answer 1

您必须使用数据属性data-minlength来检查并验证输入Check Reference Here中的字符长度

将minlength = "10"替换为data-minlength = "10"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<form data-toggle="validator" role="form">
    <div class="form-group textareawidth has-feedback">
        <label for="mobile">Principal's Mobile number</label>
        <input type="text" pattern="^[0-9]{1,}$" data-minlength="10" maxlength="10" class="form-control" placeholder="Enter mobile number" name="hmmobile" id="mobile" data-error="Phone number is invalid" required> <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
 <span class="help-block with-errors">Please enter 10 digit number</span>
    </div>
</form>

SideNote：您1000hz-bootstrap-validator/0.9.0/validator.min.js高于jquery-1.10.2.min.js，然后又<script src="dist/validator.min.js"></script>。

不能有validator.min.js个lib两次，所以删除jquery-1.10.2.min.js之前的第一个

1000hz bootstrap验证器

1 个答案: