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

yibin 2015-02-09 建站源码 602

  正则表达式是一个功能强大的灵活而简洁的匹配文本字符串的工具,比如匹配特定的字符、单词等。正则表达式通过一个语言规则来书写,通过正则表达式处理器来处理。维基百科有详细解释,这里不再赘述。维基百科:http://en.wikipedia.org/wiki/Regular_expression 。HTML5允许通过正则表达式的方式检测用户输入。

了解一下:


HTML4中,你需要通过Javascript来实现这个功能。下面是代码:

<span style="font-size:16px;font-family:'Microsoft YaHei';"><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"/> </span>

当输入框的onblur事件触发的时候,一段javascript代码执行了,他控制了输入的匹配规则,如果输入不匹配他也提供了一段错误提示消息。但是在HTML5中,input标签增加了一个属性允许你通过正则表达式来验证输入,使用起来非常简单。废话不多述看代码。

<span style="font-size:16px;font-family:'Microsoft YaHei';"><input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"</span>

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

<span style="font-size:16px;font-family:'Microsoft YaHei';"><input type="text" name="ssn"

 

pattern="(!^\d{3}-\d{2}-\d{4}$"

 

title="The Social Security Number" /></span>

怎么构建


在下面的文章中我们使用正则表达式来验证美国邮编:
这里有完整代码(将正则表达式插入到文本输入框的属性中)
<span style="font-size:16px;font-family:'Microsoft YaHei';"><!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></span>

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

提示:


并不是所有浏览器都支持这个强大的正则表达式属性,幸运的是我们可以找到一些库来填补这个空缺:你可通过如下网址https://github.com/westonruter/webforms2 Google's Web Forms 2。这个项目就像他网站上描述的一样是一个跨浏览器的Form2.0的规范的实现。当页面加载的时候如果浏览器不支持HTML5的某些功能,例如pattern属性,而这个库刚好有这个的实现的话,这个库会帮你搞定。你可以通过如下方式导入这个库:
<span style="font-size:16px;font-family:'Microsoft YaHei';"><script type="text/javascript" src="YOUR_FOLDER/webforms2_src.js"></script></span>

无论你是使用webforms2.js或者webforms2p.js你都需要保证webforms2.css和webforms2-msie.js位于同一个目录。

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

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询