html5表单验证替代JS

  • Jesse
  • 2016-02-23 17:46:00
  • 501
不用js一样,html5一样可以表单验证,满足绝大多少应用

如下栗子:

<input type="tel" title="手机号码正确格式,如:13212345678" pattern="^[1][3456789][0-9]{9}$" required placeholder="请输入手机号码">

 

在表单里,input加上required属性的,意思就是内容不允许为空

pattern是正则匹配,如:

手机号码匹配:"^[1][3456789][0-9]{9}$"

只能包含三个字母的文本字段(数字或特殊字符):"[A-z]{3}"

placeholder为文本框里面的提示内容,想必大家都知道了。

 

当然还有(相信日后会增加更多):

最大长度不能超过140

<input type="text" maxLength="140">


输入类型必须为email格式:

<input type="email">


输入类型必须为数字,且必须在1~100之间

<input type="number" min="1" max="100">


在前台页面编写确实方便了不少

required,pattern,placeholder