Regular expression for js input box (a must-read tutorial for beginners)

Source code as follows:

<!DOCTYPE html>
<html>
	</head>
		<meta charset="UTF-8"-8">
		<title></</title>
	</</head>
	<body>
		Username:<input type="text"name = "user" id="user"/>
			 <span id="userSpan" style="font-size: 16pt;</span>
		<br />
		Password:<input type="text"name = "pwd" id="pwd"/>
			<span id="pwdSpan" style="font-size: 16pt;</span>
		<br />
		Confirm password:<input type="text"name = "pwd"2" id="pwd"2"/>
		<span id="pwd"2Span" style="font-size: 16pt;</span>
		<br />
		Email:<input type="text"name = "email" id="email"/>
		<span id="emailSpan" style="font-size: 16pt;</span>
		<br />
		Phone number:<input type="text"name = "phone" id="phone"/>
		<span id="phoneSpan" style="font-size: 16pt;</span>
		<br />
		ID Number:<input type="text"name = "status" id="status"/>
		<span id="statusSpan" style="font-size: 16pt;</span>
		<br />
		Address:<input type="text"name = "address" id="address"/>
		<span id="addressSpan" style="font-size: 16pt;</span>
		<br />
		<input type="button" value="Validate" onclick="verify()" />
		<script type="text/javascript">
			function verify() {
				//Username Verification
				var user = "";
				user = document.getElementById("user").value;
				var pattl = /^[A-Z][a-zA-Z0-9_]{6,20}$/;
				var result = pattl.test(user.trim());
				if (result) {
					document.getElementById("userSpan").innerHTML = "√"
					document.getElementById("userSpan").style.fontSize = "20pt"
				}
					document.getElementById("userSpan").innerHTML = "×"
				}
				//Password Verification
				var pwd = "";
				pwd = document.getElementById("pwd").value;
				var pattl = /^[A-Z][a-zA-Z0-9_]{8,15$/;
				var result = pattl.test(pwd.trim());
				if (result) {
					document.getElementById("pwdSpan").innerHTML = "√"
					document.getElementById("pwdSpan").style.fontSize = "20pt"
				}
					document.getElementById("pwdSpan").innerHTML = "×"
				}
				//Password Confirmation Verification
				var pwds = "";
				pwds = document.getElementById("pwd");2").value;
				var pattl = /^[A-Z][a-zA-Z0-9_]{8,15$/;
				var result = pattl.test(pwds.trim());
				if (result) {
					document.getElementById("pwd2Span").innerHTML = "√"
					document.getElementById("pwd2Span").style.fontSize = ""20pt"
				}
					document.getElementById("pwd2Span").innerHTML = "×"
				}
				//email verification
				var emails = "";
				emails = document.getElementById("email").value;
				var pattl = /^[A-z0-9]+@[a-z0-9]+.com$/;
				var result = pattl.test(emails.trim());
				if (result) {
					document.getElementById("emailSpan").innerHTML = "√"
					document.getElementById("emailSpan").style.fontSize = ""20pt"
				}
					document.getElementById("emailSpan").innerHTML = "×"
				}
				//phone number verification
				var phones = "";
				phones = document.getElementById("phone").value;
				var pattl = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8$/;
				var result = pattl.test(phones.trim());
				if (result) {
					document.getElementById("phoneSpan").innerHTML = "√"
					document.getElementById("phoneSpan").style.fontSize = ""20pt"
				}
					document.getElementById("phoneSpan").innerHTML = "×"
				}
				//ID card verification
				var status1 = "";
				status1 = document.getElementById("status").value;
				var pattl = /^([1-9]}{1}[0-9]{17}|[1-9]{1}[0-9]{16}(x|X)?$/;
				var result = pattl.test(status1.trim());
				if (result) {
					document.getElementById("statusSpan").innerHTML = "√"
					document.getElementById("statusSpan").style.fontSize = ""20pt"
				}
					document.getElementById("statusSpan").innerHTML = "×"
				}
				//Address Verification
				var addres = "";
				addres = document.getElementById("address").value;
				var pattl = /^[\u4e00-\u9fa5]+[\u4E00-\u9FA5A-Za-z0-9_]+$/;
				var result = pattl.test(addres.trim());
				if (result) {
					document.getElementById("addressSpan").innerHTML = "√"
					document.getElementById("addressSpan").style.fontSize = "20pt"
				}
					document.getElementById("addressSpan").innerHTML = "×"
				}
			}
		</script>
	</body>
</html>

The effect diagram is as follows:

The following example of using regular expressions to validate input content in the js input box is all the content I share with you. I hope it can give you a reference and also hope

Hope everyone will support and cheer for the tutorial.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please report any infringement by email to codebox.com (replace # with @) and provide relevant evidence. Once verified, the website will immediately delete the suspected infringing content.

Basic Tutorial