HTML5模式未驗證

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

使用^[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>

Answer 2

你能請通過以下（在輸入元素使用）搜索：

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