JavaScript Foundation - (Regular Expression/Event Listening and Binding)

regular expression

Create a regular expression:

Method 1: var reg = /pattern/;

Method 2: var reg = new RegExp('pattern');

Common methods for RegExp objects:

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var str = 'awddsafasei';
			var reg = new RegExp('weiwel');
			var reg = /weiwei/;
		
			//There are two methods exec() in a regular expression: return, qualified string test():
			alert(reg.exec(str));
			alert(reg.test(str));
			
		</script>
	</head>
	<body>
	</body>
</html>

 

 

Output:

    

2. Common wildcards supported by regular expressions

3. Regular expression quantifiers

4. Regular expression modifiers

Case:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var str = 'awddsafasei';
		var reg = /^a(\w){2,}i$/g;
			//There are two methods exec() in a regular expression: return, qualified string test():
			alert(reg.exec(str));
			alert(reg.test(str));
			
		</script>
	</head>
	<body>
	</body>
</html>

 

 

 

Output:

     

Event Binding

HTML events:

Example: Click a button to pop up a warning box

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<input type="button" id="button1" value="button1"/>
		
	</body>
	<script type="text/javascript">
		document.getElementById("button1").onclick = fun;	
		
		function fun(){
			alert('hello');
		}
	</script>
</html>

Output: Click - Eject

     

event listeners

Use return values to change the default behavior of HTML elements (you can prevent their default behavior by adding return false to binding events)

Universal event monitoring methods:

1. Bind HTML element properties

<input type ="button" value="click" onclick="check(this)"/ >

2. Bind DOM Object Properties

document.getElementById("btn1").onclick=test;

It is recommended to use browser-independent event binding whenever possible to ensure better cross-browser features

Event listening methods in standard DOM:

1.[object].addEventListener("Event Type", "Handler Function", "Bubble Event or Capture Event")

2.[object].removeEventListener("Event Type", "Handler Function", "Bubble Event or Capture Event")

Case:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="username" value="" />
		<div id="div1" style="width:100px;height: 50px;background: red;">
			<input type="button" id="button1" value="button1"/>
		</div>
		
	</body>
	
	<script type="text/javascript">
		var username = document.getElementById("username");
		/*username.addEventListener("focus",function(){
			alert('focus');
		})
		*/
        // Get focus pop-up alert box
		username.onblur = function(){
			alert('blur');
		}
		//Focus disappears pop-up warning box
		
		var btn = document.getElementById("button1");
		var div1 = document.getElementById("div1");
		
		btn.addEventListener("click",btnclick);
		
		function btnclick(){
			alert('button');
		}
		
		div1.addEventListener("click",function(){
			alert('div1');
		},false);
		
		div1.addEventListener("mouseout",function(){
			alert('mousedo');
		})
        //Warning box pops up when mouse moves into div1
	</script>
</html>

 

 

Output: Click, get focus, lose focus, move the mouse into the red area will pop up the alert box

,

Comprehensive Case: Registration Verification

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			//User name: <input type="text" id="username" onchange="checkUn()"/>
			<span id="unspan" style="color: red;">
				
			</span><br />
			//Password: <input type="text" id="password"/><br />
			//Mobile number: <input type="text" id="phone" onchange="checkPhone()"/>
			<span id="phonespan" style="color: red;">
				
			</span>
			<br />
			//Mailbox: <input type="text" id="email" onchange="checkEmail()"/>
			<span id="emailspan" style="color: red;">
				
			</span>
			<br />
			
			<input type="submit" value="Submit"/>
		</form>
	</body>
	<script type="text/javascript">
		
		
		//Verify user name
		function checkUn(){
			var reg = /(\w){4,}/
			var username = document.getElementById("username").value;
			if(!reg.test(username)){
				document.getElementById('unspan').innerHTML = 'User name must have at least four characters';
			}else{
				document.getElementById('unspan').innerHTML = '';			
			}
		}
		
		function checkPhone(){
			//15944556789
			var reg = /^1[3578](\d){9}/;
			var phone = document.getElementById("phone").value;
			if(!reg.test(phone)){
				document.getElementById('phonespan').innerHTML = 'Incorrect mobile number format';
			}else{
				document.getElementById('phonespan').innerHTML = '';
			}
		}
		
		function checkEmail(){
			//weiwei234@163.com.cn
			var reg = /^[a-zA-Z_](\w){2,12}@[a-zA-Z0-9]{2,7}((\.)([a-zA-Z]){2,3}){1,2}$/;
			var email = document.getElementById("email").value;
			if(!reg.test(email)){
				document.getElementById('emailspan').innerHTML = 'Mailbox format is incorrect';
			}else{
				document.getElementById('emailspan').innerHTML = '';
			}
		}
	</script>
</html>

Output:

 

 

Tags: Javascript Mobile

Posted on Tue, 14 Jan 2020 11:10:42 -0500 by cajun225