支付宝小程序扩展表单验证码输入框·VerifyCode

验证码输入框。

受控模式，使用时需要用 onInput 事件来回设 value。

扫码体验

示例代码

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

<view>
  <view style="margin-top: 10px;" />
  <view style="padding: 0 10px;">验证码框</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>

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

属性

属性	类型	默认值	描述	最低版本
className	String	-	自定义的 class。	-
label	String	验证码	自定义 label 文案。	-
labelCls	String	-	自定义 label 的 class。	-
inputCls	String	-	自定义 input 的 class	-
last	Boolean	false	是否为最后一行。	-
value	String	-	输入框值。	-
name	String	-	组件名字，用于表单提交获取数据。	-
placeholder	String	-	占位符。	-
placeholderStyle	String	-	指定 placeholder 的样式。	-
placeholderClass	String	-	指定 placeholder 的样式类。	-
disabled	Boolean	false	是否禁用。	-
maxlength	Number	140	最大长度。	-
focus	Boolean	false	获取焦点。	-
clear	Boolean	true	是否带清除功能，仅 disabled 为 false 才生效。	-
onInput	(e: Object) => void	-	键盘输入时触发 input 事件。	-
onConfirm	(e: Object) => void	-	点击键盘完成时触发。	-
onFocus	(e: Object) => void	-	聚焦时触发。	-
onBlur	(e: Object) => void	-	失去焦点时触发。	-
onClear	() => void	-	点击清除 icon 时触发。	-
txtSend	String	发送验证码	发送按钮的默认文案	1.1.2
txtSendAgain	String	重发验证码	重发按钮的默认文案	1.1.2
txtCountDown	String	秒后重试	按钮倒计时的默认文案（不包含倒计时）	1.1.2
initActive	Boolean	false	是否主动触发发送按钮。	1.1.3

Bug & Tip

当 initActive 为 true 时，组件在初次加载后就会自动进入倒计时状态；如需要在该状态下有提示信息展示，需自行处理。

支付宝小程序扩展表单 验证码输入框·VerifyCode

扫码体验

示例代码

属性

Bug & Tip

支付宝小程序扩展表单验证码输入框·VerifyCode