版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34928644/article/details/80980422
先认识一下正则表达
1.概念
在编写处理字符串的程序时，经常会有查找符合某些复杂规则的字符串的需要，正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。
正则表达式类似Windows下的通配符*和?。只不过比起通配符，它能更精确地描述你的需求——当然，代价就是更复杂——比如你可以编写一个正则表达式，用来查找所有以0开头，后面跟着2-3个数字，然后是一个连字号“-”，最后是7或8位数字的字符串（像010-12345678或0123-1234567 ）。
简言之，正则表达式是用于进行文本匹配的工具，也是一个匹配的表达式。
2.常用的元字符
. 匹配除换行符以外的任意字符\w 匹配字母或数字或下划线(\W 匹配其它字符)
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,m} 重复n到m次
[ ] 中括号表示可选
3.常用实例
JS中正则的运用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--表单验证(正则表达式)技术的演示</title>
<style type="text/css">
</style>
<script type="text/javascript">
function checkUserName(oInput){
var val = oInput.value;
var oSpan = document.getElementById("span1");
if( val.indexOf("hncu") == 0 ){//应该用正则表达式来做格式校验
oSpan.innerHTML="用户名已存在,请换一个!".fontcolor("red").bold();
}else{
oSpan.innerHTML="用户名格式正确!".fontcolor("green").bold();
}
}
/////////////////以下演示正则表达式///////////////////////
/* jScript(API文档) --> 语言参考 -->JScript对象 --> 正则表达式对象
* 正则表达式对象
本对象包含正则表达式模式以及表明如何应用模式的标志。
语法 1:
re = /pattern/[flags]
语法 2:
re = new RegExp("pattern",["flags"])
flags取值:
g （全文查找出现的所有 pattern）
i （忽略大小写）
m （多行查找）
*/
//演示语法1 : re = /pattern/[flags]
function demo1(){
var reg = /^[0-9]{6}$/; //有且只有6位数字
var str =document.getElementById("str1").value;
//String对象中的match()方法的功能类似Java中的Matcher类的matches()方法的功能
//正则表达式(RegExp)对象中有一个方法regExp.test(str)，它的功能类似Java中的str.matches(regExp) ---二者的调用对象与参数相反
alert( reg.test(str) );
}
//演示语法2 : re = new RegExp("pattern",["flags"])
function demo2(){
//var reg = new RegExp("^[a-z]{4}$","i"); //有且只有4个字母，忽略大小写
var reg = new RegExp("^[a-z]{4}","i"); //以4个字母开头，忽略大小写 ,两个参数的引号都不能省略!
var str =document.getElementById("str1").value;
alert( reg.test(str) );
}
//演示语法1和语法2之间的一点小细节
function demo3(){
//var reg = /^\d{6}$/m; //有且只有6位数字 AC
//var reg = new RegExp("^\d{6}$","m"); //WA,该方式下，正则表达式中的特殊字符必须转义，即"\d"要写成"\\d",其它特殊字符同理
var reg = new RegExp("^\\d{6}$","m"); //有且只有6位数字 AC
var str =document.getElementById("str1").value;
alert( reg.test(str) );
}
</script>
</head>
<body>
<h3>DOM--表单验证(正则表达式)技术的演示</h3>
<form action="" method="post">
用户姓名:<input type="text" name="name" onblur="checkUserName(this);">
<span id="span1"></span>
<br/>
密 码:<input type="password" name="pwd"> <br/>
确认密码:<input type="password" name="pwd2"> <br/>
<input type="submit" value="注册">
</form>
<hr/>
请输入要校验的字符串:<input type="text" id="str1"> <br/>
<button onclick="demo1()">js中的正则表达式技术演示1</button>
<button onclick="demo2()">js中的正则表达式技术演示2</button>
<button onclick="demo3()">js中的正则表达式技术演示3</button>
</body>
</html>表单验证
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--表单验证(正则表达式)技术的演示</title>
<style type="text/css">
</style>
<script type="text/javascript">
/* 代码抽取前的过渡版
function checkUser(){
var val = document.getElementsByName("user")[0].value;
var oSpan = document.getElementById("userspan");
var reg = /^hncu/i; //用户名必须以"hncu"开头
var bFlag = reg.test(val);
if( bFlag ){
oSpan.innerHTML="用户名格式正确!".fontcolor("green").bold();
}else{
oSpan.innerHTML="用户名格式不正确!".fontcolor("red").bold();
}
return bFlag;
}
function checkPwd(){
var val = document.getElementsByName("pwd")[0].value;
var oSpan = document.getElementById("pwdspan");
var reg = /^\w{6,9}$/i; //至少6~9位字母、数字或下划线
var bFlag = reg.test(val);
if( bFlag ){
oSpan.innerHTML="密码符合要求!".fontcolor("green").bold();
}else{
oSpan.innerHTML="密码必须6~9位!".fontcolor("red").bold();
}
return bFlag;
}
*/
function check(name,spanId,reg,okInfo,errInfo){
var val = document.getElementsByName(name)[0].value;
var oSpan = document.getElementById(spanId);
var bFlag = reg.test(val);
if( bFlag ){
oSpan.innerHTML=okInfo.fontcolor("green").bold();
}else{
oSpan.innerHTML=errInfo.fontcolor("red").bold();
}
return bFlag;
}
function checkUser(){
var reg = /^hncu/i; //用户名必须以"hncu"开头
return check("user","userspan",reg,"用户名格式正确!","用户名格式不正确!");
}
function checkPwd(){
var reg = /^\w{6,9}$/i; //至少6~9位字母、数字或下划线
return check("pwd","pwdspan",reg,"密码符合要求!","密码必须6~9位!");
}
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail","mailspan",reg,"邮箱格式正确!","邮箱格式错误!");
}
function checkPwd2(){
//把两个密码框中的字符串获取出来，看看是否完全相同
var pwd = document.getElementsByName("pwd")[0].value;
var pwd2 = document.getElementsByName("pwd2")[0].value;
var oSpan = document.getElementById("pwd2span");
var bFlag;
if(pwd==pwd2){
oSpan.innerHTML="两次密码一致".bold().fontcolor("green");
bFlag=true;
}else{
oSpan.innerHTML="两次密码不一致".bold().fontcolor("red");
bFlag=false;
}
return bFlag;
}
//控制表单提交
function checkForm(){
if( checkUser() && checkPwd() && checkMail() && checkPwd2() ){
return true;
}
return false;
}
//手动提交
function mySubmit(){
var oForm = document.getElementById("regForm");
//if( checkUser() && checkPwd() && checkPwd2() && checkMail() ){
if( checkForm() ){
oForm.submit(); //手动提交动作
}
}
</script>
</head>
<body>
<h2>表单校验与提交的综合例子---以用户注册为例</h2>
<form onsubmit="return checkForm();" id="regForm" action="aa" method="post" >
用户名称 :<input type="text" name="user" onblur="checkUser();"/>
<span id="userspan"></span> <br/>
输入密码 :<input type="password" name="pwd" onblur="checkPwd();"/>
<span id="pwdspan"></span> <br/>
确认密码 :<input type="password" name="pwd2" onblur="checkPwd2();"/>
<span id="pwd2span"></span> <br/>
邮箱地址 :<input type="text" name="mail" onblur="checkMail();"/>
<span id="mailspan"></span> <br/>
<input type="submit" value="注册"/>
</form>
<!--下面两个手动提交表单的按钮放不放在表单内都行-->
<button onclick="mySubmit()">手动提交表单</button>
<img src="logon.jpg" onclick="mySubmit()"/>
</body>
</html>