JavaScript正则基础+表单验证

最新推荐文章于 2022-12-19 22:25:35 发布

forsun_

最新推荐文章于 2022-12-19 22:25:35 发布

阅读量132

点赞数

分类专栏：正则文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/runforsun_liu/article/details/113347286

版权

正则专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript正则基础+表单验证

①概念：正则表达式是一种表述字符串结构的语法规则，是一个特定的格式模式。可以匹配、替换、截取匹配的字串

②正则表达式字符串构成

位置元字符

行定位符就是用来描述字符串的边界。
“^” 表示行的开始

 //^ 位置元字符 规定了字符串的开头是谁
var  pt=/^a/;//要求字符串以a为开头
console.log(pt.test('apple'));
console.log(pt.test('banner'));

“$” 表示行的结束

//$  位置元字符串 规定了以谁为结尾
var pt1=/p$/;
console.log( pt1.test('app'));
console.log( pt1.test('apple'));

字符串元字符
这些字符用来描述一类或者一组字符

A．[ ] 字符类一个括号只能匹配一个字符。

 //[]一个括号只能匹配一个字符
var pt2=/^[0-9|X]$/;//或者的意思  0-9之间的数字或者是X
console.log( pt2.test("3"));

B.()选择字符

 var pt4=/^(apple|banner)$/;
console.log( pt4.test('apple'));

C. - 连字符

var pt2=/^[0-9|X]$/;//或者的意思  0-9之间的数字或者是X
console.log( pt2.test("3"));
var pt3=/^[a-zA-Z]$/;//匹配小写a-z  A-Z之间的任意一个字符
console.log( pt3.test('A'));

D.[^]排除字符

//不能以数字开头
var  pt5=/^[^0-9]$/;
console.log(pt5.test('A'));

E.(.)任意字符

 //任意字符
var pt6=/^.$/;//匹配任意一位字符
console.log(pt6.test(0));

F.()转译字符 eg: {\i (忽略大小写) \表示转义字符，把带有正则表达式意义的字符转义成普通字符}

 //转义字符
var  pt7=/^\.$/;
console.log(pt7.test('.'));

G.正则表达式中，有些字符本身没有特殊含义，前面加上\ 就具有特殊意义。

\d 任意十进制数[0-9]
var pt8=/^\d\d$/;//\d匹配0-9之间的任意一位字符
console.log(  pt8.test('10'));

\D 任意非十进制数[^0-9]
\s 任意空白字符
\S 任意非空白字符
\w 任意单词字符[a-zA-Z0-9_]
var pt9=/^\w$/;//[a-zA-Z_]
console.log( pt9.test(’_’));

\W 任意非单词字符[^z-aA-Z_]
数量元字符（限定类）
对于重复出现的字母或字串，可以使用限定类字符来实现匹配，限定符主要有下面6种。
？匹配前面一次或0次

var  pt1=/^\w?$/;//？匹配0次或1次
console.log(pt1.test('a'));

匹配前面一次或多次

var pt2=/^\w+@\w+\.com$/;//+ 匹配一次或多次
console.log(	pt2.test("@4.com3432@qq.com"))

匹配前面0次或多次

var  pt3=/^[0-9]*$/;//匹配0次或多次
console.log(	pt3.test("1ewewe"));

{n} 匹配前面n次

{n,} 匹配前面至少n次

{n,m} 匹配前面至少n次最多m次

  正则表达式.test()返回true或false 表示是否存在模式

4．字符集

        [0-9] 数字0-9之间任意数字
        [a-z] 小写字母集合
        [A-Z] 大写字母集合
        [0-9a-zA-Z_] 所有非特殊字符集合 不能有特殊字符
       相反集合 ^
        [^0-9] 非数子  
        [^a-z] 非小写字母集合
        [^A-Z] 非大写字母集合
        [^0-9a-zA-Z] 所有特殊字符集合
       
        \d = [0-9]
        \D = [^0-9]   
        \w = [A-Za-z0-9_]
        \W = [^A-Za-z0-9_]

