后浪云百度小程序教程：captcha 图形验证码

2022-4-13

captcha 图形验证码
- 属性说明
- 示例
  - 代码示例

captcha 图形验证码

解释：图形验证码组件，一般用于表单项提交时后端校验。防止连续提交，高效拦截机器行为。

属性说明

属性名	类型	必填	默认值	说明
verifyImgUrl	String	是		图片验证码的 url 地址
labelWidth	String	否	4em	label宽度，默认四字
inputName	String	否	code	定义 input name 属性，一般作为表单提交的 key
label	String	否	验证码	输入框左侧文案
placeholder	String	否	请输入验证码	输入框占位文案
placeholderColor	String	否	#ccc	输入框占位文案颜色
value	String	否	‘’	输入框 value
type	String	否	text	input 调起键盘类型：text、number、idcard、digit
maxlength	Number	否	4	input 输入最大长度
focus	Boolean	否	false	获取聚焦，调起键盘
confirmType	String	否	done	键盘右下角提交文案，详细配置见基础组件 input
inputErrMsg	String	否	‘’	错误提示信息，有值时左侧 label 会漂红
smt-label	String	否		提供扩展样式类，供开发者自定义组件样式，通过此 class 改变 input 左侧文案样式
smt-code	String	否		提供扩展样式类，供开发者自定义组件样式，可通过此 class 改变验证码外层样式
bind:refreshimg	EventHandle			更改验证码事件。`e.detail = {iptValue: ‘input输入值’, iptName: ‘传入的 iptName’, check: ‘boolean值，是否满足最大输入长度’}`
bind:input	EventHandle			input 输入事件
bind:blur	EventHandle			input 失焦事件
bind:focus	EventHandle			input 聚焦事件
bind:confirm	EventHandle			点击键盘右下角完成按钮触发事件

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

 
 
 
  
  
  <smt-captcha
  
  
   verify-img-url="{{verifyImgUrl}}"
  
  
   input-err-msg="{{inputErrMsg}}"
  
  
   bindinput="bindInput"
  
  
   bind:refreshimg="refreshImg"
  
  
  ></smt-captcha>
  
  
  <button bind:tap="btnClick">提交</button>

作者：后浪云

链接：https://www.idc.net/help/185995/

文章版权归作者所有，未经允许请勿转载。

THE END