input控件的常用基础验证方法

阅读更多

html5的Input控件可以通过以下几个方式来支持基础的验证

首先是type, html5增加了number, email, tel, date, url, color等类型，支持html5的浏览器基于这个类型已经可以做最基础的校验了，比如type="number", 那么只允许输入数字；type="email", 那浏览器就帮你校验email address了

其次是几个属性，如maxlength(text类型）, min, max（number类型和日期时间类型）

然后是required属性，可以做非空校验

最后是强大的pattern属性，可以输入任意正则表达式。

示例如下：

Html代码 

1.   type="number" name="mobile" class="form-control" required maxlength="11" pattern="^1\d{10}$" oninvalid="setCustomValidity('请输入正确的手机号')" />  

 其中oninvalid子句可以自定义浏览器给出的pattern不合格提示信息。

 

如果校验很复杂，那就还是建议用验证库了，比如jquery.validate.js或者bootstrap validator插件