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
{
"defaultTitle": "Verify-code",
"usingComponents": {
"verify-code": "mini-ali-ui/es/verify-code/index"
}
}
.axml
<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
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 |
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 |
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 |
maxlength | Number | Maximum length of the verification code. The default value is |
focus | Boolean | An indicator of whether to get focus. The default value is |
clear | Boolean | An indicator of whether to clear the input. The default value is |
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 |