Question

这是我的input元素。我希望它只接受字母（没有数字或任何其他字符）。

<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control"  id="firstName" placeholder="First Name" required>

这是我的整体部分观点。

<form method = "post" action = "" ng-controller = "signUpCtrl as signUp">

  <div class="form-group row">
    <label for="firstName" class="col-sm-2 form-control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control"  id="firstName" placeholder="First Name" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
    <div class="col-sm-10">
      <input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="userName" class="col-sm-2 form-control-label">User Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="userName" placeholder="User Name" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="password" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="Password" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="email" class="col-sm-2 form-control-label">Email Address</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Email Address" required>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10 text-center">
      <button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
    </div>
  </div>

</form>

我正在使用 - 谷歌浏览器50.0.2661.94（官方版）m（32位）

Answer 1

您可以尝试使用以下内容（在输入元素中使用它）：

ng-pattern="/^[A-Za-z]+$/"

Answer 2

使用^[a-zA-Z][^0-9]+$或^\w[^\d]+$代替[a-zA-Z]。

修改：

如果您还需要跳过符号，请使用：
^[a-zA-Z][^0-9-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+$.
或

^[a-zA-Z][^0-9\W]+$ // this will skip all non-word characters.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class='container'>

  <div class="panel panel-default">
    <div class="panel-body">

      <form method="post" action="" ng-controller="signUpCtrl as signUp">

        <div class="form-group row">
          <label for="firstName" class="col-sm-2 form-control-label">First Name</label>
          <div class="col-sm-10">
            <input type="text" name="firstName" pattern="^[a-zA-Z][^0-9]+$" class="form-control" id="firstName" placeholder="First Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="userName" class="col-sm-2 form-control-label">User Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="userName" placeholder="User Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="password" class="col-sm-2 form-control-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Password" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="email" class="col-sm-2 form-control-label">Email Address</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Email Address" required>
          </div>
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
        </div>

      </form>
    </div>
  </div>

</div>

HTML5模式未验证

2 个答案: