跳到主要内容

表单页面实现密码登录

1. 使用背景

实现输入正确密码才可以进行表单的录入及提交。

2. 视频教程

待添加,敬请期待...

3. 实现步骤

3.1 步骤一:创建所需表单

3.1.1 创建辅助表单

用于存储表单页面的密码。

操作步骤:

a. 新建表单,命名为「 辅助表单-密码 」。

b. 在编辑页面分别添加名为 " 表单名称 " 和 " 登录密码 " 的两个单行文本组件。

c. 点击保存。

d. 新增一条数据,作为密码的初设,即可。

(操作效果如图3.1-1 所示)

图3.1-1 辅助表单设计

3.1.2 创建登录表单

作为需要输入正确密码的才可进行操作的表单页面。

操作步骤:

a. 新建表单,命名为「 客户资料表 」。

b. 在表单的编辑页面添加一个布局容器组件,并将列比例设置为3:6:3;

c. 在布局容器中间布局栏添加分组组件,命名为"登录授权"。

d. 在"登录授权"分组内分别添加名为" 当前表单名称 "、" 联动-表单密码 "、" 密码 " 的单行文本组件及名为 " 确定 " 的按钮组件。(添加按钮组件方法请参考拷贝&粘贴组件。)

e. 在表单内添加名为"客户信息表"的分组组件。

f. 在" 客户信息表单 "分组分别添加名为 " 企业名称 " 、" 联系人 "、" 联系人电话 "的单行文本组件,且均设为必填。

(操作效果如图3.1-2 所示)

图3.1-2 页面布局效果

3.1.3 表单内组件的属性设置

上述步骤实现了表单的布局排列,接下来进行表单组件的属性设置。

(1)当前表单名称

操作步骤:

a. 点击选中 " 登录授权 " 分组下 " 当前表单名称 " 单行文本组件。

b. 在右侧 属性栏-状态 选中 " 只读 " ,并将默认值改为 " 客户资料表 " ,即可。

(操作效果如图3.1-3 所示)

图3.1-3 设置当前表单名称

(2)联动-表单密码

通过设置数据联动,实现两个表单之间数据的对比。数据联动功能介绍请参考文档 👉 数据联动

操作步骤:

a. 点击选中 " 联动-表单密码 " 单行文本组件。

b. 右侧 属性栏-默认值 选择 " 数据联动 "。

c. 点击 " 数据联动 " 按钮,数据关联表选择 " 辅助表单-密码 "。

d. " 当前表单名称 " 值等于 " 表单名称 " 的值时," 联动-表单密码 " 联动显示为 " 登录密码 " 的对应值。

e. 将状态设置为 " 隐藏 ",即可。

(操作效果如图3.1-4 所示)

图3.1-4 设置数据联动并隐藏组件

(3)密码

操作步骤:

a. 点击选中 " 密码 " 单行文本。

b. 选择右侧 属性栏-格式 " 密码 " 选项。(操作效果如图 3.1-5 所示)

c. 点击右侧 高级-动作设置 " 新建动作 " 按钮, 选择 " onChange值发生变化 " 选项。

d. 在弹出的对话框分别选择 页面 JS - 添加新动作 且动作名称为 " onChange " 。

e. 将下述代码复制到 页面 JS 面板中,即可。(操作效果如图 3.1-6 所示)

图3.1-5 设置组件格式为 " 密码 "

图3.1-6 绑定 onChange 动作

下述代码可直接复制在 JS 面板内

export function onChange({ value }) {
//输入密码时,「密码」绑定的描述信息变量 errMsg 为空字符串
this.setState({
errMsg: ""
});
}
(4)按钮组件

操作步骤:

a. 点击选中 " 确定 " 按钮。

b. 点击右侧 高级-动作设置 " 新建动作 " 按钮, 选择 " onClick点击按钮 " 选项。

c. 在弹出的对话框分别选择 页面 JS - 添加新动作 且动作名称为 " onClick " 。

d. 将下述代码复制到 页面 JS 面板中,即可。

(操作效果如图 3.1-7 所示)

图3.1-7 按钮绑定 onClick 动作

下述代码可直接复制在 JS 面板内,注意:需要替换组件的唯一标识。

