这篇博客就来总结一下正则表达式以及表单验证，由于最近在练习jQuery，所以就用jQuery来写一写。
一、正则表达式
正则表达式的作用是用来验证字符串的格式。虽然它的内容比较繁琐，但是功能很强大。它的写法很随意，但是要注意语法规则，在此前提下就可以自己随意拼接。
1、速查表
\ ：将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。
^ ：匹配输入字符串的开始位置。
$ ：匹配输入字符串的结束位置。
：匹配前面的子表达式零次或多次。
+：匹配前面的子表达式一次或多次。
?： 匹配前面的子表达式零次或一次。
{n}： n是一个非负整数。匹配确定的n次。
{n,}： n是一个非负整数。至少匹配n次。
{n,m}： m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。
?： 当该字符紧跟在任何一个其他限制符（,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。
.： 匹配除“\n”之外的任何单个字符。
x|y： 匹配x或y。
[xyz]： 字符集合。匹配所包含的任意一个字符。
[^xyz]： 负值字符集合。匹配未包含的任意字符。
[a-z]： 字符范围。匹配指定范围内的任意字符。
[^a-z]： 负值字符范围。匹配任何不在指定范围内的任意字符。
\b： 匹配一个单词边界，也就是指单词和空格间的位置。
\B： 匹配非单词边界。
\cx： 匹配由x指明的控制字符。
\d： 匹配一个数字字符。
\D： 匹配一个非数字字符。
\f： 匹配一个换页符。
\n： 匹配一个换行符。
\r： 匹配一个回车符。
\s： 匹配任何空白字符，包括空格、制表符、换页符等等。
\S： 匹配任何非空白字符。
\t： 匹配一个制表符。
\v： 匹配一个垂直制表符。
\w： 匹配包括下划线的任何单词字符。
\W： 匹配任何非单词字符。
\xn： 匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。
\num： 匹配num，其中num是一个正整数。对所获取的匹配的引用。
2、常用的正则表达式
用户名： /^[a-z0-9_-]{3,16}$/
密码： /^[a-z0-9_-]{6,18}$/
十六进制值： /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
电子邮箱： /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
URL： /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
IP 地址： /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
HTML 标签： /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
删除代码\\注释： (?<!http:|\S)//.*$
Unicode编码中的汉字范围： /^[\u2E80-\u9FFF]+$/
二、表单验证
表单验证是将表单中输入的内容进行正则检索，如果格式符合返回true，不符合返回false。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
width: 400px;
height: 470px;
border: 1px solid #000;
margin: auto;
}
li {
position: relative;
list-style: none;
margin: 30px 0;
text-align: center;
}
li.lilist > label {
display: inline-block;
width: 70px;
font-size: 13px;
text-align: right;
}
li.lilist > input {
display: inline-block;
width: 290px;
height: 27px;
line-height: 27px;
outline: none;
box-sizing: border-box;
padding-left: 10px;
border: 1px solid #c0c0c0;
}
.libtn > input {
width: 180px;
display: inline-block;
height: 30px;
outline: none;
font-size: 13px;
margin: 0 10px;
}
.info {
position: absolute;
width: 290px;
top: 26px;
font-size: 12px;
left: 90px;
text-align: left;
}
.info > span {
display: none;
}
.success {
color: #5fe01b;
}
.error {
color: #ff1c26;
}
</style>
</head>
<body>
<!--
action 提交给后台的路径 后台可以接收表单提交的数据
表单提交有两种方式 get 表单里面的数据会显示到路径的后边 www.baidu.com/insert?id=1*name=zhangsan; get提交不安全 但是数据量比较大
post 隐式提交 安全性比较高 数据量比较小
-->
<div class="block">
<form action="" method="post" class="formData">
<ul>
<li class="lilist">
<label>用户名：</label><input name="userid" class="userid" type="text"/>
<div class="info">
<span></span>
</div>
</li>
<li class="lilist">
<label>密码：</label><input name="userpwd" class="userpwd" type="password"/>
<div class="info">
<span></span>
</div>
</li>
<li class="lilist">
<label>确认密码：</label><input name="userpwdtwo" class="userpwdtwo" type="password"/>
<div class="info">
<span></span>
</div>
</li>
<li class="lilist"><label>邮箱：</label><input name="useremail" class="useremail" type="text"/></li>
<li class="lilist"><label>电话：</label><input name="usertel" class="usertel" type="text"/></li>
<li class="lilist"><label>地址：</label><input name="useraddress" class="useraddress" type="text"/></li>
<li class="lilist"><label>身份证：</label><input name="useridcard" class="useridcard" type="text"/></li>
<li class="libtn"><input type="submit" value="注册"/><input type="reset" value="清空"/></li>
</ul>
</form>
</div>
<script src="jquery/jquery.js"></script>
<script>
$(function () {
//验证的格式
var regForm = {
userid: function (index) {
var success = "*用户名输入正确！";
var error = "*用户名长度为6-10位，可以包含符号_、+、-、&、$、*";
//这些方法里面的this指针已经被替换为了$(this)
var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
if (this.val().match(reg)) {
$(".info").eq(index).find("span").removeClass().addClass("success").show().html(success);
}
else {
$(".info").eq(index).find("span").removeClass().addClass("error").show().html(error);
}
},
userpwd: function (index) {
var success = "*密码输入正确！";
var error = "*密码长度为8-10位，可以包含符号_、-";
var reg = /^[a-zA-Z0-9\_\-]{8,10}$/;
if (this.val().match(reg)) {
$(".info").eq(index).find("span").removeClass().addClass("success").show().html(success);
}
else {
$(".info").eq(index).find("span").removeClass().addClass("error").show().html(error);
}
},
userpwdtwo: function (index) {
var success = "*两次密码一致！";
var error = "*两次密码不一致";
if (this.val() == "") {
$(".info").eq(index).find("span").removeClass().addClass("error").show().html("*密码不能为空！");
}
else {
if (this.val() == this.parent().prev().find("input").val()) {
$(".info").eq(index).find("span").removeClass().addClass("success").show().html(success);
}
else {
$(".info").eq(index).find("span").removeClass().addClass("error").show().html(error);
}
}
},
useremail: function () {
console.log("useremail验证方法");
},
usertel: function () {
console.log("usertel验证方法");
},
useraddress: function () {
console.log("useraddress验证方法");
},
useridcard: function () {
console.log("useridcard验证方法");
}
};
//点击提交的时候一次性验证
$(".formData").submit(function () {
//在表单提交的时候 form的submit事件里面的返回值 影响表单的提交
//return false; 不提交
//return true 提交
$(".lilist").find("input").each(function (index) {
var className = $(this).attr("class");
//$(this) 替换对象里面的this
//call apply 替换对象的指针
//call(this,1,2)
//apply(this,[1,2])
//在你call 或者apply的时候回自动执行替换对象的方法
regForm[className].apply($(this), [index]);
});
//表单提交的时候 到底是true还是false
//根据当前页面是否存在error 类
var len = $(".error").length;
if (len) {
return false;
}
return true;
});
});
</script>
</body>
</html>
三、总结
在正则表达式和表单验证这里需要注意的是正则的使用，需要记忆这么多的正则数写规范，然后用它来实现检索和验证。
