正则表达式的创建
语法形式:/^$/(^开头$结尾)正则表达式类型检测为object
// 创建正则表达式
var regexp1=/^\d{6}$/;
var regexp2=new RegExp('^\\d{6}$');
元字符
方括号表示法
面试:请验证某字符串是否是4位小写字母,且最后一位不能是m字母
var regexp=/^[a-z]{3}[a-ln-z]$/;
量词
//题目1 验证手机号码11位 并且1开头
var regexp1=/^1\d{10}$/;
//题目2 验证字符串:以字母开头,中间任意位数字(至少一位),字母为结尾
var regexp2=/^[a-zA-Z]\d+[a-zA-Z]$/;
//题目3 验证字符串:以www.开头,中间任意位字符(字母数字下划线至少一位),最后以.com结尾,也可以以.com.cn结尾
var regexp3=/^www\.\w+\.com(\.cn)?$/;
修饰符
正则表达式的相关方法
字符串的相关方法
var str='abc123def456gh789';
//replace()方法
var result1=str.replace(/[a-z]+/g,'*');
console.log(result1); //*123*456*789
//split()方法
var result2=str.split(/\d+/g);
console.log(result2); //["abc","def","gh",""]
var result3=str.search(/\d+/g);
var result4=str.search(/m/g);
console.log(result3); //3
console.log(result4); //-1
var result5=str.match(/\d+/g);
console.log(result5); //["123","456","789"]
正则表达式的应用(表单验证)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.warning {
color: red;
display: none;
}
</style>
</head>
<body>
<div>
<p>
请输入中文姓名:
<input type="text" id="nameField">
<span class="warning" id="nameWarning">输入的姓名不合法</span>
</p>
<p>
请输入手机号码:
<input type="text" id="telField">
<span class="warning" id="telWarning">输入的手机号码不合法</span>
</p>
<p>
请输入Email:
<input type="text" id="emailField">
<span class="warning" id="emailWarning">输入的Email不合法</span>
</p>
</div>
<script>
var nameField = document.getElementById('nameField');
var telField = document.getElementById('telField');
var emailField = document.getElementById('emailField');
var nameWarning = document.getElementById('nameWarning');
var telWarning = document.getElementById('telWarning');
var emailWarning = document.getElementById('emailWarning');
// 当文本框失去焦点,就是光标不在文本框中了
nameField.onblur = function () {
// 得到姓名
var name = nameField.value;
if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
// 如果通过校验
nameWarning.style.display = 'none';
} else {
// 如果没有通过校验
nameWarning.style.display = 'inline';
}
};
telField.onblur = function () {
// 得到电话
var tel = telField.value;
if (/^1\d{10}$/.test(tel)) {
// 如果通过校验
telWarning.style.display = 'none';
} else {
// 如果没有通过校验
telWarning.style.display = 'inline';
}
};
emailField.onblur = function () {
// 得到email
var email = emailField.value;
// 合法的email都是abc_def123@abc.net
if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {
// 如果通过校验
emailWarning.style.display = 'none';
} else {
// 如果没有通过校验
emailWarning.style.display = 'inline';
}
};
</script>
</body>
</html>