本文目录
JS正则表达式完整教程3
亲爱的读者朋友，如果你点开了这篇文章，说明你对正则很感兴趣。
想必你也了解正则的重要性，在我看来正则表达式是衡量程序员水平的一个侧面标准。
关于正则表达式的教程，网上也有很多，相信你也看了一些。
与之不同的是，本文的目的是希望所有认真读完的童鞋们，都有实质性的提高。
本文内容共有七章，用JavaScript语言完整地讨论了正则表达式的方方面面。
如果觉得文章某块儿没有说明白清楚，欢迎留言，能力范围之内，老姚必做详细解答。
构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。
正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
JavaScript-正则表达式练习
登陆页面 login.html
《!doctype html》《html lang="en"》《head》《meta charset="UTF-8"》《title》login《/title》《link rel="stylesheet" href="all.css"》《script src="validate.js"》《/script》《script src="login.js"》《/script》《/head》《body》《div class="x-stage"》《form action="#" class="x-form"》《div class="x-field"》《label for="e-username" class="x-label"》用户名:《/label》《input id="e-username" name = "username" type="text" class="x-input"/》《/div》《div class="x-field"》《label for="e-pwd" class="x-label"》密码:《/label》《input id="e-pwd" name="pwd" type="password" class="x-input"/》《/div》《input type="button" name="login" value="登陆"/》《input type="button" name="regist" value="注册"/》《/form》《/div》《/body》《/html》
注册页面 regist.html
《!doctype html》《html lang="en"》《head》《meta charset="UTF-8"》《title》regist《/title》《link rel="stylesheet" href="all.css"》《script src="validate.js"》《/script》《script src="regist.js"》《/script》《/head》《body》《div class="x-stage"》《form action="#" class="x-form"》《div class="x-field"》《font class="x-requirement"》*《/font》《label for="e-username" class="x-label"》用户名:《/label》《input id="e-username" name = "username" type="text" class="x-input"/》《div class="x-prompt"》2-10位字符 数字和字母均可《/div》《/div》《div class="x-field"》《font class="x-requirement"》*《/font》《label for="e-pwd" class="x-label"》密码:《/label》《input id="e-pwd" name="pwd" type="password" class="x-input"/》《div class="x-prompt"》6-20位 可以是数字字母或下划线《/div》《/div》《div class="x-field"》《font class="x-requirement"》*《/font》《label for="e-c-pwd" class="x-label"》确认密码:《/label》《input id="e-c-pwd" name="cPwd" type="password" class="x-input"/》《div class="x-prompt"》《/div》《/div》《div class="x-field"》《font class="x-requirement"》*《/font》《label for="e-mail" class="x-label"》电子邮箱:《/label》《input id="e-mail" name="mail" type="text" class="x-input"/》《div class="x-prompt"》用于验证和找回密码《/div》《/div》《div class="x-field"》《font class="x-requirement"》*《/font》《label for="e-sex-man" class="x-label"》性别:《/label》《input id="e-sex-man" name="sex" type="radio" class="x-input"》男《/input》《input id="e-sex-woman" name="sex" type="radio" class="x-input"》女《/input》《div class="x-prompt"》《/div》《/div》《input type="button" name="regist" value="注册"/》《/form》《/div》《/body》《/html》
登陆脚本 login.js
window.onload = function(){var form = document.forms;***隐藏网址***form.regist.onclick = function(){form.action = ’regist.html’;form.submit();};form.login.onclick = function(){if(!validate.checkLogin(form.username.value,form.pwd.value))return false;form.action = lastWorkUrl;form.submit();};}
注册脚本 regist.js
window.onload = function(){var form = document.forms;***隐藏网址***form.regist.onclick = function(){if( !validate.checkUserName(form.username.value)|| !validate.checkPwd(form.pwd.value)|| !validate.checkConfirmPwd(form.pwd.value,form.cPwd.value)|| !validate.checkMail(form.mail.value))return false;form.action = lastWorkUrl;form.submit();};}
验证脚本 validate.js
var validate = {checkNull:function(value){if(!value) return alert(’不能为空!’),false;return true;},checkLogin:function(name,pwd){if(!name || !pwd)return alert(’输入不正确!’),false;return true;},checkUserName:function(value){if(!this.checkNull(value))return false;if(!/^{2,10}$/.test(value))return alert(’2-10位字符 数字字母均可!’),false;return true;},checkPwd:function(value){if(!this.checkNull(value))return false;if(!/^\w{6,20}$/.test(value))return alert(’6-20位 可以是数字字母或下划线!’),false;return true;},checkConfirmPwd:function(pwd,cpwd){if(pwd && pwd == cpwd && this.checkPwd(pwd) && this.checkPwd(cpwd))return true;return alert(’确认密码错误!’),false;},checkMail:function(value){if(!this.checkNull(value))return false;if(!/^\w+(\w+)*$/.test(value))return alert(’邮箱格式错误!’),false;return true;}};
样式表 all.css
.x-stage{width:400px;margin:100px auto;}.x-form{}.x-field{margin-bottom: 5px;font-size: 12px;}.x-label{font-weight: bold;margin-right: 5px;width: 60px;display: inline-block;vertical-align: middle;}.x-input{outline:none;vertical-align: middle;}.x-prompt{color : red;font-size: 12px;margin: 5px 0 5px 70px;}.x-requirement{color : red;}
