VerifyCode

概述

VerifyCode短信/邮件验证码输入组件，继承自Input。在输入框后自动附加一个发送验证码按钮，单击后触发onRequest回调并进入倒计时，倒计时结束前按钮不可再次点击。

示例

声明验证码字段只需指定widget: 'verifycode'，通过onRequest发起发送请求：

const form = document.querySelector('#form');
form.state = {
    smscode: configurable('', {
        label: '短信验证码',
        widget: 'verifycode',
        maxLength: 6,
        onRequest: () => {
            // 在此向服务器请求发送验证码
            fetch('/api/sms/send');
        },
    }),
};

loading

指南

超时设置

timeout用于设置验证码的倒计时时长，单位为毫秒，默认60000（60 秒）。

• 如果timeout为数字，则倒计时时长为该值，每1000毫秒（1 秒）更新一次。
• 如果timeout为数组[时长, 步进]，则倒计时时长为timeout[0]，每timeout[1]毫秒更新一次。

例如timeout: [60 * 1000, 1000]代表倒计时 60 秒，每 1 秒更新一次：

form.state = {
    smscode: configurable('', {
        label: '短信验证码',
        widget: 'verifycode',
        timeout: 120 * 1000, // 倒计时 120 秒，每秒更新
    }),
};

模板

template用于自定义倒计时中按钮的文字模板，{timeout}会被替换为当前剩余秒数，默认"{timeout}秒后重发"：

form.state = {
    smscode: configurable('', {
        label: '短信验证码',
        widget: 'verifycode',
        template: '{timeout}秒后重新发送', 
    }),
};

onRequest

当单击发送验证码按钮时，会触发onRequest回调。一般应该在onRequest中向服务器请求重新发送验证码。

在倒计时结束前，onRequest不会被触发：

form.state = {
    smscode: configurable('', {
        label: '短信验证码',
        widget: 'verifycode',
        onRequest: () => { 
            fetch('/api/sms/send'); 
        }, 
    }),
};

sendTips可以自定义发送按钮的文字：

form.state = {
    smscode: configurable('', {
        label: '短信验证码',
        widget: 'verifycode',
        sendTips: '向我的手机发送验证码', 
    }),
};

属性

属性	类型	默认值	说明
onRequest	function		点击发送按钮时调用，一般在此向服务器请求发送验证码
sendTips	string	"发送验证码"	发送按钮文字
timeout	number | [number,number]	60000	倒计时时长与步进，毫秒数或[时长, 步进]数组
template	string	"{timeout}秒后重发"	倒计时按钮文字模板，{timeout}为剩余秒数占位

注意事项

• 倒计时结束前发送按钮不可再次点击，onRequest也不会被触发。
• VerifyCode继承自Input，maxLength、required、placeholder等完整属性请参见 Input 文档。