Verify Code

You can use the verify-code component to display the input box of the verification code.

Note:

The verify-code is a controlled component. The component value needs to be obtained by the onInput event.

Sample code

See the sample codes in different languages:

.json

copy
{
  "defaultTitle": "Verify-code",
  "usingComponents": {
    "verify-code": "mini-ali-ui/es/verify-code/index"
  }
}

.axml

copy
<view>
  <view style="margin-top: 10px;" />
  <view style="padding: 0 10px;">verify code box</view>
  <view style="margin-top: 10px;" />
  <verify-code
    onInput="onInput" 
    value="{{verifyCode}}" 
    onClear="onClear" 
    last="{{true}}" 
    countDown="{{10}}" 
    initActive="{{false}}"
    onSend="onSend"></verify-code>
</view>

.js

copy
Page({
  data: {
    verifyCode: '',
  },
  onSend() {
    my.alert({
      title: 'verify code sent',
    });
  },
  onInput(e) {
    this.setData({
      verifyCode: e.detail.value,
    });
  },
});

Parameters

Property

Type

Description

className

String

Customized class. 

label

String

Customized label text. The default value is Verification Code.

labelClsString

Customized class for the label.

inputClsString

Customized class for the input box.

lastBoolean

An indicator of whether the input box is the last one. The default value is false.

valueString

Input box value.

nameString

Component name, which is used to obtain data by submitting the form.

placeholderString

Placeholder.

placeholderStyleString

Style of the placeholder.

placeholderClassString

Style class of the placeholder.

disabledBoolean

An indicator of whether to disable the function of clearing the verification code. The default value is false.

maxlengthNumber

Maximum length of the verification code. The default value is 140.

focusBoolean

An indicator of whether to get focus. The default value is false.

clearBoolean

An indicator of whether to clear the input. The default value is true, and takes effect only when the value of disabled is false.

onInput(e: Object) => void

The event that is triggered when users tap the keyboard.

onConfirm(e: Object) => void

The event that is triggered when users tap the Done button on the keyboard.

onFocus(e: Object) => void

The event that is triggered when an element gets the focus.

onBlur(e: Object) => void

The event that is triggered when an element loses the focus.

onClear() => void

The event that is triggered when users tap the Clear button.

txtSend

String

Text on the send verification code button. The default value is Send. 

txtSendAgain

String

Text on the resend verification code button. The default value is Resend. 

txtCountDown

String

Counting down text before resending the verification code, which does not include the time. The default value is Resend later.

initActive

Boolean

An indicator of whether to trigger the send button actively. The default value is false. When the value is true, count down the resending time automatically after the component is initially loaded. You can set the prompt information according to your requirements.