1、什么是正则表达式，有什么用？ 33
正则表达式：Regular Expression
正则表达式主要用在字符串格式匹配方面。
2、正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持，javascript中也支持。
大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。
2、javascript需要掌握的内容
第一：常见的正则表达式符号要认识。
第二：简单的正则表达式要会写。
第三: 他人编写的正则表达式要能看懂。
第四：在javascript当中，怎么创建正则表达式对象！（new对象）
第五：在javascript当中，正则表达式对象有哪些方法！（调方法）
第六：要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
3、常见的正则表达式符号？
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
正则表达式当中的小括号()优先级较高。
[1-9] 表示1到9的任意1个数字（次数是1次。）
[A-Za-z0-9] 表示A-Za-z0-9中的任意1个字符
[A-Za-z0-9-] 表示A-Z、a-z、0-9、- ，以上所有字符中的任意1个字符。
| 表示或者
4、简单的正则表达式要会写
QQ号的正则表达式：^[1-9][0-9]{4,}$
他人编写的正则表达式要能看懂
email正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
5、创建正则表达式对象，调用正则表达式对象的方法
第一种创建方式：
var regExp = /正则表达式/flags;
第二种创建方式:使用内置支持类RegExp
var regExp = new RegExp("正则表达式","flags");
关于flags：
g：全局匹配
i：忽略大小写
m：多行搜索（ES规范制定之后才支持m。）当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。
6、正则表达式对象的test()方法？ 34
true / false = 正则表达式对象.test(用户填写的字符串);
true : 字符串格式匹配成功
false: 字符串格式匹配失败
代码在003 正则表达式
<!-- 正则表达式 33-34 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//给按钮绑定事件 34
document.getElementById("btn").onclick=function(){
//得到文本框value值及邮箱
var email= document.getElementById("email").value;
//写正则表达式
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);//进行正则匹配验证
if(ok){
//合法
document.getElementById("emailError").innerText="邮箱地址合法";
}else{
//不合法
document.getElementById("emailError").innerText="邮箱地址不合法";
}
}
//给文本框绑定focus
document.getElementById("email").onfocus=function(){
//当光标再次移回文本框时,innerText=""就是旁边的提示语句置空即不显示
document.getElementById("emailError").innerText="";
}
}
</script>
<input type="text" id="email"/>
<span id="emailError" ></span>
<br>
<input type="button" value="验证邮箱" id="btn"/>
</body>
</html>
7. 扩展字符串的trim函数 35
低版本的IE浏览器不支持字符串的trim()函数,怎么办？
可以自己对String类扩展一个全新的trim()函数! ------使用prototype方法
代码在 004去除字符串的前后空白trim函数
<!-- 去除字符串的前后空白trim函数 35 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>去除字符串的前后空白trim函数</title>
</head>
<body>
<script type="text/javascript">
// 低版本的IE浏览器不支持字符串的trim()函数,怎么办？
// 可以自己对String类扩展一个全新的trim()函数!
String.prototype.trim=function(){
// alert("扩展之后的trim方法");
// 去除当前字符串的前后空白
// 在当前的方法中的this代表的就是当前字符串.
//解释正则表达式 ^\s+ 前空白 \s+$ 后空白
//return this.replace(/^\s+/,"").replace(/\s+$/,"");
//将上面依据替换成一句话
return this.replace(/^\s+|\s+/g,"");
}
window.onload= function(){
//给按钮绑定事件
document.getElementById("btn").onclick=function(){
//获取文本框值value
var username = document.getElementById("username").value;
//取出前后空白
var username = username.trim();
//测试
alert("--->" + username + "<----");
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="去除前后空白" id="btn">
</body>
</html>
8. 表单验证 37-40
表单验证：
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
代码在 005 表单验证
<!-- 表单验证 37-40 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交
*/
window.onload = function(){ //38
//获取username的span标签
var usernameErrorSpan = document.getElementById("usernameError");
//给用户名文本框绑定焦点blur事件
var usernameElt = document.getElementById("username");
usernameElt.onblur=function(){
//获取用户名
var username = usernameElt.value;
//去除前后空白
username=username.trim();
//判断用户名是否为空 写法1
/* if(username){//如果username是空字符串的话,经过Boolean转型会认为是false
//代表username不是空字符串
alert("username="+username);
}else{
//代表username是空字符串
alert("username是空字符串");
} */
//判断用户名是否为空 写法2
/* if(username.length==0){
} */
//判断用户名是否为空 写法3
if(username===""){
//用户名为空
usernameErrorSpan.innerText = "用户名不能为空";
}else{
//用户名不为空
//继续判断长度
if(username.length<6||username.length>14){
//用户名长度非法
usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间";
}else{
//用户名长度合法
//继续判断是否含有特殊字符
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if(ok){
//用户名合法
}else{
//用户名含有特殊符号
usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
}
}
}
}
//给文本框绑定focus
usernameElt.onfocus = function(){
//清空非法的value
if(usernameErrorSpan.innerText !=""){//文本框后面有span不合法红字体就是不合法,不得空就是有红字
usernameElt.value="";
}
//当光标再次移回文本框时,innerText=""就是旁边的提示语句置空即不显示
//清空span
usernameErrorSpan.innerText="";
}
//获取确认密码span标签 39
var pwdErrorSpan = document.getElementById("pwdError");
//获取确认密码框对象
var userpwd2Elt = document.getElementById("userpwd2");
//绑定blur事件
userpwd2Elt.onblur = function(){
//获取密码和确认密码
var userpwdElt = document.getElementById("userpwd");
var userpwd = userpwdElt.value;//得到密码
var userpwd2 = userpwd2Elt.value;//得到确认密码
if(userpwd!=userpwd2){
//密码不一致
pwdErrorSpan.innerText="密码不一致";
}else{
//密码一致
}
}
// 绑定focus事件
userpwd2Elt.onfocus = function(){
if(pwdErrorSpan.innerText!=""){
//清空value值
userpwd2Elt.value="";
}
//清空span标签
pwdErrorSpan.innerText="";
}
//获取email的span
var emailSpan = document.getElementById("emailError");
//给email绑定blur事件
var emailElt = document.getElementById("email");
emailElt.onblur = function(){
//获取emailElt
var email = emailElt.value;
//编写email的正则
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
if(ok){
//合法
}else{
//不合法
emailSpan.innerText = "邮箱地址不合法";
}
}
//给emailElt绑定focus
emailElt.onfocus = function(){
if(emailSpan.innerText != ""){
//清空value值
emailElt.value = "";
}
//清空span标签
emailSpan.innerText = "";
}
//给提交按钮绑定鼠标单击事件 40
var submitBtnElt = document.getElementById("submitBtn");
submitBtnElt.onclick = function(){
// 触发username的blur userpwd2的blur email的blur
// 不需要人工操作,使用纯JS代码触发事件.
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//当所有表单项都合法时提交表单
if(usernameErrorSpan.innerText=="" && pwdErrorSpan.innerText==""&&emailSpan.innerText==""){
//获取表单对象
var userformElt = document.getElementById("userform");
//可以在这里设置form的action
userformElt.action = "http://localhost:8080/jd/save";
//提交表单
userformElt.submit();//form标签中自带有submit方法
}
}
}
</script>
<!-- 普通版 37-->
<!--这个表单提交应该使用post，这里为了检测，所以使用get。-->
<!-- <form id="userform" action="http://localhost:8080/jd/save" method="get"> -->
<form id="userform" method="get">
用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
密码<input type="text" name="userpwd" id="userpwd"/><br>
确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br>
邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
<!-- <input type="submit" value="注册" /> -->
<!-- 当用户输入的数据不合法时也会提交所有我们做出一下修改 40 -->
<input type="button" value="注册" id="submitBtn" />
<input type="reset" value="重置" />
</form>
</body>
</html>
<!-- 表格规整版 -->
<!-- <table width="300px" height="150px">
<form action="http://localhost:8080/jd/save" method="get">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="userpwd" id="userpwd"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" id="username2"/></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" id="email"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</td>
</tr>
</form>
<table>-->
