JavaScript笔记之表单和正则表达式

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量92 收藏
点赞数
文章标签： javascript xhtml ViewUI

正则表达式是一种对文本字符串进行验证和格式化的极其强大的方式。通过使用正则表达式，可以用一两行JavaScript代码完成原本需要几十行代码的复杂任务。

正则表达式是一种特殊符号编写的模式，描述一个或多个文本字符串，常常被认为是编程中最棘手的部分之一，但是只要把混乱的正则表达式分解成有意义的小块，其语法并不难理解。

下面的一个例子，是用正则表达式验证电子邮件地址：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Email Validation</title> <link type="text/css" rel="stylesheet" href="script01.css" /> <script type="text/javascript" src="script01.js"></script> </head> <body> <h2 align="center">Email Validation</h2> <form action="someAction.cgi"> <p><label>Email Address: <input class="email" type="text" size="50" /></label></p> <p><input type="reset" /><input type="submit" value="Submit" /></p> </form> </body> </html>


script01.css

body { color: #000; background-color: #FFF; } input.invalid { background-color: #FF9; border: 2px red inset; } label.invalid { color: #F00; font-weight: bold; }


script01.js

window.onload = initForms; function initForms() { for (var i=0; i< document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var allGood = true; var allTags = document.getElementsByTagName("*"); for (var i=0; i<allTags.length; i++) { if (!validTag(allTags[i])) { allGood = false; } } return allGood; function validTag(thisTag) { var outClass = ""; var allClasses = thisTag.className.split(" "); for (var j=0; j<allClasses.length; j++) { outClass += validBasedOnClass(allClasses[j]) + " "; } thisTag.className = outClass; if (outClass.indexOf("invalid") > -1) { invalidLabel(thisTag.parentNode); thisTag.focus(); if (thisTag.nodeName == "INPUT") { thisTag.select(); } return false; } return true; function validBasedOnClass(thisClass) { var classBack = ""; switch(thisClass) { case "": case "invalid": break; case "email": if (allGood && !validEmail(thisTag.value)) classBack = "invalid "; default: classBack += thisClass; } return classBack; } function validEmail(email) { var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; return re.test(email); } function invalidLabel(parentTag) { if (parentTag.nodeName == "LABEL") { parentTag.className += " invalid"; } } } }


现在开始解释红色代码行：

正则表达式总是以斜杠(/)开头和结尾。

脱字符(^)表示要使用这个表达式检查以特定的字符串开头的字符串。

表达式\w表示任意单一字符，包括a~z、A~Z、0~9或下划线。

加号+表示要寻找前面条目的一次或多次出现。

前圆括号(表示一个组。

方括号[]用来表示可以出现其中任意一个字符，这个方括号内包含字符\.-，但是点号对于正则表达式是有特殊意义的，所以需要在它前面加上反斜杠\，这表示指的实际上是点号本身，而不是它的特殊意义。在特殊字符串前面使用反斜杠称为“对字符转义”。

问号?表示前面的条目可以不出现或出现一次。问号后再次使用\w+，表示点号或连字符后面必须有其他一些字符。

后圆括号表示这个组结束了。在此后是一个星号*，表示前面的条目可以不出现或出现多次。

@字符仅仅代表它本身，没有任何其他意义。

接下来再次使用\w+，表示域名必须以一个或多个a~z、A~Z、0~9或下划线开头。在此之后同样是([\.-]?\w+)*，这表示电子邮件地址的后缀中允许有点号或连字符。

然后，在一对圆括号中建立另一个组:\.\w{2,3}，表示希望找到一个点号，后面跟着一些字符。花括号中的数字表示前面的条目可以出现2次或3次。

最后正则表达式的末尾是一个美元符号$，表示匹配的字符串必须在这里结束。

return re.test(email);这一行获得前一步中定义的正则表达式，并使用test()方法验证电子邮件的有效性。

如果不用正则表达式，则要使用多出数十行的代码来完成相同的代码

function validEmail(email) { var invalidChars = " /:,;"; if (email == "") { return false; } for (var k=0; k<invalidChars.length; k++) { var badChar = invalidChars.charAt(k); if (email.indexOf(badChar) > -1) { return false; } } var atPos = email.indexOf("@",1); if (atPos == -1) { return false; } if (email.indexOf("@",atPos+1) != -1) { return false; } var periodPos = email.indexOf(".",atPos); if (periodPos == -1) { return false; } if (periodPos+3 > email.length) { return false; } return true; } function invalidLabel(parentTag) { if (parentTag.nodeName == "LABEL") { parentTag.className += " invalid"; } } } }

由此可见使用正则表达式确实可以减少大量代码。

关于更详细的正则表达式介绍可参看：http://blog.csdn.net/yanghai0321/article/details/7073238

(源《JavaScript基础教程》)

iteye_13633
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript正则表达式
01-08
JavaScript正则表达式 一、认识正则表达式 1、正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大...
JavaScript 表单验证正则表达式大全[推荐]
12-12
具体和函数结合的使用方法，还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 代码如下:匹配中文字符的正则表达式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配...
表单验证中常用的正则表达式以及表单详细代码
争做优秀java技术博客！
09-10 1388
<br />中文字符的正则表达式：^[/u4e00-/u9fa5]+$<br /><br />Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w<br /><br />+([-.]w+)*<br /><br />网址URL的正则表达式：[a-zA-z]+://[^s]*<br /><br />国内电话号码：d{3}-d{8}|d{4}-d{7}<br /><br />中国邮政编码：[1-9]d{5}(?!d)<br /><br />身份证：^(/d{17}(/d{1}|[xX]
JavaScript_form表单非空、密码验证。
cenyebao的专栏
11-06 2813
window.onload = initForms; var invalidArray = [];    // 存储无效标签； function initForms() {          for(var i=0, len=document.forms.length; i         document.forms[i].onsubmit = function() {
用JavaScript进行表单验证
weixin_30781631的博客
01-21 149
用户填写表单后提交，服务器端脚本会先验证数据，保证数据的正确性（比如数据是符合要求的内容、格式正确等）后再将数据交到数据库存储供以后使用。也可以在客户机上用JavaScript进行表单验证，比较快，用户操作效率较高。虽然用JavaScript进行表单验证有很多优点，不过有些用户可能会关闭浏览器JavaScript功能或者不支持JavaScript，因此在服务器端脚本的表单验证必...
JavaScript实用示例之根据其他字段对字段进行检查
tudusi
04-20 158
在填写表单时，可能希望指定用户必须填写某些字段，然后才能提交表单。可以使用JavaScript检查某些或所有字段是否已经填写了。在这个示例中，使用了HTML、CSS和JavaScript通过红色的边框和黄色的内部颜色突出显示未填写的字段。检查在用户单击表单的Submit按钮时进行。 也经常需要根据另一个字段对一个字段进行检查，尤其是在要求用户设置密码时。为了确保密码正确，希望用户输入密码两次，...
js建立必须填写的字段（详解）
Elephant_H的博客
11-03 1866
这是《Javascript基础教程（第九版）》6.3章节的一段代码，相信很多初学者看完之后会觉得书里的注解远远不够，以下是根据我的理解对这段代码的详解
javascript中10个正则表达式使用介绍基础篇
11-21
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。 search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。 replace() 方法 ...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式
01-20
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式。源码txt格式。
javascript学习笔记（八）正则表达式
12-08
正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）。模式描述在搜索文本时要匹配的一个或多个字符串。 首先推荐几个正则表达式编辑器  Debuggex ：...
打造可复用可扩展javascript验证表单脚本
星.云计算
01-16 102
如果需要从用户那里收集信息，就需要使用表单。 表单包含大多数常见的图形界面元素，例如文本框，单选按钮，复选框，下拉菜单等等。 填写完表单，点击Submit按钮将表单发送给web服务器，尽管可以通过服务器CGI程序完成验证，但在客户端用javascript验证要快得多，而且用户操作的效率也高。 这篇博客,主要是把我写的一个用于验证表单的可复用,可扩展的javascript脚本（版本1....
javascript 校验 非空_JavaScript_form表单非空验证；
weixin_39922929的博客
02-06 187
=>HTML文比抖朋要插支一圈不者地件表单验证_密码验证YourName：ChooseAPassword：VerifyPassword：=>样式文件body {color: #000; //黑色；background-color: #FFF; //白色；}input.invalid {background-color: #FF9; //黄色；border: 2px r...
JavaScript_form表单非空验证；
cenyebao的专栏
11-03 4340
=>HTML文件          表单验证_密码验证                        YourName：         ChooseAPassword：         VerifyPassword：                =>样式文件 body {     color: #000;    //黑色；
一个通用的form必填表字段的校验
fondOfJava的专栏
10-24 1184
 //js代码function validForm(){ var allGood = true; var allTags = document.getElementsByTagName("*"); for(var i=0; i  if(allTags[i].nodeName=="INPUT" || allTags[i].nodeName=="TEXTAREA"){   if(!validT
初识CGI程序
朝歌
04-10 1941
What is CGI? The Common Gateway Interface, or CGI, is a set of standards that define how information is exchanged between the web server and a custom script. The CGI specs are currently maintained by t
CGI提交表单的两种方式POST与GET
不积跬步，无以致千里；不积小流，无以成江海
12-17 4496
Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，DELETE。URL全称是资源描述符，我们可以这样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查 ，改 ，增 ，删 4个操作。到这里，大家应该有个大概的了解了，GET一般用于获取/查询资源信息，而POST一般用于更新资源信息(个人认
关于cgi的一些总结
michael_fiona的专栏
05-20 2985
<br />一、由于需要在网页中操作I/O口和舵机等硬件，所以要用到CGI（通用网关接口）技术，即在网页中调用位于服务器中的CGI程序，然后在CGI程序中调用具体的硬件操作。CGI在网页中通常是通过表单的action值调用的，如：<br />    <form   action= "xxx.cgi "   method=post><br />在表单提交时，就会执行xxx.cgi程序。<br />二、 cgi程序执行完毕后通常会返回一新网页，但是有时候我们并不期望这么做，我们希望cgi只执行交给它的任务,并且
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
javascript 正则表达式 转换 java 正则表达式
04-08
JavaScript正则表达式和Java正则表达式在语法上有一些差异，但是它们的基本概念和用法是相似的。下面是将JavaScript正则表达式转换为Java正则表达式的一些常见规则： 1. 语法差异： - JavaScript正则表达式使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值