传智学员信息登记表html代码_2分钟上手、3小时学会无代码软件开发---表单及用户交互...

656c09cd7918176842ce56c49fee065c.png
  • 表单用于用户输入信息、提交信息
  • 表单设计可以用Column列元件、Row行元件、各类输入框元件、提交处理的按钮元件来设计
  • 表单可以放在页面中,也可以放在弹窗等元件中

输入的HTML约束验证

约束输入类型:针对不同类型输入我们有以下不同输入元件可直接拖放使用

Text Field单行输入元件
Text Area多行输入元件
Password Field密码输入元件
Number Field数字输入元件
Date Field日期输入元件
Selection Field下拉选择元件
File Field文件输入元件

约束输入内容长度:可以为元件添加html.maxlength属性

fff789633705e657395e62236f348c57.gif

为元件添加一些属性变量,如<Readonly>、<Disabled>等

526ca17800dc014a2b5478b383e244cb.png
Readonly固定名称变量限定了是否可以编辑,如果传值为布尔No值,则锁定无法输入
Disabled固定名称变量是可否使用,一般输入框中用上面一个足够,按钮等元件多用Disabled,同样布尔值传入方式设定值

输入数据的判断

对于输入内容,我们可以在输入框添加一个Action行为处理元件并在其内部设计逻辑进行内容验证

d9a162327f5a19b679b1d79df6b1c270.gif
上例是判断输入字符串是否包括@符号,如果没有,则弹出提醒信息指出地址无效并将输入内容撤销
输入数据内容判断都是在完成输入时,也可以用一个<On Change>固定名称的行为处理元件来处理
 · 添加方式:为元件添加一个行为处理元件改名称为<On Change>即可,或右键添加子元件处理

输入值进行提交处理时验证

7083a3bd407998189c89f274a0ab5459.png
此验证是在提示时进行的验证,验证逻辑开发在提交按钮的<On Click>行为处理元件中
将父级引用对象中输入框的值值传入一个独立的行为处理元件,首先检查是否有值,有值时传出
可以验证文本内容,包括是否有特殊字符,代码注入检查等(这属安全性)

用户信息安全性验证:

在执行服务器端处理时,使用Secured Service服务器安全行为元件,对输入值进行的内容验证

677d04fd95a4d92c393042a5c2194737.png
Secured Service服务器安全行为元件默认添加了一些处理逻辑,可以在默认预定义的逻辑中自己开发自定义的验证逻辑

表单输入元件高级用法

输入框类型变换

5629954225bb331f474043dc61caa479.png
上例中,输入框位置首先是由Pane显示块元件占据的
显示块中通过设定Text Field文本输入元件为不启用来先显示Selection Field选择元件对象的

a8421f57660aeff11e2e04d2fc8db182.png
在Selection Field选择元件中添加了一个<On Change>固定名称的行为处理元件
行为处理元件中逻辑为:确认用户选择的是不是手动输入这个值
如果用户选择了手动输入值,则进行选择菜单的不显示处理(<Visible>显示属性变量元件传布尔值No)
并且对Text Field文本输入元件进行显示处理(<Visible>显示属性变量元件传布尔值Yes)

输入框提示信息:

0fba159d175e8b9b403f35cb14a96c1a.png
输入框的提示信息一般是添加一个固定名称为<Placeholder Text>的文本类型变量元件,将提示信息传给变量即可
Selection Field选择元件中默认有此变量,其他输入元件中可以复制复用,或手动添加文本类型的变量元件,命名为固定名称<Placeholder Text>

输入默认值的设计:

7c7cbdbffe2c959e214c9d492b4b5648.png
用户输入最常用的值,或是由其他逻辑产生的录入值,均可以将值传给输入框元件的<Value>值变量元件中,这类属程序主动录入
正常使用时可减少用户录入工作,需要时用户可删除默认值填写实际值

*****

本文为TERSUS无代码开发手册文章,供参考学习使用,在有需要详细了解对应内容时细看学习,敬请关注并转发文章

参考我们手册第一个文章中的2分钟的计算器功能的拖放连线开发演示,可学会无代码开发是如何开发软件的

想学无代码软件开发的学员请先学习3小时免费教学视频,3小时内可学会开发并开发出一套管理软件系统,然后看手册及其他视频来进阶提高快速成为高级开发人员

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值