开发小技巧：创建自定义的HTML5输入框验证出错信息

很多时候，我们在做输入框的时候，总希望输入框在用户输入错误的时候，直接给出提示信息，提示用户输入的信息不符合规则。

所以下面的这段代码就是可以做到这一点，利用js完成这一项任务。

html代码如下：

<form action="">

  <!-- 添加我们书写的验证js方法 -->
  <input type="text" pattern="[a-zA-Z]+" oninvalid="validateIt(this)" οninput="validateIt(this)"/>
  
  <input type="submit" />
</form>

js代码如下：

<script>
function validateIt(inputelement){
  if(inputelement.validity.patternMismatch){
    inputelement.setCustomValidity('只允许输入字母');
  }else{
    inputelement.setCustomValidity(''); //输入内容符合验证条件
  }
  
  return true;
}
</script>