export function onClick(){
//获取「联动-表单密码」输入框的内容,替换「联动-表单密码」唯一标识。
const password = this.$("textField_kv1tv20v").getValue();
//获取「密码」输入框的内容,替换「密码」唯一标识
const inputpassword = this.$("textField_kv0o3vkb").getValue();
if (password === inputpassword){
//如果密码一致,隐藏登录的分组,显示需要输入内容的分组
this.setState({
loginbehavior: "HIDDEN",
behavior: "NORMAL",
errMsg: ""
})
//「密码」和「联动-表单密码」输入框重置为空,显示提交按钮,
this.$("textField_kv1tv20v").reset();
this.$("textField_kv0o3vkb").reset();
document.getElementsByClassName("deep-form-submit")[0] ? document.getElementsByClassName("deep-form-submit")[0].style.display = "" : ""//显示提交按钮
} else {
//给「密码」绑定的描述信息变量 errMsg 赋值文字,并设置样式为红色
this.setState({
errMsg: "密码错误,请重新填写!"
});
setTimeout(() => {
let doms = document.querySelectorAll(".next-form-item-help");
doms.forEach(item => {
item.style.color = "red";
})
//移动端提示颜色
document.querySelector(".mt-form-item-help span") ? document.querySelector(".mt-form-item-help span").style.color = "red" : ""
}, 50);
}
}

3.2 步骤二:设置初始化时提交按钮隐藏

操作步骤:

a. 点击「 客户资料表 」表单左侧 页面 JS 按钮。

b. 将下述代码复制到弹出的 页面 JS 面板中,即可。

下述代码可直接复制在 JS 面板内

export function didMount() {
document.getElementsByClassName("deep-form-submit")[0] ? document.getElementsByClassName("deep-form-submit")[0].style.display = "none" : ""//隐藏提交按钮
}

3.3 步骤三:创建变量数据源并绑定

在「 客户资料表 」表单中,创建变量数据源,进行配置项的保存及使用。

3.2.1 创建变量数据源

操作步骤:

a. 点击表单右侧 " 数据源 " 按钮。

b. 点击 " 添加 " 按钮,选择 " 变量 " 选项,

c. 将变量数据源命名为 " loginbehavior " ,并添加描述为 " 控制登录分组状态 " 。

d. 点击保存

e. 重复1-4步骤,分别创建另外两个名为 " behavior " 及 " errMsg " 的变量数据源。

(操作效果如图3.3-1 所示)

上述三个变量数据源相关说明:

  • " loginbehavior " 的作用为控制登录分组状态,在数据处填写"NORMAL"作为默认值。
  • " behavior " 的作用为控制提交分组状态,在数据处填写"HIDDEN"作为默认值。
  • " errMsg " 的作用为存储错误提示信息,默认值为空,无需填写。

图3.3-1 创建变量数据源

3.2.2绑定变量数据源

(1)绑定 loginbehavior 变量

操作步骤:

a. 点击选中 " 登录授权 " 分组。

b. 点击右侧 属性栏-默认状态一栏的 {/} 按钮。

c. 在弹出的 " 变量绑定 " 对话框中选择 " 数据源 - state.loginbehavior "。

d. 点击确定,即可。

(操作效果如图3.3-2 所示)

图3.3-2 绑定 loginbehavior变量

(2)绑定behavior变量

操作步骤:

a. 点击选中"客户信息表单"分组。

b. 点击右侧 属性栏-默认状态一栏 的 {/} 按钮。

c. 在弹出的 " 变量绑定 " 对话框中选择 " 数据源 - state.behavior"。

d. 点击确定,即可。

(操作效果如图3.2-3 所示)

图3.2-3 绑定 behavior

(3)绑定errMsg变量

操作步骤:

a. 点击选中"登录授权"分组下名为"密码"的单行文本组件。

b. 点击右侧属性栏-描述信息一栏的 {/} 按钮。

c. 在弹出的"变量绑定"对话框中选择"数据源-state.errMsg"。

d. 点击确定,即可。

(操作效果如图3.3-4 所示)

图3.3-4 绑定 errMsg

4. 效果演示

登录错误提示

登录成功展示

5. 在线体验

在线体验请点击链接 👉 客户资料表

宜搭为了更好的优化宜搭使用手册内容和质量,占用您3-5分钟时间,辛苦填写一下文档反馈问卷。文档反馈问卷是匿名提交,同时问卷信息仅用于宜搭文档体验反馈收集,感谢您对宜搭的支持!

点此链接填写调研问卷


--------------------获取宜搭最新信息,欢迎关注我们--------------------

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4