Home Web Front-end JS Tutorial Example introduction to regular expression form validation

Example introduction to regular expression form validation

Jan 04, 2018 am 10:01 AM
Example expression verify

This time I will bring you regular expressionform validationexample introduction, the following is a practical case, let’s take a look

First of all, I will explain to you the meaning of some symbols.

* matches the previous subexpression zero or more times;

^ matches the starting position of the input character string; $matches the end position of the input string
1. /^$/ This is a general format.
2. Enter the functions that need to be implemented.
\d matches a numeric character, equivalent to [0-9]
+ matches the previous subexpression one or more times;
? Match the previous subexpression zero or once;
The following is a piece of code to analyze Form verificationRegular expression, the specific code is as follows:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-">
 <title>正则验证常用表单方法</title>
 <script type="text/javascript">
 function focus_username() {
  var resultObj=document.getElementById(&#39;result_username&#39;);
  resultObj.innerHTML="以字母开头的-位的字符";
  resultObj.style.color="blue";
  document.form.username.style="border:px solid red";
 }
 // function blur_username () {
 //第一种方法:
 // var resultObj=document.getElementById(&#39;result_username&#39;)
 // if (document.form.username.value==&#39;&#39;) {
 // resultObj.innerHTML="用户名不能为空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.username.value.length<||document.form.username.value.length>) {
 // resultObj.innerHTML="用户名字符长度必须介于到个之间";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // }
 // }
 function blur_username () {
  //第二种方法:
  var resultObj=document.getElementById(&#39;result_username&#39;)
  var pre=document.form.username.value;
  var reg=/^[a-zA-Z]\w{,}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)用户名不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用户名字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else{
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }
 }
 function focus_userpwd() {
 var resultObj=document.getElementById(&#39;result_userpwd&#39;);
 resultObj.innerHTML="(必填项)介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 }
 // function blur_userpwd () {
 // var resultObj=document.getElementById(&#39;result_userpwd&#39;)
 // if (document.form.userpwd.value==&#39;&#39;) {
 // resultObj.innerHTML="用户名密码不能为空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {
 // resultObj.innerHTML="用户名密码字符长度必须介于到个之间";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // return true;
 // }
 // }
 function blur_userpwd () {
 var resultObj=document.getElementById(&#39;result_userpwd&#39;)
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
 if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)用户名密码不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用户名密码字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else{
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }
 }
 function focus_userpwd() {
 var resultObj=document.getElementById(&#39;result_userpwd&#39;);
 resultObj.innerHTML="(必填项)介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 }
 // function blur_userpwd () {
 // var resultObj=document.getElementById(&#39;result_userpwd&#39;)
 // if (document.form.userpwd.value==&#39;&#39;) {
 // resultObj.innerHTML="用户名密码不能为空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.userpwd.value!=document.form.userpwd.value) {
 // resultObj.innerHTML="两次用户名密码输入不一致";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // return true;
 // }
 // }
 function blur_userpwd () {
  var resultObj=document.getElementById(&#39;result_userpwd&#39;)
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)用户名密码不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用户名密码字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else if(document.form.userpwd.value!=document.form.userpwd.value){
  resultObj.innerHTML="两次用户名密码输入不一致";
  resultObj.style.color="red";
  return false;
  }else {resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  } 
 }
 function focus_Mobile() {
  var resultObj=document.getElementById(&#39;result_Mobile&#39;);
  resultObj.innerHTML="请输入你位数的手机号码";
  resultObj.style.color="blue";
  document.form.Mobile.style="border:px solid red";
 }
 function blur_Mobile() {
  var resultObj=document.getElementById(&#39;result_Mobile&#39;)
  var pre=document.form.Mobile.value;
  var reg=/^[||][-]{}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="手机号码不能为空";
  resultObj.style.color="red"; 
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="手机号码字符输入不合法";
  resultObj.style.color="red"; 
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green"; 
  } 
 }
 function focus_Tel() {
  var resultObj=document.getElementById(&#39;result_Tel&#39;);
  resultObj.innerHTML="请输入你的座机号码";
  resultObj.style.color="blue";
  document.form.Tel.style="border:px solid red";
 }
 function blur_Tel() {
  var resultObj=document.getElementById(&#39;result_Tel&#39;)
  var pre=document.form.Tel.value;
  var reg=/^{}[-]{,}\-[]?[-]{}$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="座机号码不能为空";
  resultObj.style.color="red";
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="座机号码字符输入不合法";
  resultObj.style.color="red";
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green"; 
  } 
 }
 function focus_mail() {
  var resultObj=document.getElementById(&#39;result_mail&#39;);
  resultObj.innerHTML="请输入你的邮箱号码";
  resultObj.style.color="blue";
  document.form.mail.style="border:px solid red";
 }
 function blur_mail() {
  var resultObj=document.getElementById(&#39;result_mail&#39;);
  var pre=document.form.mail.value;
  var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="邮箱号码不能为空";
  resultObj.style.color="red";
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="邮箱号码字符输入不合法";
  resultObj.style.color="red";
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  } 
 }
 function focus_ID() {
  var resultObj=document.getElementById(&#39;result_ID&#39;);
  resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";
  resultObj.style.color="blue";
  document.form.ID.style="border:px solid red";
 }
 function blur_ID() {
  var resultObj=document.getElementById(&#39;result_ID&#39;);
  var pre=document.form.ID.value;
  var reg=/^[-]{}[-x]$/;
  if (pre==&#39;&#39;) {
  resultObj.innerHTML="(必填项)二代身份证号码字符不能为空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="二代身份证号码字符输入不合法";
  resultObj.style.color="red";
  return false;
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  } 
 }
 function checkForm(){
  var flag_username=blur_username();
  var flag_userpwd=blur_userpwd();
  var flag_userpwd=blur_userpwd();
  var flag_ID=blur_ID(); 
  if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) { 
  return true;
  }else{
  return false;
  }
 }
 </script>
 <style type="text/css">
 body{background-image: url(images/.jpg);background-size: cover;}
 table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}
 .vip{font-size: px;}
 </style>
 </head>
 <body>
 <form name="form" action=".php" method="post" onsubmit="return checkForm()">
 <table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >
 <tr>
  <th colspan="" class="vip">VIP会员注册</th>
 </tr>
 <tr>
  <td width="px" align="right" >用户名:</td>
  <td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td>
  <td><div width="px" id="result_username"></div></td>
 </tr>
 <tr>
  <td align="right">密码:</td>
  <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
  <td><div id="result_userpwd"></div></td>
 </tr>
 <tr>
  <td align="right">确认密码:</td>
  <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
  <td><div id="result_userpwd"></div></td>
 </tr>
 <tr>
  <td align="right">手机号码:</td>
  <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td>
  <td><div id="result_Mobile"></div></td>
 </tr>
 <tr>
  <td align="right">座机号码:</td>
  <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td>
  <td><div id="result_Tel"></div></td>
 </tr>
 <tr>
  <td align="right">邮箱号码:</td>
  <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td>
  <td><div id="result_mail"></div></td>
 </tr>
 <tr>
  <td align="right">二代身份证:</td>
  <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td>
  <td><div id="result_ID"></div></td>
 </tr>
 <tr>
  <td align="center" colspan=""><input type="submit" value="提交注册" />
  <input type="reset" value="重置资料" /></td>
  <td></td>
 </tr>
 </table>
 </form>
 </body>
 </html>
Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to upload an avatar in the WeChat applet

How can the search component of mint-ui be displayed on the keyboard Search button

How jQuery implements front-end search function

The above is the detailed content of Example introduction to regular expression form validation. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to verify signature in PDF How to verify signature in PDF Feb 18, 2024 pm 05:33 PM

We usually receive PDF files from the government or other agencies, some with digital signatures. After verifying the signature, we see the SignatureValid message and a green check mark. If the signature is not verified, the validity is unknown. Verifying signatures is important, let’s see how to do it in PDF. How to Verify Signatures in PDF Verifying signatures in PDF format makes it more trustworthy and the document more likely to be accepted. You can verify signatures in PDF documents in the following ways. Open the PDF in Adobe Reader Right-click the signature and select Show Signature Properties Click the Show Signer Certificate button Add the signature to the Trusted Certificates list from the Trust tab Click Verify Signature to complete the verification Let

Detailed method to unblock using WeChat friend-assisted verification Detailed method to unblock using WeChat friend-assisted verification Mar 25, 2024 pm 01:26 PM

1. After opening WeChat, click the search icon, enter WeChat team, and click the service below to enter. 2. After entering, click the self-service tool option in the lower left corner. 3. After clicking, in the options above, click the option of unblocking/appealing for auxiliary verification.

How to validate IFSC code using regular expressions? How to validate IFSC code using regular expressions? Aug 26, 2023 pm 10:17 PM

Indian Financial System Code is the abbreviation. Indian bank branches participating in the electronic funds transfer system are identified by a special 11-character code. The Reserve Bank of India uses this code in internet transactions to transfer funds between banks. IFSC code is divided into two parts. Banks are identified by the first four characters, while branches are identified by the last six characters. NEFT (National Electronic Funds Transfer), RTGS (Real Time Gross Settlement) and IMPS (Immediate Payment Service) are some of the electronic transactions that require IFSC codes. Method Some common ways to validate IFSC codes using regular expressions are: Check if the length is correct. Check the first four characters. Checkthefifthcharacter.Che

How to verify whether the input is full-width characters in golang How to verify whether the input is full-width characters in golang Jun 25, 2023 pm 02:03 PM

In golang, Unicode encoding and rune type are required to verify whether the input is full-width characters. Unicode encoding is a character encoding standard that assigns a unique numeric code point to each character in the character set, which includes full-width characters and half-width characters. The rune type is the type used to represent Unicode characters in golang. The first step is to convert the input into a rune type slice. This can be converted by using golang's []rune type, e.g.

New features in PHP 8: Added verification and signing New features in PHP 8: Added verification and signing Mar 27, 2024 am 08:21 AM

PHP8 is the latest version of PHP, bringing more convenience and functionality to programmers. This version has a special focus on security and performance, and one of the noteworthy new features is the addition of verification and signing capabilities. In this article, we'll take a closer look at these new features and their uses. Verification and signing are very important security concepts in computer science. They are often used to ensure that the data transmitted is complete and authentic. Verification and signatures become even more important when dealing with online transactions and sensitive information because if someone is able to tamper with the data, it could potentially

How to validate route parameters in Laravel? How to validate route parameters in Laravel? Sep 01, 2023 pm 02:41 PM

In Laravel, routes are defined in the paths/ folder. Routes are defined in the web.php file. This file is created after laravel installation is complete. Laravel routes accept URIs and closure functions as follows - useIlluminate\Support\Facades\Route;Route::get('/student',function(){return'HelloStudent';}); in web/routes.php Defined routes are assigned to web middleware groups, and they have session state and CSRF protection. You can also call the controller in the route like below

PHP Implementation Guide for Mobile Number Verification Login Registration PHP Implementation Guide for Mobile Number Verification Login Registration Aug 17, 2023 pm 03:18 PM

PHP Implementation Guide for Mobile Number Verification, Login and Registration 1. Overview Mobile phone number verification is one of the common functions in modern Internet applications. It can not only be used for user registration and login verification, but also can be used in scenarios such as sending SMS verification codes. This article will introduce how to use PHP language to implement the mobile phone number verification login registration function. 2. Environment requirements Before starting to write code, we need to ensure that the following environment is ready: PHP environment: PHP version needs to be 5.6 or above. Database: This article uses the MySQL database as

How to solve the problem of steam login stuck in mobile token verification? How to solve the problem of steam login stuck in mobile token verification? Mar 14, 2024 pm 07:35 PM

Steam is a platform used by game enthusiasts. You can buy and purchase many games here. However, recently many users have been stuck in the mobile token verification interface when logging into Steam and cannot log in successfully. Faced with this Most users don't know how to solve this situation. It doesn't matter. Today's software tutorial is here to answer the questions for users. Friends in need can check out the operation methods. Steam mobile token error? Solution 1: For software problems, first find the steam software settings on the mobile phone, request assistance page, and confirm that the network using the device is running normally, click OK again, click Send SMS, you can receive the verification code on the mobile phone page, and you are done. Verify, resolve when processing a request

See all articles