目录
1. 初识正则表达式
1.1. 正则表达式概述
正则表达式，又称正规表示法、常规表示法（英语：Regular Expression，在代码中常简写为regex、regexp或RE）， 计算机科学的一个概念。 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。
正则表达式类似于JSON,是一种通用的标准,被各种开发语言所支持,包括但不限于:Java,JavaScript,C,C++,C#,Python,SQL等等;
因为在Javaweb项目中正则一般用于前端验证,故此我们使用 JavaScript来进行正则表达式的学习;
比如输入邮箱，正确的规格
- test()方法 用来查看正则表达式与指定的字符串是否匹配
- 如果正则表达式与指定的字符串匹配 ，返回 true ，否则 false
1.2. 正则表达式使用
第一种方式: var reg = new RegExp('^a$')
^开始，$结束
var reg = new RegExp('^a$'); // 第一种方式
第二种方式: var reg = /^a$/;
var reg = /^a$/; // 第二种方式 在js中推荐使用1.3. 第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<input type="text" id="name" />
<span id="msg"></span><br>
<input type="button" onclick="test()" value="测试">
</body>
<script type="text/javascript">
function test(){
var value = document.getElementById("name").value;
// 定义一个匹配字符a的正则表达式
var reg = new RegExp('^a$'); // 第一种方式
//var reg = /^a$/; // 第二种方式 在js中推荐使用
// 获取正则匹配的结果 true false
var result = reg.test(value);
// 定义显示结果
var html = result ? '合法' : '不合法';
// 在页面显示正则匹配结果
document.getElementById("msg").innerHTML = html;
}
</script>
</html>
精准匹配
2. 正则表达式的匹配规则
2.1. 字符类匹配
Ø [abc] a、b 或 c
Ø [^abc] 任何字符，除了 a、b 或 c ,单个字符
Ø [a-zA-Z] a 到 z 或 A 到 Z，两头的字母包括在内
Ø [0-9] 0-9之间的任意字符
2.2. 元字符匹配
1.普通字符
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
普通字符只能够匹配字符串中与它们相同的字符。
比如，规定用户只能输入英文26个英文字母，普通字符的话/[abcdefghijklmnopqrstuvwxyz]/
2.元字符（特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，换成元字符写法：/[a-z]/
Ø . 匹配除换行符（\n、\r）之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.|\n)"的模式。
Ø \w 匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
Ø \W 匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。
Ø \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
Ø \S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
Ø \d 匹配一个数字字符。等价于 [0-9]。
Ø \D 匹配一个非数字字符。等价于 [^0-9]。
Ø \b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
2.3 边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符：
Ø ^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。
Ø $ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。
如果^和$在一起，表示必须是精确匹配
const reg2=/^web$/
console.log(reg2.test('web前端'))//false console.log(reg2.test('前端web'))//false
console.log(reg2.test('web'))//true
console.log(reg2.test('webweb'))//flase
2.4. 量词
量词用来设定某个模式重复次数
Ø X ? 一次或一次也没有
Ø X * 零次或多次
Ø X + 一次或多次
Ø X {n} 恰好 n 次
Ø X {n,} 至少 n 次
Ø X {n,m} 至少 n 次，但是不超过 m 次
注意 ：
逗号左右两侧千万不要出现空格
//元字符之量词
//1.*重复次数>=0次
const reg1=/^w*$/
console.log(reg1.test(''))//true
console.log(reg1.test('w'))//true
console.log(reg1.test('ww'))//true
console.log('-----------------------')
//2.+重复次数>=1次
const reg2=/^w+$/
console.log(reg2.test(''))//false
console.log(reg2.test('w'))//true
console.log(reg2.test('ww'))//true
console.log('-----------------------')
//3.?重复次数0||1
const reg3=/^w?$/
console.log(reg3.test(''))//true
console.log(reg3.test('w'))//true
console.log(reg3.test('ww'))//false
console.log('-----------------------')
//4.{n}重复n次
const reg4=/^w{3}$/
console.log(reg4.test(''))//false
console.log(reg4.test('w'))//flase
console.log(reg4.test('ww'))//false
console.log(reg4.test('www'))//true
console.log(reg4.test('wwww'))//false
console.log('-----------------------')
//5.{n,}重复次数>=n
const reg5=/^w{2,}$/
console.log(reg5.test(''))//false
console.log(reg5.test('w'))//false
console.log(reg5.test('ww'))//true
console.log(reg5.test('www'))//true
console.log('-----------------------')
//6.{n,m} n=<重复次数<=m
const reg6=/^w{2,4}$/
console.log(reg6.test('w'))//false
console.log(reg6.test('ww'))//true
console.log(reg6.test('www'))//true
console.log(reg6.test('wwww'))//true
console.log(reg6.test('wwwww'))//false2.5 范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
//元字符之范围[]
//1.[abc]匹配包含的单个字符，多选1
const reg1=/^[abc]$/
console.log(reg1.test('a'))//true
console.log(reg1.test('b'))//true
console.log(reg1.test('c'))//true
console.log(reg1.test('d'))//false
console.log(reg1.test('ab'))//false
//2.[a-z]连字符单个
const reg2=/^[a-z]$/
console.log(reg2.test('a'))//true
console.log(reg2.test('p'))//true
console.log(reg2.test('0'))//false
console.log(reg2.test('A'))//false
// 想要包含小写字母，大写字母，数字
const reg3=/^[a-zA-Z0-9]$/
console.log(reg3.test('B'))//true
console.log(reg3.test('b'))//true
console.log(reg3.test(9))//true
console.log(reg3.test(','))//false
//用户名可以输入英文字母，数字，可以加下划线，要求6~16位
const reg4=/^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1'))//false
console.log(reg4.test('abcd12'))//true
console.log(reg4.test('ABcd12'))//true
console.log(reg4.test('ABcd12_'))//true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true2.6. 字符类
某些常见模式的简写方式，区分字母和数字
3. 常见的正则表达式
3.1. 数字校验
1. 数字：^[0-9]*$
2. n位的数字：^\d{n}$
3. 至少n位的数字：^\d{n,}$
4. m-n位的数字：^\d{m,n}$
5. 零和非零开头的数字：^(0|[1-9][0-9]*)$
6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
9. 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10. 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11. 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12. 非零的负整数：^\-[1-9][0-9] *$ 或 ^-[1-9]\d*$
13. 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14. 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15. 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16. 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17. 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
18. 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
19. 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
3.2. 字符校验
1. 汉字：^[\u4e00-\u9fa5]{0,}$
2. 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3. 长度为3-20的所有字符：^.{3,20}$
4. 由26个英文字母组成的字符串：^[A-Za-z]+$
5. 由26个大写英文字母组成的字符串：^[A-Z]+$
6. 由26个小写英文字母组成的字符串：^[a-z]+$
7. 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8. 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9. 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10. 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$
11. 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12. 禁止输入含有~“”的字符：[^~\x22]+
3.3. 特殊需求校验
1. Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2. InternetURL：^ http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
3. 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
4. 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
5. 身份证号(15位、18位数字)：^\d{15}|\d{18}$
6. 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
7. 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
8. 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
9. 日期格式：^\d{4}-\d{1,2}-\d{1,2}
10. 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
11. 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
4. 正则表达式的语法明细
|
字符
|
说明
|
|
\
|
将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如，"n"匹配字符"n"。"\n"匹配换行符。序列"\\\\"匹配"\\"，"\\("匹配"("。
|
|
^
|
匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与"\n"或"\r"之后的位置匹配。
|
|
$
|
匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性，$ 还会与"\n"或"\r"之前的位置匹配。
|
|
*
|
零次或多次匹配前面的字符或子表达式。例如，zo* 匹配"z"和"zoo"。* 等效于 {0,}。
|
|
+
|
一次或多次匹配前面的字符或子表达式。例如，"zo+"与"zo"和"zoo"匹配，但与"z"不匹配。+ 等效于 {1,}。
|
|
?
|
零次或一次匹配前面的字符或子表达式。例如，"do(es)?"匹配"do"或"does"中的"do"。? 等效于 {0,1}。
|
|
{n}
|
n 是非负整数。正好匹配 n 次。例如，"o{2}"与"Bob"中的"o"不匹配，但与"food"中的两个"o"匹配。
|
|
{n,}
|
n 是非负整数。至少匹配 n 次。例如，"o{2,}"不匹配"Bob"中的"o"，而匹配"foooood"中的所有 o。"o{1,}"等效于"o+"。"o{0,}"等效于"o*"。
|
|
{n,m}
|
m 和 n 是非负整数，其中 n <= m。匹配至少 n 次，至多 m 次。例如，"o{1,3}"匹配"fooooood"中的头三个 o。'o{0,1}' 等效于 'o?'。注意：您不能将空格插入逗号和数字之间。
|
|
?
|
当此字符紧随任何其他限定符（*、+、?、{n}、{n,}、{n,m}）之后时，匹配模式是"非贪心的"。"非贪心的"模式匹配搜索到的、尽可能短的字符串，而默认的"贪心的"模式匹配搜索到的、尽可能长的字符串。例如，在字符串"oooo"中，"o+?"只匹配单个"o"，而"o+"匹配所有"o"。
|
|
.
|
匹配除"\r\n"之外的任何单个字符。若要匹配包括"\r\n"在内的任意字符，请使用诸如"[\s\S]"之类的模式。
|
|
(pattern)
|
匹配 pattern 并捕获该匹配的子表达式。可以使用 $0…$9 属性从结果"匹配"集合中检索捕获的匹配。若要匹配括号字符 ( )，请使用"\("或者"\)"。
|
|
(?:pattern)
|
匹配 pattern 但不捕获该匹配的子表达式，即它是一个非捕获匹配，不存储供以后使用的匹配。这对于用"or"字符 (|) 组合模式部件的情况很有用。例如，'industr(?:y|ies) 是比 'industry|industries' 更经济的表达式。
|
|
(?=pattern)
|
执行正向预测先行搜索的子表达式，该表达式匹配处于匹配 pattern 的字符串的起始点的字符串。它是一个非捕获匹配，即不能捕获供以后使用的匹配。例如，'Windows (?=95|98|NT|2000)' 匹配"Windows 2000"中的"Windows"，但不匹配"Windows 3.1"中的"Windows"。预测先行不占用字符，即发生匹配后，下一匹配的搜索紧随上一匹配之后，而不是在组成预测先行的字符后。
|
|
(?!pattern)
|
执行反向预测先行搜索的子表达式，该表达式匹配不处于匹配 pattern 的字符串的起始点的搜索字符串。它是一个非捕获匹配，即不能捕获供以后使用的匹配。例如，'Windows (?!95|98|NT|2000)' 匹配"Windows 3.1"中的 "Windows"，但不匹配"Windows 2000"中的"Windows"。预测先行不占用字符，即发生匹配后，下一匹配的搜索紧随上一匹配之后，而不是在组成预测先行的字符后。
|
|
x|y
|
匹配 x 或 y。例如，'z|food' 匹配"z"或"food"。'(z|f)ood' 匹配"zood"或"food"。
|
|
[xyz]
|
字符集。匹配包含的任一字符。例如，"[abc]"匹配"plain"中的"a"。
|
|
[^xyz]
|
反向字符集。匹配未包含的任何字符。例如，"[^abc]"匹配"plain"中"p"，"l"，"i"，"n"。
|
|
[a-z]
|
字符范围。匹配指定范围内的任何字符。例如，"[a-z]"匹配"a"到"z"范围内的任何小写字母。
|
|
[^a-z]
|
反向范围字符。匹配不在指定的范围内的任何字符。例如，"[^a-z]"匹配任何不在"a"到"z"范围内的任何字符。
|
|
\b
|
匹配一个字边界，即字与空格间的位置。例如，"er\b"匹配"never"中的"er"，但不匹配"verb"中的"er"。
|
|
\B
|
非字边界匹配。"er\B"匹配"verb"中的"er"，但不匹配"never"中的"er"。
|
|
\cx
|
匹配 x 指示的控制字符。例如，\cM 匹配 Control-M 或回车符。x 的值必须在 A-Z 或 a-z 之间。如果不是这样，则假定 c 就是"c"字符本身。
|
|
\d
|
数字字符匹配。等效于 [0-9]。
|
|
\D
|
非数字字符匹配。等效于 [^0-9]。
|
|
\f
|
换页符匹配。等效于 \x0c 和 \cL。
|
|
\n
|
换行符匹配。等效于 \x0a 和 \cJ。
|
|
\r
|
匹配一个回车符。等效于 \x0d 和 \cM。
|
|
\s
|
匹配任何空白字符，包括空格、制表符、换页符等。与 [ \f\n\r\t\v] 等效。
|
|
\S
|
匹配任何非空白字符。与 [^ \f\n\r\t\v] 等效。
|
|
\t
|
制表符匹配。与 \x09 和 \cI 等效。
|
|
\v
|
垂直制表符匹配。与 \x0b 和 \cK 等效。
|
|
\w
|
匹配任何字类字符，包括下划线。与"[A-Za-z0-9_]"等效。
|
|
\W
|
与任何非单词字符匹配。与"[^A-Za-z0-9_]"等效。
|
|
\xn
|
匹配 n，此处的 n 是一个十六进制转义码。十六进制转义码必须正好是两位数长。例如，"\x41"匹配"A"。"\x041"与"\x04"&"1"等效。允许在正则表达式中使用 ASCII 代码。
|
|
\num
|
匹配 num，此处的 num 是一个正整数。到捕获匹配的反向引用。例如，"(.)\1"匹配两个连续的相同字符。
|
|
\n
|
标识一个八进制转义码或反向引用。如果 \n 前面至少有 n 个捕获子表达式，那么 n 是反向引用。否则，如果 n 是八进制数 (0-7)，那么 n是八进制转义码。
|
|
\nm
|
标识一个八进制转义码或反向引用。如果 \nm 前面至少有 nm 个捕获子表达式，那么 nm 是反向引用。如果 \nm 前面至少有 n 个捕获，则 n 是反向引用，后面跟有字符 m。如果两种前面的情况都不存在，则 \nm 匹配八进制值 nm，其中 n 和 m 是八进制数字 (0-7)。
|
|
\nml
|
当 n 是八进制数 (0-3)，m 和 l 是八进制数 (0-7) 时，匹配八进制转义码 nml。
|
|
\un
|
匹配 n，其中 n 是以四位十六进制数表示的 Unicode 字符。例如，\u00A9 匹配版权符号 (©)。
|
5.使用场景
1.验证表单：手机号表单：用户只能输入11位数字
const reg=/^[0-9]{11}$/
reg.test(input.value);
2.表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/login_bg.jpg") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
.error{
color:red;
}
#td_sub{
padding-left: 150px;
}
</style>
<script>
/*
分析：
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true
如果有一个为false，则监听器方法返回false
2.定义一些方法分别校验各个表单项。
3.给各个表单项绑定onblur事件。
*/
window.onload = function(){
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function(){
//调用用户校验方法 chekUsername();
//调用密码校验方法 chekPassword();
//return checkUsername() && checkPassword();
return checkUsername() && checkPassword();
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校验用户名
function checkUsername(){
//1.获取用户名的值
var username = document.getElementById("username").value;
//2.定义正则表达式
var reg_username = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg_username.test(username);
//4.提示信息
var s_username = document.getElementById("s_username");
if(flag){
//提示绿色对勾
s_username.innerHTML = "<img width='35' height='25' src='img/login_bg.jpg'/>";
}else{
//提示红色用户名有误
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
//校验密码
function checkPassword(){
//1.获取用户名的值
var password = document.getElementById("password").value;
//2.定义正则表达式
var reg_password = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg_password.test(password);
//4.提示信息
var s_password = document.getElementById("s_password");
if(flag){
//提示绿色对勾
s_password.innerHTML = "<img width='35' height='25' src='img/login_bg.jpg'/>";
}else{
//提示红色用户名有误
s_password.innerHTML = "密码格式有误";
}
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用
户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输
入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email"
placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name"
placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel"
placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday"
placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode"
placeholder="请输入验证码">
<img id="img_check" src="img/login_bg.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注
册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
