HTML5新增的表单验证功能

时间 2019-11-10

标签 html5 html 新增表单验证功能栏目 HTML5 繁體版

原文原文链接

1、HTML5表单的特色：

HTML5 表单增长了许多内置的控件和控件属性
XHTML 中须要放在 form 之中的诸如 input/button/select/textarea 等标签元素，在 HTML 5 中彻底能够放在页面任何位置，并经过新增的 form 属性指向元素所属表单的 ID 值，便可关联起来。

2、HTML5新增的控件类型：

email输入类型：<input type="email" name="email" />
要求输入格式正确的 email 地址，不然浏览器不容许提交，同时会提示错误信息javascript
url输入类型：<input type="url" />
要求输入格式正确的 URL 地址，Opera 中会自动在开始处添加 http://
日期时间相关输入类型：
<input type="date" /><input type="time" /><input type="month" /><input type="week" />
目前 MS 只有 Opera/Chrome 新版本支持，且展现效果也不同
number输入类型：<input type="number" />
要求输入格式正确的数字css
range类型：<input type="range" step="2" min="0" max="10" value="2" />
显示一个可拖动的滑块条，经过设定 max/min/step 值限定拖动范围，拖动时会反馈给value一个值html
search输入类型：<input type="search" />
输入一个搜索关键字，经过 results=s 可显示一个搜索小图标java
tel输入类型：<input type="tel" />
要求输入一个电话号码，但实际上并无特殊的验证，与 text 类型没什么区别数据库
color输入类型：<input type="color" />
可以让用户经过颜色选择器选择一个颜色值，并反馈到value中浏览器

3、HTML5新增的表单属性：

placeholder属性：<input type="text" placeholder="点击我会清除" />
实现点击清除表单初始值，MS 除了 Firefox，其余标准浏览器都能很好的支持bash
require/pattern属性：
<input type="text" name="require" required="" /><input type="text" name="require1" required="required" />
<input type="text" name="require2" pattern="^[1-9]\d{5}$" />
表单验证属性require 类型时，若输入值为空，则拒绝提交并出现提示，注意在 Opera 中必须指定 name 值，不然无效果。服务器
autofocus属性：<input type="text" autofocus="true" />
默认聚焦属性，可在页面加载时聚焦到一个表单控件，相似于 JS 的 focus()app

list属性：

<input type="text" list="ilist">
	<datalist id="ilist">
		<option label="a"></option>
		<option label="b"></option>
		<option label="c"></option>
	</datalist>
</input>复制代码

须要与datalist属性共用，datalist是对选择框的记忆，而list属性能够为选择框自定义记忆的内容ui

max/min/step属性：<input type="range" max="100" min="1" step="20" />
限制值的输入范围，以及值的输入渐进程度，好比可在 number 设定输入最大值最小值，或在 range 中设定拖动阶梯
autocomplete属性：<input type="text" autocomplete="on" />
此属性是为表单提供自动完成功能，若是该属性为打开状态可很好地自动完成，通常来讲，此属性必须启动浏览器的自动完成功能
data属性：<select data="http://XX.com/"></select>
HTML5 支持 data 属性，为 select 控件外联数据源，能够在 select 下拉别表动态的添加来自数据库的各组选项，好比说国家、省市列表等等。
XML Submission编码格式：
常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded。这种格式将数据送到服务器端，能够方便的存取。HTML5 提供一种新的数据格式：XML Submission，即 application/x-www-form+xml。简单的举例说，服务器端将直接接收到 XML 形式的表单数据。

4、简单的应用例子：

HTML5阻止表单气泡并显示提示信息

实现效果：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>表单验证默认样式修改</title>
</head>
<style> .oneline{line-height: 1.5;margin:10px auto;} .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;} .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;} .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;} .error-message{color:red; font-size:12px;text-indent:108px;} </style>

<body>
    <form id="forms">
        <div class="oneline">
            <label for="name">用户名:</label>
            <input id="name" name="name" class="sinput" required>
        </div>
        <div class="oneline">
            <label for="email">Email:</label>
            <input id="email" name="email" class="sinput" type="email" required>
        </div>
        <div class="oneline">
            <input type="submit" value="提交" id="thesubmit">
        </div>
    </form>
    <script> function replaceValidationUI(form) { form.addEventListener("invalid", function(event) { event.preventDefault(); }, true); form.addEventListener("submit", function(event) { if (!this.checkValidity()) { event.preventDefault(); } }, true); var submitButton = document.getElementById("thesubmit"); submitButton.addEventListener("click", function(event) { var inValidityField = form.querySelectorAll(":invalid"), errorMessage = form.querySelectorAll(".error-message"), parent; for (var i = 0; i < errorMessage.length; i++) { errorMessage[i].parentNode.removeChild(errorMessage[i]); } for (var i = 0; i < inValidityField.length; i++) { parent = inValidityField[i].parentNode; parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>") } if (inValidityField.length > 0) { inValidityField[0].focus(); } }) } var form = document.getElementById("forms"); replaceValidationUI(form); </script>
</body>

</html>复制代码