Verify Code

2023-03-28 12:11

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`.
labelCls	String	Customized class for the label.
inputCls	String	Customized class for the input box.
last	Boolean	An indicator of whether the input box is the last one. The default value is `false`.
value	String	Input box value.
name	String	Component name, which is used to obtain data by submitting the form.
placeholder	String	Placeholder.
placeholderStyle	String	Style of the placeholder.
placeholderClass	String	Style class of the placeholder.
disabled	Boolean	An indicator of whether to disable the function of clearing the verification code. The default value is `false`.
maxlength	Number	Maximum length of the verification code. The default value is `140`.
focus	Boolean	An indicator of whether to get focus. The default value is `false`.
clear	Boolean	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.