一、本课目标
- 掌握使用正则表达式验证表单内容
为什么需要正则表达式？
- 简洁的代码
- 严谨的验证文本框中的内容
比如：
image.png
二、正则表达式
2.1定义正则表达式
1、普通方式
语法：
var reg = /表达式/附加参数
image.png
分析：这里的表达式可以是字符串，代表着某种规则。附加参数有三种情况，用来扩展表达式的含义。第一种是上面图片中的第二行的“g”，代表着可以进行全局匹配；还可以使用“i”，代表不区分格式中的大小写；还有一个参数是“m”，代表可以进行多行匹配。
2、构造函数
语法：
var reg = new RegExp("表达式", "附加参数");
image.png
上面两种定义方式的区别：普通方式中的表达式必须是一个常量字符串；构造函数中的表达式可以是常量字符串，也可以是JavaScript中的一个常量。
2.2表达式的模式
1、简单模式
只能表示具体的匹配。
例：
var reg = /china/;
var reg = /abc8/;
2、复合模式
可以使用通配符表达更为抽象的规则模式。
image.png
2.3RegExp对象
RegExp对象的方法和属性：
image.png
2.4String对象
String对象的方法：
image.png
2.5正则表达式的符号
image.png
image.png
2.6正则表达式的应用
用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话等。
1、验证邮政编码和手机号码
- 中国的邮政编码都是6位
-
手机号码都是11位，并且第一位都是1
image.png
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证邮编和手机号码</title>
<style type="text/css">
body {
line-height: 25px;
}
input {
width: 120px;
height: 16px;
}
div {
color: #F00;
font-size: 12px;
display: inline-block;
padding-left: 5px;;
}
ul,li{list-style: none;}
</style>
</head>
<body>
<ul>
<li>邮政编码：<input id="code" type="text" /><div id="divCode"></div></li>
<li>手机号码：<input id="mobile" type="text" /><div id="divMobile"></div></li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
// 验证邮政编码
$("#code").blur(function () {
var code = $(this).val();
var $codeId = $("#divCode");
var regCode = /^\d{6}$/;
if (regCode.test(code) == false){
$codeId.html("邮政编码不正确，请重新输入！");
return false;
}
$codeId.html("");
return true;
})
// 验证手机号
$("#mobile").blur(function(){
var mobile = $(this).val();
var $mobileId = $("#divMobile");
var regMobile = /^1\d{10}$/;
if (regMobile.test(mobile) == false){
$mobileId.html("电话号码格式不正确，请重新输入！");
return false;
}
$mobileId.html("");
return true;
})
})
</script>
</body>
</html>
2、验证年龄
image.png
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证年龄</title>
<style type="text/css">
span{color: #ff0000; padding-left: 5px; font-size: 12px;}
</style>
</head>
<body>
年龄： <input id="age" type="text"/><span id="divAge"></span>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#age").blur(function(){
var age = $(this).val();
var $ageId = $("#divAge");
var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
if (regAge.test(age) == false) {
$ageId.html("年龄不正确，请重新输入");
return false;
}
$ageId.html("");
return true;
})
})
</script>
</body>
</html>
三、总结
image.png
