Home Web Front-end JS Tutorial Login registration box mobile phone number and verification code verification implementation code

Login registration box mobile phone number and verification code verification implementation code

Feb 01, 2018 am 09:08 AM
Phone number check verify

This article mainly introduces in detail the front-end code of js to implement login registration box mobile phone number and verification code verification. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Many development scenarios will use the verification of mobile phone numbers and verification codes. The specific implementation is as follows


<p>
  <input type="text" name="phonenumber" placeholder="请输入您的手机号码" />
  <input type="text" name="verify" placeholder="请输入验证码" /><input type="button" value="发送验证码" class="verify_code" />
  <input type="button" name="btn" placeholder="立即领取" class="btn" />
</p>
<!--弹出层-->
<p class="layer" style="display:none">
    <p>领取成功</p>
    <img src="img/close-btn.png" class="close-btn">
</p>
Copy after login


$(document).ready(function(){
//点击关闭按钮关闭弹出层
  $(".close-btn").click(function(){
   $("layer").hide();
  });

//只有再手机号和验证码验证为有效后,点击领取按钮跳出弹出层事件才生效
  $(&#39;[name=btn]&#39;).click(function(){
     if(!validate()){
    return false;
    }
    $(".layer").show();
  });

//验证
function validate(){
//正则表达式,十一位数字的电话号码
  var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
//如果手机号码输入为空,则再输入框后插入错误信息
if($(&#39;[name=phonenumber]&#39;).val==&#39;&#39;){
    $(&#39;[name=phonenumber]&#39;).after(errMsg(&#39;手机号码不能为空!&#39;));
    return false;
  }
//验证输入的电话号码是否是11位数字
if(!phoneReg.test($(&#39;[name=phonenumber]&#39;).val())){
$(&#39;[name=phonenumber]&#39;).after(errMsg(&#39;请输入正确的手机号码!&#39;));
    return false;
}

//验证码不为空验证
if($(&#39;[name=verify]&#39;).val==&#39;&#39;){
    $(&#39;[name=verify]&#39;).after(errMsg(&#39;验证码不能为空!&#39;));
    return false;
}
$(&#39;.error&#39;).remove();
return true;}
//点击发送验证码按钮,进行倒计时
$(&#39;.verify_code&#39;).on(&#39;&#39;,function(){
 if(!this.b){
  setTimer();
  this.b=true;
}
})

//倒计时
function setTimer(){
  var time=60;
  var timers=setInterval(function(){
  time--;
if(time <= 0){
  time=0;
  console.log(time);
  $(&#39;.verify_code&#39;).eq(0)[0].b=false;
  $(&#39;.verify_code&#39;).val(&#39;获取验证码&#39;);
  clearInterval(timers);
return false;
 
}
$(&#39;.verify_code).val( time+ &#39;秒后重新获取&#39;);
},1000)
}


//错误信息显示
function errMsg(html){
  $(&#39;.error&#39;).remove();
  var str=&#39;<p class="error">*&#39;+html+&#39;</p>&#39;;
  return str;
}

});
Copy after login

Related recommendations:

Based on jquery+thickbox imitation school login registration box_jquery

jQuery plug-in to implement static HTML verification code Verification_jquery

jQuery implementation of verification code function example sharing

The above is the detailed content of Login registration box mobile phone number and verification code verification implementation code. 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 use Xiaohongshu account to find users? Can I find my mobile phone number? How to use Xiaohongshu account to find users? Can I find my mobile phone number? Mar 22, 2024 am 08:40 AM

With the rapid development of social media, Xiaohongshu has become one of the most popular social platforms. Users can create a Xiaohongshu account to show their personal identity and communicate and interact with other users. If you need to find a user’s Xiaohongshu number, you can follow these simple steps. 1. How to use Xiaohongshu account to find users? 1. Open the Xiaohongshu APP, click the &quot;Discover&quot; button in the lower right corner, and then select the &quot;Notes&quot; option. 2. In the note list, find the note posted by the user you want to find. Click to enter the note details page. 3. On the note details page, click the &quot;Follow&quot; button below the user's avatar to enter the user's personal homepage. 4. In the upper right corner of the user's personal homepage, click the three-dot button and select &quot;Personal Information&quot;

How to set up if WeChat does not allow adding by mobile phone number How to set up if WeChat does not allow adding by mobile phone number Mar 12, 2024 pm 05:04 PM

How to set up WeChat to disallow adding via mobile phone number? In WeChat APP, you can disallow adding WeChat via mobile phone number, but most users don’t know how to set it up to not allow WeChat to be added via mobile phone number. Next is WeChat brought by the editor to users It is not allowed to add setting method tutorials through mobile phone numbers. Interested users can come and take a look! Tutorial on how to use WeChat. How to set up WeChat when adding a mobile phone number is not allowed. 1. First open the WeChat APP, enter the main page, click [Me] in the lower right corner to enter, and select the [Settings] function; 2. Then enter the setting function page and find [Friend Permissions] ] Service function; 3. Then on the friend permissions interface, slide the button behind [Verification is required when adding me as a friend]; 4. Finally, on the page shown below, slide [Mobile Phone Number]

How to change the mobile phone number of Xiaohongshu account? Will there be any impact if I change my mobile phone number? How to change the mobile phone number of Xiaohongshu account? Will there be any impact if I change my mobile phone number? Mar 22, 2024 am 08:11 AM

In the digital age, Xiaohongshu has become a platform for many people to share their lives and discover good things. Over time, we may need to change the mobile phone number on the account. So, how to change Xiaohongshu’s mobile phone number? 1. How to change the mobile phone number of Xiaohongshu account? 1. Log in to your Xiaohongshu account and enter the “My” page. 2. Click &quot;...&quot; in the upper right corner and select &quot;Settings&quot;. 3. On the settings page, find the &quot;Account and Security&quot; option and click to enter. 4. On the Account and Security page, find the &quot;Mobile Phone Number&quot; option and click to enter. 5. At this time, the page will display the current mobile phone number, click &quot;Change Mobile Number&quot;. 6. Enter the new mobile phone number, receive the verification code, and fill it out. 7. Set a new password to ensure account security. 8. After completing the above steps,

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.

How to register two B-site numbers with one mobile phone number? How does Station B unbind its mobile phone? How to register two B-site numbers with one mobile phone number? How does Station B unbind its mobile phone? Mar 21, 2024 pm 10:10 PM

Bilibili (Bilibili), as a video sharing website very popular among Chinese young people, has attracted a large number of users. Some users hope to have two Bilibili accounts so that they can be managed and used separately. So, how to register two B-site numbers with one mobile phone number? This article will focus on this issue and how to unbind the mobile phone. 1. How to register two B-site numbers with one mobile phone number? 1. Register a new account: First, open the Bilibili App on your mobile phone or log in to the official website, click the &quot;Register&quot; button, and select the registration method. You can use your mobile phone number, email or third-party account (such as WeChat, QQ, etc.) to register. 2. When registering an account, please fill in the necessary information according to the system prompts, including mobile phone number, verification code, and set password. Be sure to use different accounts

See all articles