一、案例效果
案例效果1
二、场景应用
用于用户填写输入类的信息,如姓名、手机号、编号/工号/账号、密码、日期时间、邮箱、数字类的年龄、金额等,是高级表单的功能之一。
三、素材准备
输入框组件本身支持属性和样式修改,属性修改如尺寸、位置;样式修改如透明度、边框颜色/粗细/描边样式、圆角角度、背景色/背景图填充,添加滤镜效果等。
若不满足基础的样式调整,可调整输入框背景色为无、边框粗细为0,将自主设计图片的置于输入框底部使用,如图:
四、组件用法
基础用法
1.高级组件下点击添加输入框组件
2.输入框类型:可以根据用户输入信息的属性,在右侧面板调整输入框录入信息的类型。
文本:用于输入姓名、昵称、身份证号码等汉字数字英文组合的字符。
数值:用于输入纯数字,包含1、0、3这样的自然数、或-1.23443423这样的小数等。
手机号:用于输入手机号,在绑定高级表单的手机号输入框时,可校验当前用户输入的手机号位数是否符合手机号格式规范,若不规范,会提示用户输入格式错误。
密码:用于输入密码类信息,输入过程中会将密码以小黑点方式显示,避免隐私泄露。
日期:可调用手机系统自带的日历时间,供用户选择,无需手动输入日期。
邮箱:用于输入邮箱,支持常见的163、sina、qq、企业邮箱等,用户提交数据时,会校验邮箱输入格式是否正确。
3.也可给输入框设置初始值,用户在初始值的基础上修改自己要录入的信息。
4.用户未添加初始值或初始值被删除后,会提示用户输入框内需填写的信息。
5.必填项及必填提示:勾选了必填项且输入框组件绑定了【高级表单】或【数据表】后,若用户未输入信息系统会进行提示,也可在【未填提示】的位置自定义提示文案。
6.格式错误:当用户输入格式错误时,除系统会进行提示,我们也可自定义提示文案。
7.如果用高级表单和输入框绑定收集数据,需在新建表单时,选择输入框对应的表单项一般为:文本、段落、数字、网址、邮箱、手机号。
8.将表单引入到编辑器中
9.引入表单后,找到需要跟输入框绑定的表单项,进行绑定
高级用法
1.特殊触发器:改变时。当判断用户输入内容是否有误,可通过改变时的触发器进行判断。
8.如输入框限制最多输入5个字符,我们可以在改变时的触发器这里,拿到输入框的值,并进行实时判断。
①添加1个参数变量,数值类型,初始值为0
②在输入框改变时的触发器设置参数值,表达式:(@姓名@+'').length,下图为设置动图
③添加1个段落组件提示,用在用户输入字符数超出时显示,现在设置为初始隐藏。
具体效果
④给参数变量设置触发器,当字符数超出5个时,会显示提示。
⑤继续完善下这个地方:当输入字符数小于等于5时,隐藏这个提示。
五、相关Q&A