HTML5表单验证的解析-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了使用HTML5的表单验证的简单示例,包括手机端利用的一个小例子分享,需要的朋友可以参考下

HTML5对表单元素提供了patern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
　　比如下面这个表单内，文本框只接受大陆的手机号，输入其它东西就无法提交
运行

<!DOCTYPE html>
<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>

注意只有非空的表单才会使用正则验证，如果什么都不输入的话，pattern不会被使用，所以还需要required协助。但是这个代码弹出的提示是这样的：

这样的提示文字只有猴子看得懂！所以我们还需要更友好的提示文字，使用setCustomValidity方法来定义。
运行

<!DOCTYPE html>
<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>
<script>
text.oninput=function(){   
  text.setCustomValidity("");   
};   
text.oninvalid=function(){   
  text.setCustomValidity("请不要输入火星的手机号好吗？");   
};   
</script>