JavaScript Sample Data Validation Feature Using Simple Regular Expressions
- 2021-07-10 18:44:23
- OfStack
This paper illustrates the data validation function of JavaScript using simple regular expressions. Share it for your reference, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Register-reg</title>
<script type="text/javascript" language="javascript">
function checkName() {
var nameElement = document.getElementById("name");
//var regExp = /^(a-z)[^a-z\d_]/i;
var regExp = /[a-zA-Z\d_]/i; // \w Matches any word character including an underscore. Equivalent to '[A-Za-z0-9_]' .
var regExp2 = /^[A-Za-z]/i;// The starting position of the matching string is a letter
var resultElement = document.getElementById("resName");
if (nameElement.value.match(regExp) && nameElement.value.match(regExp2) && nameElement.value.length >= 6) {
// Match Successful
// The member name is composed of letters, numbers and underscores, and the letter begins with the length not less than 6
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = " The member name is composed of letters, numbers and underscores, and the letter begins with the length not less than 6 ! ";
return false;
}
}
function checkPwd() {
var pwdElement = document.getElementById("pwd");
var regExp = /[a-zA-Z\d_]/i; // \w Matches any word character including an underscore. Equivalent to '[A-Za-z0-9_]' .
var regExp2 = /[a-zA-Z]/i; // Matching letters
var regExp3 = /\d/i; // Matching digits
var resultElement = document.getElementById("resPwd");
if (pwdElement.value.match(regExp) && pwdElement.value.match(regExp2) && pwdElement.value.match(regExp3) && pwdElement.value.length >= 6) {
// Match Successful
// The password is composed of letters, numbers and underscores, and must have letters and numbers with a length not less than 6
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = " The password is composed of letters, numbers and underscores, and must have letters and numbers with a length not less than 6 ! ";
return false;
}
}
function checkPwd2() {
var pwdElement = document.getElementById("pwd");
var pwd2Element = document.getElementById("pwd2");
var resultElement = document.getElementById("resPwd2");
if (pwdElement.value == pwd2Element.value) {
// The reentered password exactly matches the previous password
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = " Password No 1 To! ";
return false;
}
}
function checkGentle() {
var gentleElement = document.getElementById("gentle");
var resultElement = document.getElementById("resGentle");
if ((gentleElement.value == " Male " || gentleElement.value == " Female ") || (gentleElement.value == "m" || gentleElement.value == "f") || (gentleElement.value == "male" || gentleElement.value == "famale")) {
// Whether gender judgment is in: male, female, male , famale , m , f Within
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = " Whether gender judgment is in: male, female, male , famale , m , f Within! ";
return false;
}
}
function checkAge() {
var ageElement = document.getElementById("age");
var resultElement = document.getElementById("resAge");
if (parseInt(ageElement.value) > 0 && parseInt(ageElement.value) <= 150) {
// If the age is in 0~150 Between
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = " Age in 0~150 Between! ";
return false;
}
}
function checkMail() {
var mailElement = document.getElementById("mail");
var regExp = /[^a-z0-9_]/gi; // Matches characters other than letters, numbers and underscores
var regExp2 = /[a-z]/gi; // Matching letters
var resultElement = document.getElementById("resMail");
if (!mailElement.value.match(regExp)) {// If characters other than letters, numbers or underscores appear,
resultElement.innerHTML = " The email address is incorrect! ";
return false;
}
else {
if (mailElement.value.indexOf(".") - mailElement.value.indexOf("@") >= 2) {
resultElement.innerHTML = "";
return true;
}
else {
resultElement.innerHTML = " The email address is incorrect! ";
return false;
}
}
}
function checkTel() {
var telElement = document.getElementById("tel");
var regExp = /\d{7,12}/g;// Matching 7~12 Bit telephone number
var regExp2 = /[^0-9]/g; // Are there any characters other than numbers
var resultElement = document.getElementById("resTel");
if (telElement.value.match(regExp) && telElement.value.length <= 12) {
if (telElement.value.match(regExp2)) {
resultElement.innerHTML = " The phone number is pure digit and is located in the 7~12 Between bits! ";
return false;
}
else {
resultElement.innerHTML = "";
return true;
}
}
else {
resultElement.innerHTML = " The phone number is pure digit and is located in the 7~12 Between bits! "; //!telElement.value.match(regExp2) &&
return false;
}
}
function checkAll() {
if (checkName() && checkPwd() && checkPwd2() && checkGentle() && checkAge() && checkMail() && checkTel()) {
alert(" Congratulations , The information filled in is correct! ");
}
else {
alert(" Errors , Please confirm that the information filled in is correct! ");
}
}
// Executed when the form is finished loading
window.onload = function () {
var inputElements = document.getElementsByTagName("input");
inputElements[0].onblur = function () {
checkName();
}
inputElements[1].onblur = function () {
checkPwd();
}
inputElements[2].onblur = function () {
checkPwd2();
}
inputElements[3].onblur = function () {
checkGentle();
}
inputElements[4].onblur = function () {
checkAge();
}
inputElements[5].onblur = function () {
checkMail();
}
inputElements[6].onblur = function () {
checkTel();
}
inputElements[7].onclick = function () {
checkAll();
}
}
</script>
<style type="text/css">
body{ font-size:16px;
font-weight:600;
font-family: Microsoft Yahei ;
line-height:30px;
}
thead{ text-align:center;
}
input{ width:150px;
}
input[type=button]{ height:38px;
font-size:20px;
font-weight:600;
}
ul{ border:1px solid #c3c3c3;
}
li{ list-style-type:square;
}
</style>
</head>
<body>
<form action="" method="post">
<table>
<thead><tr><td colspan="2"><h2> Form validation </h2></td></tr></thead>
<tr><td> Member name: </td><td><input type="text" id="name" /></td><td id="resName"></td></tr>
<tr><td> Password: </td><td><input type="password" id="pwd" /></td><td id="resPwd"></td></tr>
<tr><td> Duplicate password: </td><td><input type="password" id="pwd2" /></td><td id="resPwd2"></td></tr>
<tr><td> Gender: </td><td><input type="text" id="gentle" /></td><td id="resGentle"></td></tr>
<tr><td> Age: </td><td><input type="text" id="age" /></td><td id="resAge"></td></tr>
<tr><td> E-mail: </td><td><input type="text" id="mail" /></td><td id="resMail"></td></tr>
<tr><td> Contact number: </td><td><input type="text" id="tel" /></td><td id="resTel"></td></tr>
<tr><td></td><td><input type="button" value=" Registration " id="checkAll" /></td></tr>
</table>
</form>
<ul>
<li> The member name is composed of letters, numbers and underscores, and the letter begins with the length not less than 6</li>
<li> The password is composed of letters, numbers and underscores, and must have letters and numbers with a length not less than 6</li>
<li> Whether gender judgment is in: male, female, male , famale , m , f Within </li>
<li> Age in 0~150 Between </li>
<li> Email address </li>
<li> The phone number is pure digit and is located in the 7~12 Between bits! </li>
</ul>
</body>
</html>
PS: Here are two very convenient regular expression tools for your reference:
JavaScript Regular Expression Online Test Tool:
http://tools.ofstack.com/regex/javascript
Regular expression online generation tool:
http://tools.ofstack.com/regex/create_reg
More readers interested in JavaScript can check out the topics of this site: "JavaScript Regular Expression Skills Encyclopedia", "JavaScript Replacement Operation Skills Summary", "JavaScript Search Algorithm Skills Summary", "JavaScript Data Structure and Algorithm Skills Summary", "JavaScript Traversal Algorithm and Skills Summary", "json Operation Skills Summary in JavaScript", "JavaScript Error and Debugging Skills Summary" and "JavaScript Mathematical Operation Usage Summary"
I hope this article is helpful to everyone's JavaScript programming.