HTML5常用表单验证

1 字符串相关
placeholder : 当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
required ： 规定必须在提交之前填写输入域（不能为空）。它是表单验证最简单的一种方式方法。
pattern ： 规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。
maxLength ： 字段最大长度。
oninvalid ： 验证不成功时的提示信息。

字符串输入验证
1.1 设置最大长度
<input type="text" name="memo" placeholder="请填写备注" maxLength="100" oninvalid="validatelt(this,'备注，长度0～100')"/>
1.2 设置输入格式
<input type="text" path="typeName" placeholder="请填写类型名称" required="true" pattern=".{0,40}" oninvalid="validatelt(this,'类型名称，长度0～40')"/>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{4}-\d{4}" placeholder="请按照xxx-xxxx-xxxx样式输入电话号码"/></p>
1.3 电子邮件
<input type="email" id="email" name="email" placeholder="请填写电子邮件，类似example@web.com"/>
1.4 日期
<input type="date" id="beginTime" name="beginTime" placeholder="YYYY/MM/DD"/>
1.5 自定义选择列表
<input type="text" id="style" name="style" list="stylelist"  title="选择样式" autocomplete="off"/>
<datalist id="stylelist">
    <option value="White" label="白色"/>
    <option value="Gray" label="灰色"/>
    <option value="RED" label="红色"/>
</datalist>
1.6 URL
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

2 数值相关

2.1 设置输入最小值
<input type="number" min="0" value="20"/>
2.2 设置输入最大值
<input type="number" max="100" value="20"/>
2.3 设置输入取值区间，其中step为步长，默认为1，可不设
<input type="range" max="0" max="100" step="5" value="20"/>

3 日期相关

<input type="date" id="beginTime" name="beginTime" placeholder="YYYY/MM/DD"/>