Возможно ли в bootstrap или HTML принимать только строку в качестве ввода в формы?

Question

Я хочу вводить имя пользователя только в виде строки. Можно ли использовать Формик?

<form>
  <div class="form-group">
    <label for="exampleInputText">UserName</label>
    <input type="text" class="form-control" id="exampleInputTextl1" aria-describedby="textHelp" placeholder="Enter Username">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>

Answer 1

Вам просто нужно включить pattern атрибут в ваше имя пользователя input поле

 pattern="[a-zA-Z]*"

<form>
  <div class="form-group">
    <label for="exampleInputText">UserName</label>
    <input type="text" required pattern="[a-zA-Z]*" class="form-control" id="exampleInputTextl1" aria-describedby="textHelp" placeholder="Enter Username">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 2

Вы можете легко сделать это на стороне client с помощью функции JS, работающей ниже.

Его проверка только на буквы разрешена, если вы вводите число или другие символы, он покажет alert.

charCode - это JS, который проверяет ключи, введенные пользователем, и, если он соответствует критериям, которые мы установили, а это только буквы, он вернет true, и пользователь сможет ввести имя пользователя ИЛИ вернуть false и предупредить если вы вводите число или другие символы.

function lettersOnlyAllowed() {
  var charCode = event.keyCode;
  if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8) {
    return true;
  } else {
    alert('Please enter letters only')
    return false;
  }
}

<form>
  <div class="form-group">
    <label for="exampleInputText">UserName</label>
    <input type="text" onkeypress="return lettersOnlyAllowed(event);" class="form-control" id="exampleInputTextl1" aria-describedby="textHelp" placeholder="Enter Username">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Надеюсь, это поможет.

Answer 3

Вы можете использовать шаблон на стороне клиента, чтобы разрешить только определенные символы:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

<input type="text" pattern="[a-Z]" class="form-control" id="usernaame" aria-describedby="textHelp" placeholder="Enter Username">