Lession05 javascript内置对象
2023-04-26 本文已影响0人
任人渐疏_Must
正则表达式试用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正则表达式试用案例</title>
<script>
//用正则表达式验证用户名为数字、字母、下划线组成
function checkName(){
//获取用户名的值
var strName = document.myform.user_name.value;
var reg = /\w/; //正则表达式，\反斜杠表示转义字符，\w将w转义为匹配字母或数字或下划线
result = reg.test(strName); //验证测试用户名是否符合正则表达式 （只要有字母数字或下划线都是真）
return result;
}
</script>
</head>
<body>
<!-- 用户名中的字符只能是数字、字母、下划线 -->
<form action="demo01_hello.html" name="myform" onsubmit="return checkName();">
<input type="text" name="user_name">
<input type="submit" value="验证">
</form>
</body>
</html>
正则表达式语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式语法</title>
<script>
var str = "atat2At";
console.log(str);
//1.常规模式
// var reg = /at/;
// var newReg = str.replace(reg,"D");
// console.log(newReg);
//2.全局模式
// var reg = /at/g;
// var newReg = str.replace(reg,"D");
// console.log(newReg);
//3.全局且大小写不敏感模式
var reg = /at/gi;
var newReg = str.replace(reg,"D");
console.log(newReg);
</script>
</head>
<body>
</body>
</html>
test()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test()方法</title>
<script>
//test():方法用于检测一个字符串是否匹配某个模式，返回布尔
function isPhoneNumber(telphone){
//验证座机号
var reg = /^\d{3,4}[-]\d{7,8}$/;
console.log(reg.test(telphone));
}
isPhoneNumber("0917-12345678");
</script>
</head>
<body>
</body>
</html>
replace()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replace()方法</title>
<script>
var str = "[aaaa";
console.log(str);
var par = /\[/;
//用文字替代‘[’
var a = str.replace(par,"我本身是一个左中括号");
console.log(a);
</script>
</head>
<body>
</body>
</html>
compile()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>compile()方法</title>
<script>
//js中compile()能够重新编译正则表达式，简单理解就是使用新的正则表达式去替换旧的正则表达式
var str = "hello world! hello 程序员";
var patt = /hell/g;
var str2 = str.replace(patt,'你好');
console.log(str2);
var pat = /hello/g;
patt.compile(pat);
str2 = str.replace(patt,"你好");
console.log(str2);
</script>
</head>
<body>
</body>
</html>
exec()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>exec()方法</title>
<script>
//exec():用于检索字符串中的正则表达式的匹配，返回一个数组，其中存放匹配的结果。如果找不到匹配，则返回Null
var str = "Hello world!";
//查找“Hello”
var patt = /Hello/g;
var result = patt.exec(str);
console.log(result);
//查找“RUNOOB"
patt = /RUNOOB/g;
result=patt.exec(str);
console.log(result);
</script>
</head>
<body>
</body>
</html>
表单验证案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证案例</title>
<link rel="stylesheet" href="css/demo07.css">
<script type="text/javascript" src="js/demo07.js"></script>
</head>
<body>
<form action="#" id="form" name="myform" onsubmit="return check();">
<div class="demo">
<ul>
<li>
<label for="iptqq">Q Q:</label>
<input type="text" id="iptqq" name="iptqq" >
<span></span>
</li>
<li>
<label for="iptPhone">手机:</label>
<input type="text" id="iptPhone" name="iptPhone">
<span></span>
</li>
<li>
<label for="iptEmail">邮箱:</label>
<input type="text" id="iptEmail" name="iptEmail">
<span></span>
</li>
<li>
<label for="iptNum">座机:</label>
<input type="text" id="iptNum" name="iptNum">
<span></span>
</li>
<li>
<label for="iptName">姓名:</label>
<input type="text" id="iptName" name="iptName">
<span></span>
</li>
<li>
<input type="submit" value="注册">
</li>
</ul>
</div>
</form>
</body>
</html>
//外部js文件
function check(){
var qq = document.myform.iptqq.value;
console.log(qq);
var phone = document.myform.iptPhone.value;
var email = document.myform.iptEmail.value;
var num = document.myform.iptNum.value;
var name = document.myform.iptName.value;
//验证QQ
var rxqq = /^[1-9][0-9]{4,10}$/;
//验证手机
var rxPhone = /^(13[0-9]|15[0-9]|18[0-9]|17[678]|14[57])[0-9]{8}$/;
//验证邮箱
var rxEmail = /^\w+@\w+\.\w+$/;
//验证座机
var rxNum = /^0[0-9]{2,3}-[0-9]{7,8}$/;
//验证姓名
var rxName = /^[\u4E00-\u9FA5]{2,}$/;
if(!rxPhone.test(phone)){
alert("输入的phone格式不正确");
return false;
}
if(!rxEmail.test(email)){
alert("输入的QQ格式不正确");
return false;
}
if(!rxNum.test(num)){
alert("输入的座机格式不正确");
return false;
}
if(!rxName.test(name)){
alert("输入的name格式不正确");
return false;
}
}
