html5 数据验证,【译】表单数据校验 当你需要经常在服务器上校验数据时，在Web页面上的另加校验就有诸多好处。多数情况下，用户会被表单惹恼。而当用户填完表单时就校验数据，既有助于用户立即发现他们犯的错误，也能减少等待HTTP响应的时间、并减少服务器对错误表单输入的处理。本文介绍的，就是如何在表单所在页面对表单数据进行校验。 使用浏览器内置的表单校验 HTML5的一大特性，就是在不依赖脚本的情况下校验大多数的用户数据。该特性是通过使用表单素上的校验特性来实现的。 素校验不通过时 当一个素校验不通过时，会发生两件事： 该素会匹配到:invalid这个CSS伪类，它能让你给校验不过的素提供特定的样式。类似地，校验通过的素则会匹配:valid伪类。 当用户要发送数据时，浏览器会阻止这个表单、并展示一段错误信息。 素的校验约束 所有的素都能使用pattern特性来作校验。该特性采用一个区分大小写的正则表达式作为它的值。若素的值非空、或者不匹配该特性所指定的正则表达式，该素就会被认为是校验不通过的。 举个例子 Would you prefer a banana or a cherry? Submit input:invalid { border: 1px solid red; } input:valid { border: 1px solid green; } 在本例中，素可以接受如下三种值：空字符串、字符串”banana”或”cherry”。 required特性 若某个素需要在提交表单之前填一个值，那我们可以通过required特性来标记该素。当该特性为true时，所在的文本域不允许为空。 Would you prefer a banana or cherry? Submit input:invalid { border: 1px solid red; } input:valid { border: 1px solid green; } 注意文本框相比上个例子有何不同： 注意：素的type特性被设为email或url时，无需再使用pattern特性来坐校验。指定email类型时，文本框的值就得是个正确格式的email地址(同时指定mutiple特性时，还可以是一个逗号分隔的email地址列表)。指定url类型的文本框则会自动匹配一个URL。 其他校验约束 所有接受用户输入的表单素(, 等)都支持required特性，但要注意素并不支持pattern特性。 所有的文本输入框(或)都可以使用maxlength特性来约束文本大小。输入框的值若大于maxlength指定的值，就会校验不通过。但是浏览器通常不会让用户输入超过文本框指定长度的文本。 对于数字输入框，min和max特性也提供了校验约束。若输入框的值小于min的值或大于max的值，输入框就会校验不通过。 来个完整点的例子： Title* Mr. Ms. How old are you? pattern=”d+”> What’s your favorite fruit?* pattern=”[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range”> Banana Cherry Apple Strawberry Lemon Orange What’s your e-mail? Leave a short message Submit body { font: 1em sans-serif; padding: 0; margin : 0; } form { max-width: 200px; margin: 0; padding: 0 5px; } p > label { display: block; } input[type=text], input[type=email], input[type=number], textarea, fieldset { /* 需要给Webkit浏览器下的表单素适当的样式 */ -webkit-appearance: none; width : 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; -moz-box-sizing: border-box; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { outline: none; } 定制错误信息 如我们上面看到的几个例子所示，每次用户要发送未通过校验的表单时，浏览器都会展示一段错误信息。该信息的展示方式取决于浏览器本身。 这些自动生成的信息有两大缺点： 没有标准的方法来用CSS改变其外观和体验。 它们还要依赖浏览器本地信息，这意味着你会在使用一种语言的页面中，遇到错误信息使用另一种语言展示的情况。 使用法语版本的浏览器浏览英文页面 浏览器 渲染效果 Firefox 17 (Windows 7) 
Chrome 22 (Windows 7) 
Opera 12.10 (Mac OSX) 
要定制这些信息的外观和文本，你必须使用JavaScript，没有只使用HTML和CSS的方法。 HTML5提供了约束验证API来检查和定制表单素的状态。此外它也能改变错误信息的文本。来看个例子： I would like you to provide me an e-mail Submit 在Javascript中，你可以调用setCustomValidity())方法： var email = document.getElementById(“mail”); email.addEventListener(“keyup”, function (event) { if (email.validity.typeMismatch) { email.setCustomValidity(“I expect an e-mail, darling!”); } else { email.setCustomValidity(“”); } }); 使用Javascript校验表单 若你想要控制错误信息的样式和效果，或者想处理那些不支持HTML5表单验证的浏览器，那你就只能使用Javascript了。 HTML5约束验证API 现在越来越多的浏览器开始支持约束验证API，而且也支持得越来越靠谱。该API囊括了各个表单素上的一系列方法和属性。 约束验证API的属性 属性 描述 validationMessage 可以是一段本地化的信息，用于描述表单控件所不满足的验证条件(如果有的话)；当控件不支持任何约束验证(willValidae的值为false)、或控件的值满足了约束条件时，也可以是一个空字符串 validity 一个用于描述素校验阶段的validityState对象 validity.customError 素触发了定制的错误时返回true，否则返回false validity.patternMismatch 素的值不匹配提供的模板时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid伪类 validity.rangeOverflow 素的值大于提供的最大值时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid和:out-fo-range伪类 validity.rangeUnderflow 素的值小于提供的最小值时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid和:out-fo-range伪类 validity.stepMismatch 素的值不符合step特性提供的规则时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid和:out-fo-range伪类 validity.tooLong 素的值的长度超过要求的最大长度时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid和:out-fo-range伪类 validity.typeMismatch 素的值不是正确的语法时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid伪类 validity.valid 素的值没有校验出的问题时返回true，否则返回false。当返回true时，该素会匹配CSS的:valid，否则会匹配:invalid伪类 validity.valueMissing 素是必填项但没有值时返回true，否则返回false。当返回true时，该素会匹配CSS的:invalid伪类 willValidate 素在表单提交时会被校验则返回true，否则返回false 约束验证API的方法 方法 描述 checkValidity() 素的值没有校验出的问题时返回true，否则返回false。当校验不通过时，该方法还会在相应素上触发invalid事件。 setCustomValidity(message) 给素添加一段定制的错误信息；若你手动设置了错误信息，则给素会被当做校验未通过，并显示出特定的错误。这就能让你摆脱标准的约束验证API提供的错误信息，直接使用Javascript来建立自己的错误信息。该信息在报错时会展示给用户。 对于老旧浏览器，我们可以使用H5F之类的polyfill来弥补其对于约束验证API的不支持。由于这里你已经使用了Javascript，所以使用polyfill也并不会成为你设计或实现网站、Web应用时的额外负担。 使用约束验证API的例子 来看下如何使用该API来建立定制的错误信息，首先HTLM如下： Please enter an email address: Submit 这个简单的表格用了novalidate特性来关闭浏览器的自动校验；这样我们的脚本就能控制整个校验过程了。但是这样做却不会禁用掉约束验证API、以及 :valid, :invalid, :in-range, :out-of-range 等一系列CSS伪类。这就意味着，虽然浏览器不会自动在表单发送前校验它的数据，但你仍可自己来做校验、并且按需给予表单样式。 aria-live特性用来确保我们定制的错误信息能展示给任何人，包括那些使用诸如屏幕阅读器等无障碍设备的人。 CSS 这段CSS用于装饰我们的表单、并让错误的输出看起来更吸引人些。 /* 这段只是用来美化表单 */ body { font: 1em sans-serif; padding: 0; margin : 0; } form { max-width: 200px; } p * { display: block; } input[type=email]{ -webkit-appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; -moz-box-sizing: border-box; box-sizing: border-box; } /* 这段是给校验未通过的输入框的样式 */ input:invalid{ border-color: #900; background-color: #FDD; } input:focus:invalid { outline: none; } /* 这段是给错误信息的样式 */ .error { width : 100%; padding: 0; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; -moz-box-sizing: border-box; box-sizing: border-box; } .error.active { padding: 0.3em; } JavaScript 下面的Javascript代码用来处理我们自定义的错误校验。 // DOM节点的方法有许多，这里我们了表单自身以及email输入框，还有一个让我们放置错误信息的span素。 var form = document.getElementsByTagName(‘form’)[0]; var email = document.getElementById(‘mail’); var error = document.querySelector(‘.error’); email.addEventListener(“keyup”, function (event) { // 每次用户输入时，我们都会检查email输入框是否合法 if (email.validity.valid) { // 当校验通过时，如果已经有一段错误信息在显示了，就移除掉错误信息 error.innerHTML = “”; // 重置消息内容 error.className = “error”; // 重置消息的显示状态 } }, false); form.addEventListener(“submit”, function (event) { // 每次用户要提交表单时，我们都会检查email输入框是否合法 if (!email.validity.valid) { // 如果输入框不合法，我们就展示那段定制的错误信息 error.innerHTML = “I expect an e-mail, darling!”; error.className = “error active”; // 通过取消事件来阻止表单提交 event.preventDefault(); } }, false); 下面是运行结果： 约束验证API给了我们处理表单校验的强大工具，并让我们能有力地控制其用户界面，这就远超过只用HTML和CSS所能做的事了。 不使用内置API来校验表单 有时，面对老旧浏览器和[定制的组件]()，你不能(或者不想)使用约束验证API。但在这种情况下，你仍然可以使用Javascript来校验你的表单。表单的校验更多是个用户界面的问题、而非真正的数据校验。 要校验一个表单，你得先问你自己几个问题： 我需要进行什么类型的校验？ 你得先决定如何校验数据，这取决于你：可以用字符串操作、类型转换、正则表达式等等。只要记住表单数据通常是一段文本，而且传到你的脚本里时也是一些字符串就好。 表单校验未通过时，我应该做什么？ 这就是个UI的问题了。得靠你决定表单的行为：是不论是否通过都发送数据呢？还是高亮那些出现错误的字段？还是展示一些错误信息？ 如何帮助用户用户纠正非法数据？ 要减少用户的不满，很重要的是提供尽可能多的帮助信息，以指导用户纠正他们的输入。还应该提供些前置的输入建议、和清晰的错误信息，让用户知道该输入什么。 若你还想深入了解表单校验的UI要求，可以读读下面这些有用的文章： 未使用约束验证API的例子 为了更好地说明，我们接下来要重构上述的例子，让它能在老旧浏览器上运行： Please enter an email address: Submit 如你所见，HTML的和之前几乎一模一样；这里只移除了HTML5的部分。要注意的是ARIA是个并不依赖于HTML5的独立特性，所以我们仍会保留它。 CSS 类似地，CSS不需要做大规模修改；只要把:invalid伪类转为真的类，并且不去使用IE6不支持的特性选择器即可。 /* 这段只是用来美化表单 */ body { font: 1em sans-serif; padding: 0; margin : 0; } form { max-width: 200px; } p * { display: block; } input.mail { -webkit-appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; -moz-box-sizing: border-box; box-sizing: border-box; } /* 这段是给校验未通过的输入框的样式 */ input.invalid{ border-color: #900; background-color: #FDD; } input:focus.invalid { outline: none; } /* 这段是给错误信息的样式 */ .error { width : 100%; padding: 0; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; -moz-box-sizing: border-box; box-sizing: border-box; } .error.active { padding: 0.3em; } JavaScript Javascript代码的改变最大，为了兼容我们需要做更多的事情。 // 老旧浏览器上DOM节点的方法少了些 var form = document.getElementsByTagName(‘form’)[0]; var email = document.getElementById(‘mail’); // 下面是个访问DOM里下个兄弟素节点的的技巧 // 但这样做很危险，因为很容易就会建立一个死循环 // 在现代浏览器上，应该使用element.nextElementSibling var error = email; while ((error = error.nextSibling).nodeType != 1); // 按照HTML5的规范来 var emailRegExp = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/; // 许多老旧浏览器不支持addEventListener方法 // 下面是个解决该问题的简单方法，当然方法远不止这一种 function addEvent(element, event, callback) { var previousEventCallBack = element[“on”+event]; element[“on”+event] = function (e) { var output = callback(e); // 回调返回`false`时会终止回调链并结束事件回调的执行 if (output === false) return false; if (typeof previousEventCallBack === ‘function’) { output = previousEventCallBack(e); if(output === false) return false; } } }; // 现在可以来重构我们的校验了 // 由于我们不依赖CSS伪类，故而必须在email字段明确设置valid/invalid类 addEvent(window, “load”, function () { // 这里我们检验该字段是否为空(注意，该字段不是必填的) // 若不是，我们再检验它的内容是否为正确格式的email地址 var test = email.value.length === 0 || emailRegExp.test(email.value); email.className = test ? “valid” : “invalid”; }); // 定义用户在该字段输入时会发生什么 addEvent(email, “keyup”, function () { var test = email.value.length === 0 || emailRegExp.test(email.value); if (test) { email.className = “valid”; error.innerHTML = “”; error.className = “error”; } else { email.className = “invalid”; } }); // 定义用户提交数据时会发生什么 addEvent(form, “submit”, function () { var test = email.value.length === 0 || emailRegExp.test(email.value); if (!test) { email.className = “invalid”; error.innerHTML = “I expect an e-mail, darling!”; error.className = “error active”; // 某些老旧浏览器不支持event.preventDefault()方法 return false; } else { email.className = “valid”; error.innerHTML = “”; error.className = “error”; } }); 结果如下所示： 如你所见，自己建立一个校验系统并不是一件难事。难点就在于如何跨平台、并在你创建的任何表单上都能使用它。现在有许多库能执行表单校验，你应该毫不犹豫地使用他们。如下是几个例子： 远端校验 有些情况下使用远端校验还是挺有用的。在用户输入的数据得添加到应用服务器的数据存储时，这种校验是有必要的。一个相应的例子就是需要填用户名的注册表单。为避免用户名重复，更聪明的办法是发送一个AJAX请求来检查用户名的可用性，而不是让用户发送完数据、然后再返回一个带有错误的表单。 使用这种校验，需要注意以下几点： 因为需要公开暴露API和一些数据，所以得保证数据不是敏感的。 由于网络存在延迟，故得进行异步校验。这就得靠一些UI设计来保证校验不能正确执行时，用户操作不至于被阻塞。 结论 表单校验并不用靠复杂的Javascript，但它要求我们认真为用户着想，始终得帮用户纠正他们输入的数据。要做到这点，请确保： 展示明确的错误信息 约定好输入格式 指出错误出现的确切位置(特别是在那些巨大的表单中)
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/53693.html
