Home WeChat Applet Mini Program Development How to develop verification code and password input box function in WeChat applet

How to develop verification code and password input box function in WeChat applet

May 31, 2018 pm 02:29 PM
password Applets verify

This time I will bring you how to develop the verification codepassword input box function in the WeChat applet, and how to develop the verification code password input box function in the WeChat appletNotes What are they? Here are actual cases. Let’s take a look.

When making a small program, I made a 6-digit verification code input box. I thought it was very simple, but I encountered various resistances while writing it, and there was very little information available online. Later, after After some thinking, I finally finalized the plan that I am most satisfied with, and I am sending it here for everyone to refer to. I hope it can help everyone!

1. The renderings are as follows:

##2. Code part

wxml:

<form bindsubmit="formSubmit"> 
 <view class=&#39;content&#39;> 
  <block wx:for="{{Length}}" wx:key="item"> 
   <input class=&#39;iptbox&#39; value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input> 
  </block> 
 </view> 
 <input name="password" password="{{true}}" class=&#39;ipt&#39; maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input> 
 <view> 
  <button class="btn-area" formType="submit">Submit</button> 
 </view> 
</form>
Copy after login
js:

Page({ 
 /** 
  * 页面的初始数据 
  */ 
 data: { 
  Length:6,    //输入框个数 
  isFocus:true,  //聚焦 
  Value:"",    //输入的内容 
  ispassword:true, //是否密文显示 true为密文, false为明文。 
 }, 
 Focus(e){ 
  var that = this; 
  console.log(e.detail.value); 
  var inputValue = e.detail.value; 
  that.setData({ 
   Value:inputValue, 
  }) 
 }, 
 Tap(){ 
  var that = this; 
  that.setData({ 
   isFocus:true, 
  }) 
 }, 
 formSubmit(e){ 
  console.log(e.detail.value.password); 
 }, 
})
Copy after login
wxss:

content{ 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin-top: 200rpx; 
} 
iptbox{ 
 width: 80rpx; 
 height: 80rpx; 
 border:1rpx solid #ddd; 
 border-radius: 20rpx; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 text-align: center; 
} 
ipt{ 
 width: 0; 
 height: 0; 
} 
btn-area{ 
 width: 80%; 
 background-color: orange; 
 color:white; 
}
Copy after login

3. Ideas:

1. Place an input box, hide its text and position, and set the style of the payment input box (form)

2. When the input box is clicked When setting the input box to the focused state, arouse the keyboard, click on the blank space, lose focus, and set it to the lost focus style. Because the width and height of the input box are 0, the input box and cursor will not be displayed, thus hiding it.
3. Limit the maximum number of words in the input box and monitor the status of the input box. Use the length of the input box value as the rendering condition for the content of the input box (table)
4. When the submit button is clicked, obtain the content of the input box.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of JS and PHP keyword search functions

Implementation of uploading image attachments in the WeChat applet Backend code

The above is the detailed content of How to develop verification code and password input box function in WeChat applet. 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 solve the problem that Windows 11 prompts you to enter the administrator username and password to continue? How to solve the problem that Windows 11 prompts you to enter the administrator username and password to continue? Apr 11, 2024 am 09:10 AM

When using Win11 system, sometimes you will encounter a prompt that requires you to enter the administrator username and password. This article will discuss how to deal with this situation. Method 1: 1. Click [Windows Logo], then press [Shift+Restart] to enter safe mode; or enter safe mode this way: click the Start menu and select Settings. Select "Update and Security"; select "Restart Now" in "Recovery"; after restarting and entering the options, select - Troubleshoot - Advanced Options - Startup Settings -&mdash

How to set router WiFi password using mobile phone (using mobile phone as tool) How to set router WiFi password using mobile phone (using mobile phone as tool) Apr 24, 2024 pm 06:04 PM

Wireless networks have become an indispensable part of people's lives in today's digital world. Protecting the security of personal wireless networks is particularly important, however. Setting a strong password is key to ensuring that your WiFi network cannot be hacked by others. To ensure your network security, this article will introduce in detail how to use your mobile phone to change the router WiFi password. 1. Open the router management page - Open the router management page in the mobile browser and enter the router's default IP address. 2. Enter the administrator username and password - To gain access, enter the correct administrator username and password in the login page. 3. Navigate to the wireless settings page - find and click to enter the wireless settings page, in the router management page. 4. Find the current Wi

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

How to use Passkey for your Microsoft account How to use Passkey for your Microsoft account Feb 19, 2024 am 11:03 AM

Passkey is a more advanced and secure way to log in and can be used with a Microsoft account. This article will guide you how to use Passkey in your Microsoft account, introduce its advantages and the differences with passwords. Before we get into the details, we emphasize that if you frequently forget your passwords or need to log in quickly, Passkey will generally be better for you. What is Passkey? How are they different from passwords? Passwords are an advanced and secure authentication method that can replace traditional password logins. Each application has a unique key, ensuring security and preventing threats like phishing. Users can confirm their identity via email and password, or use facial recognition, fingerprint or security key

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.

Incorrect password, beware BitLocker warning Incorrect password, beware BitLocker warning Mar 26, 2024 am 09:41 AM

This article will explore how to solve the problem of wrong password, especially the need to be careful when dealing with BitLocker warnings. This warning is triggered when an incorrect password is entered multiple times in BitLocker to unlock the drive. Usually, this warning occurs because the system has a policy that limits incorrect login attempts (usually three login attempts are allowed). In this case, the user will receive an appropriate warning message. The complete warning message is as follows: The password entered is incorrect. Please note that continuously entering incorrect passwords will cause the account to be locked. This is to protect the security of your data. If you need to unlock your account, you will need to use a BitLocker recovery key. The password is incorrect, beware the BitLocker warning you receive when you log in to your computer

Tutorial on changing wifi password on mobile phone (simple operation) Tutorial on changing wifi password on mobile phone (simple operation) Apr 26, 2024 pm 06:25 PM

Wireless networks have become an indispensable part of our lives with the rapid development of the Internet. In order to protect personal information and network security, it is very important to change your wifi password regularly, however. To help you better protect your home network security, this article will introduce you to a detailed tutorial on how to use your mobile phone to change your WiFi password. 1. Understand the importance of WiFi passwords. WiFi passwords are the first line of defense to protect personal information and network security. In the Internet age, understanding its importance can better understand why passwords need to be changed regularly. 2. Confirm that the phone is connected to wifi. First, make sure that the phone is connected to the wifi network whose password you want to change before changing the wifi password. 3. Open the phone’s settings menu and enter the phone’s settings menu.

How to set a password for excel How to set a password for excel Mar 21, 2024 am 09:00 AM

A few days ago, my cousin came to me to complain that he had worked hard to create a lot of data using Excel, but it was later modified by his colleagues. He didn't know the situation at the time. After sending it to his boss, he was scolded. This is really frustrating. Some people just don’t like you and want to deliberately punish you. After you leave school and enter society, you will find that more and more people are stabbing you in the back. In addition to a few words of comfort to my cousin, I also gave my cousin an advice. If you are afraid of encountering such a thing again in the future, then set a password for the excel form so that no one can open it except you. Netizens, if you are afraid that your Excel spreadsheet will be secretly modified by others, you should also set a password. How to set password for excel password form? Come with me to find out! 1.

See all articles