正则表达式 - 技术栈

[1. 初识正则表达式](#1. 初识正则表达式)

[1.1. 正则表达式概述](#1.1. 正则表达式概述)

[1.2. 正则表达式使用](#1.2. 正则表达式使用)

[1.3. 第一个例子](#1.3. 第一个例子)

[2. 正则表达式的匹配规则](#2. 正则表达式的匹配规则)

[2.1. 字符类匹配](#2.1. 字符类匹配)

[2.2. 元字符匹配](#2.2. 元字符匹配)

1.普通字符

2.元字符（特殊字符）

[2.3 边界符](#2.3 边界符)

[2.4. 量词](#2.4. 量词)

[2.5 范围](#2.5 范围)

[2.6. 字符类](#2.6. 字符类)

[3. 常见的正则表达式](#3. 常见的正则表达式)

[3.1. 数字校验](#3.1. 数字校验)

[3.2. 字符校验](#3.2. 字符校验)

[3.3. 特殊需求校验](#3.3. 特殊需求校验)

[4. 正则表达式的语法明细](#4. 正则表达式的语法明细)

5.使用场景

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 $') \^开始，$ 结束

java 复制代码

var reg = new RegExp('^a$'); // 第一种方式

第二种方式: var reg = /^a$/;

java 复制代码

var reg = /^a$/; // 第二种方式 在js中推荐使用

1.3. 第一个例子

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<input type="text" id="name" />&nbsp;&nbsp;
<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' 之前的位置。
如果^和$在一起，表示必须是精确匹配

java 复制代码

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 次

注意：
逗号左右两侧千万不要出现空格

javascript 复制代码

//元字符之量词
//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'))//false

2.5 范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

javascript 复制代码

//元字符之范围[]
//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)) // true

2.6. 字符类

某些常见模式的简写方式，区分字母和数字

3. 常见的正则表达式

3.1. 数字校验

数字：^[0-9]*$
n位的数字：^\d{n}$
至少n位的数字：^\d{n,}$
m-n位的数字：^\d{m,n}$
零和非零开头的数字：^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的负整数：^\-[1-9][0-9] *$ 或 ^-[1-9]\d*$
非负整数：^\d+$ 或 ^[1-9]\d*|0$
非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$
负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$
浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

3.2. 字符校验

汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$
可以输入含有^%&',;=? $\\"等字符：\[\^%\&',;=?$ \x22]+
禁止输入含有~""的字符：[^~\x22]+

3.3. 特殊需求校验

Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
InternetURL：^ http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手机号码：^(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}$
国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
身份证号(15位、18位数字)：^\d{15}|\d{18}$
短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一个月的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"。 |
| \c x | 匹配 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_]"等效。 |
| \x n | 匹配 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 。 |
| \u n | 匹配 n ，其中 n 是以四位十六进制数表示的 Unicode 字符。例如，\u00A9 匹配版权符号 (©)。 |

5.使用场景

1.验证表单：手机号表单：用户只能输入11位数字

javascript 复制代码

const reg=/^[0-9]{11}$/
reg.test(input.value);

2.表单验证

html 复制代码

<!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>