使用正则表达式构造定制的HTML5输入框

时间 2019-11-06

原文原文链接

正则表达式（点此在线编辑测试）是一个功能强大的灵活而简洁的匹配文本字符串的工具，好比匹配特定的字符、单词等。正则表达式经过一个语言规则来书写，经过正则表达式处理器来处理。维基百科有详细解释，这里再也不赘述。维基百科：http://en.wikipedia.org/wiki/Regular_expression 。HTML5容许经过正则表达式的方式检测用户输入。javascript

了解一下：

在HTML4中，你须要经过Javascript来实现这个功能。下面是代码：css

<input type="text" name="ssn" onblur="if (!^\d{3}-\d{2}-\d{4}$this.value) alert(this.title+'\nAn error occurred. Please verify your data.');" title="The Social Security Number"/>

当输入框的onblur事件触发的时候，一段javascript代码执行了，他控制了输入的匹配规则，若是输入不匹配他也提供了一段错误提示消息。可是在HTML5中，input标签增长了一个属性容许你经过正则表达式来验证输入，使用起来很是简单。废话很少述看代码。html

<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"

pattern属性中的值指定了输入的内容必须符合javascript规则的正则表达式。（这里有详细描述，http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf ）注：符合条件的JavaScript模式意味着用于此属性的正则表达式语言跟Javascript中正则表达式的语言是相同的。（这就是为何在表达式的开头有一个 ^(?: 在结尾有个 )$ 。），若是想为用户提供输入提示的话，可使用title属性。html5

<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$" title="The Social Security Number" />

怎么构建

在下面的文章中咱们使用正则表达式来验证美国邮编：java

这里有完整代码（将正则表达式插入到文本输入框的属性中）git

在线演示： http://www.osctools.net/jsbin/biyqiyqi/1/edit#html,live github

<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <form id="myForm"> <fieldset> <legend>Solution 4-8: Creating custom input types using regular expressions</legend> <label> Insert a valid American Zip code: <input type="text" name="ssn" pattern="(\d{5}([\-]\d{4})?)" title="Zip Code" /> </label> <p><input type="submit" value="Check Zip code" /> </p> </fieldset> </form> </body> </html>

当你将上述代码放在浏览器中执行的时候，例如在Opera中（支持pattern属性），单击表单的提交按钮。浏览器会控制输入框中的输入符合要匹配指定的正则表达式，若是验证失败将会返回一个错误消息。web

提示：

并非全部浏览器都支持这个强大的正则表达式属性，幸运的是咱们能够找到一些库来填补这个空缺：你可经过以下网址https://github.com/westonruter/webforms2 Google's Web Forms 2。这个项目就像他网站上描述的同样是一个跨浏览器的Form2.0的规范的实现。当页面加载的时候若是浏览器不支持HTML5的某些功能，例如pattern属性，而这个库恰好有这个的实现的话，这个库会帮你搞定。你能够经过以下方式导入这个库：正则表达式

<script type="text/javascript" src="YOUR_FOLDER/webforms2_src.js"></script>

不管你是使用webforms2.js或者webforms2p.js你都须要保证webforms2.css和webforms2-msie.js位于同一个目录。express

OSChina.NET原创翻译/原文连接