综合案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var  falg1=true;
			var  falg2=true;
			var  falg3=true;
			var  falg4=true;
			var  falg5=true;
			var  falg6=true;
			var  falg7=true;
			//验证用户名是否正确
			function fun1(){
	         var username=	document.getElementById("username").value ;
			 //汉字的正则匹配
			 var pt=/^[\u4e00-\u9fa5]{2,10}$/;//匹配中文 至少2次
		      if(pt.test(username)){
				 	  document.getElementById("word1").innerText="√"; 
					  falg1=true;
				  
			  }else{
				  document.getElementById("word1").innerText="用户名输入格式不正确"; 
				    falg1=false;
				
			  }
			 }
			 //验证密码是否正确
			 function   fun2(){
				var  pwd=		document.getElementById("pwd").value; 
				var  pt1=/^\w{6,15}$/;
			  if(	pt1.test(pwd)){
				  document.getElementById("word2").innerText="√"
				    falg2=true;
			  }else{
				   document.getElementById("word2").innerText="密码格式不正确";
				       falg2=false;
				   
			  }
			 }
			 function  fun3(){
			 var  repwd=document.getElementById("repwd").value; 
			 var  pwd=document.getElementById("pwd").value;
			 if(repwd!=pwd){
			   document.getElementById("word3").innerText="密码不一致";	 
			     falg3=true;
			    
			 }else{
				 document.getElementById("word3").innerText="√"
				  falg3=false;
			 }
			 }
			 function  fun4(){
				var  email= document.getElementById('email').value;
				//943243@qq.com
				//dhfldshf@163.com
				var  pt=/^\w{1,}@\w{1,}\.com$/;
			   if( pt.test(email)){
				 document.getElementById("word4").innerText="√";
			    }else{
					document.getElementById("word4").innerText="邮箱格式不正确";
					 
					
				}
			 }
			 //手机号码格式验证
			 function fun5(){
			  var  tel=	 document.getElementById("tel").value;//获取手机号码的值
			  var  pt5=/^1[3|5|7|8][0-9]{9}$/;//书写手机号码的正则
				if(  pt5.test(tel)){//判断输入的格式是否正确
					 document.getElementById("word5").innerText="√"
				}else{
					document.getElementById("word5").innerText="手机号格式不正确";
					 
					
				}
			 }
			 //验证用户输入的身份证号码是否正确
			 function  fun6(){
			 var  idcard=document.getElementById("idcard").value; //获取用户输入身份证号码
			 var  pt6=/^[0-9]{17}[0-9|X]$/;//书写身份证号的正则
			  if( pt6.test(idcard)){//使用正则验证身份证号是否正确
				     document.getElementById("word6").innerText="√";//将word6的值改为√
			  }else{
				    document.getElementById("word6").innerText="身份证号码格式不正确";//将word6的值改为提示信息
					  
					
			  }
			 }
			 function  fun7(){
				 var  code=document.getElementById("code").value;
				 var pt7=/^[a-zA-Z]{4}$/;
				if(pt7.test(code)){
					 document.getElementById("word7").innerText="√";//将word6的值改为√
				}else{
					document.getElementById("word7").innerText="验证输入格式不正确";//将word6的值改为√
					
					
				}
			 }
			 function  add(){
		      fun1();fun2(); fun3()
			 if(falg1 &&  falg2 &&  falg3){
				 console.log("ok");
			 }else{
				 return  false;
			 }
				 
			 }
			 
			
		</script>
	</head>
	<body>
		
		<form action="index2.html" method="get" onsubmit="return  add()">
			姓名：<input type="text" id="username" onblur="fun1()"><span id="word1"></span><br>
			密码：<input type="password" id="pwd" onblur="fun2()"><span id="word2"></span><br>
			确认密码：<input type="password" id="repwd" onblur="fun3()"><span id="word3"></span><br>
			邮箱:<input type="email" id="email" onblur="fun4()"><span id="word4"></span><br>
			手机号:<input type="tel" id="tel" onblur="fun5()"><span id="word5"></span><br>
			身份证号：<input type="text" id="idcard" onblur="fun6()"><span id="word6"></span><br>
			验证码：<input type="text" id="code" onblur="fun7()"><span id="word7"></span> ancd<br>
			<input type="submit" value="提交"><br>

		</form>
	</body>
</html>

forsun_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript正则基础+表单验证

JavaScript正则基础+表单验证①概念：正则表达式是一种表述字符串结构的语法规则，是一个特定的格式模式。可以匹配、替换、截取匹配的字串②正则表达式字符串构成位置元字符行定位符就是用来描述字符串的边界。“^” 表示行的开始 //^ 位置元字符规定了字符串的开头是谁var pt=/^a/;//要求字符串以a为开头console.log(pt.test('apple'));console.log(pt.test('banner'));“$” 表示行的结束//$ 位置元字符串规
复制链接

扫一扫