Question

我在我的html表单中使用bootstrap，如下所示。它有一个用户名输入字段，其中包含一个简单的验证规则，其长度必须介于1到16个字符之间。我想知道如何在这个领域提出更多的验证规则。例如，我想检查用户名不能以数字开头，并且不包含* # @等特殊字符。如果它需要一些jquery代码，我很好。但我不知道如何注入验证逻辑并使其与with-errors div。

一起工作

<div class="form-group">
              <label for="user-username-input">User Name</label>
              <input type="text" class="form-control" id="user-username-input" placeholder="User Name" maxlength="16" data-minlength="1" data-error="Required" required>
              <div class="help-block with-errors"></div>
            </div>

Answer 1

使用html5输入模式属性。

       <form>
       <div class="form-group">
          <label for="user-username-input">User Name</label>
          <input type="text" class="form-control"
                 id="user-username-input" placeholder="User Name" 
                 pattern="[a-zA-Z]+[a-zA-Z0-9]{1,16}"
                 title="Username should be alphanumeric of length upto 16 characters and first character can not be number." 
                 required>
          <div class="help-block with-errors"></div>
          <input type="submit" value="submit">
        </div>
       </form>

如何在bootstrap表单字段上注入自定义验证

1 个答案: