.

高级表单输入框:输入日期/时间/邮箱/姓名/手机号/密码

小常发表于:2021年10月09日 18:29:23更新于:2022年04月02日 15:07:22

一、案例效果


案例效果1

00161616145f314c887f152cbd44ccc

《Epub360表单多级关联功能演示》


二、场景应用

用于用户填写输入类的信息,如姓名、手机号、编号/工号/账号、密码、日期时间、邮箱、数字类的年龄、金额等,是高级表单的功能之一。


三、素材准备

输入框组件本身支持属性和样式修改,属性修改如尺寸、位置;样式修改如透明度、边框颜色/粗细/描边样式、圆角角度、背景色/背景图填充,添加滤镜效果等。

若不满足基础的样式调整,可调整输入框背景色为无、边框粗细为0,将自主设计图片的置于输入框底部使用,如图:

image.png

四、组件用法

基础用法

1.高级组件下点击添加输入框组件

image.png


2.输入框类型:可以根据用户输入信息的属性,在右侧面板调整输入框录入信息的类型。

  • 文本:用于输入姓名、昵称、身份证号码等汉字数字英文组合的字符。

  • 数值:用于输入纯数字,包含1、0、3这样的自然数、或-1.23443423这样的小数等。

  • 手机号:用于输入手机号,在绑定高级表单的手机号输入框时,可校验当前用户输入的手机号位数是否符合手机号格式规范,若不规范,会提示用户输入格式错误。

  • 密码:用于输入密码类信息,输入过程中会将密码以小黑点方式显示,避免隐私泄露。

  • 日期:可调用手机系统自带的日历时间,供用户选择,无需手动输入日期。

  • 邮箱:用于输入邮箱,支持常见的163、sina、qq、企业邮箱等,用户提交数据时,会校验邮箱输入格式是否正确。

image.png


3.也可给输入框设置初始值,用户在初始值的基础上修改自己要录入的信息。

image.png


4.用户未添加初始值或初始值被删除后,会提示用户输入框内需填写的信息。

image.png


5.必填项及必填提示:勾选了必填项且输入框组件绑定了【高级表单】或【数据表】后,若用户未输入信息系统会进行提示,也可在【未填提示】的位置自定义提示文案。

image.png

image.png

6.格式错误:当用户输入格式错误时,除系统会进行提示,我们也可自定义提示文案。

image.png

7.如果用高级表单和输入框绑定收集数据,需在新建表单时,选择输入框对应的表单项一般为:文本、段落、数字、网址、邮箱、手机号。

image.png

8.将表单引入到编辑器中

image.png

9.引入表单后,找到需要跟输入框绑定的表单项,进行绑定

image.png

高级用法

1.特殊触发器:改变时。当判断用户输入内容是否有误,可通过改变时的触发器进行判断。

image.png

8.如输入框限制最多输入5个字符,我们可以在改变时的触发器这里,拿到输入框的值,并进行实时判断。

①添加1个参数变量,数值类型,初始值为0

image.png

②在输入框改变时的触发器设置参数值,表达式:(@姓名@+'').length,下图为设置动图

0016163a796c731b2ec199edbf23669

③添加1个段落组件提示,用在用户输入字符数超出时显示,现在设置为初始隐藏。

image.png

具体效果

image.png

④给参数变量设置触发器,当字符数超出5个时,会显示提示。

image.png

⑤继续完善下这个地方:当输入字符数小于等于5时,隐藏这个提示。

image.png


五、相关Q&A

如何让日期输入框初始状态显示本日日期?