The form page implements password login
1. Use background
Enter the correct password to enter and submit the form.
2. Video tutorial
To be added, please look forward...
3. Implementation steps
3.1 Step 1: create the required form
3.1.1 create auxiliary forms
The password used to store the form page.
Procedure:
a. Create a form named auxiliary form-password 」.
B. On the edit page, add two single-line text components named "form name" and "login password.
c. Click save.
d. Add a new data as the CHUSHE of the password.
(The operation effect is shown in Figure 3.1-1)
Figure 3.1-1 auxiliary form design
3.1.2 create a login form
As a form page that requires the correct password to operate.
Procedure:
a. Create a form named customer table 」.
B. Add a layout container component on the edit page of the form and set the column ratio to 3:6:3;
c. Add a grouping component in the middle layout column of the layout container and name it "login authorization".
d. Add a single-line text component named "current form name", "linkage-form password", "password" and a button component named "OK" to the "login authorization" group. (For more information about how to add button components, seeCopy & paste components.)
e. Add a grouping component named "customer information table" to the form.
f. Add a single-line text component named "enterprise name", "contact" and "contact phone" to the "customer information form" group, and all of them are required.
(The operation effect is shown in Figure 3.1-2)
3.1.3 property settings of components in the form
The preceding steps implement the layout and arrangement of forms. Next, set the properties of form components.
(1) current form name
Procedure:
a. Click the "current form name" single-line text component under the "login authorization" group.
B. In the property bar on the right-status, select read-only and change the default value to customer table.
(The operation effect is shown in Figure 3.1-3)
Figure 3.1-3 set the current form name
(2) linkage-form password
By setting data linkage, the data comparison between the two forms is realized. For more information about data linkage, see👉Data Linkage
Procedure:
a. Click the "linkage-form password" single-line text component.
B. In the property bar on the right-select data linkage by default ".
c. Click the "data linkage" button and select "auxiliary form-password" for the data Association table ".
d. When the value of "current form name" is equal to the value of "form name", the linkage-form password linkage is displayed as the corresponding value of "login password.
e. Set the status to hidden.
(The operation effect is shown in Figure 3.1-4)
Figure 3.1-4 set data linkage and hide components
(3) password
Procedure:
a. Click Select "password" single line text.
B. Select the format password option in the property bar on the right. (The operation effect is shown in Figure 3.1-5)
c. Click the Advanced-action settings New Action button on the right and select the onChange value change option.
d. In the displayed dialog box, select JS-add new action and the action name is "onChange".
e. Copy the following code to the JS panel of the page. (The operation effect is shown in Figure 3.1-6)
Figure 3.1-5 set the component format to "password"
Figure 3.1-6 binding onChange
The following code can be copied directly into the JS panel.
export function onChange({ value }) {
//输入密码时，「密码」绑定的描述信息变量 errMsg 为空字符串
this.setState({
errMsg: ""
});
}
(4) button components
Procedure:
a. Click OK.
B. Click the Advanced-action settings "new action" button on the right and select the "onClick click button" option.
c. In the dialog box that appears, select JS-add new action and the action name is "onClick".
d. Copy the following code to the JS panel of the page.
(The operation effect is shown in Figure 3.1-7)
Figure 3.1-7 button binding onClick action
The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier of the component.
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 Step 2: Set the submit button to hide during initialization
Procedure:
a. Click the JS button on the left-side page of the customer data table.
B. Copy the following code to the pop-up page JS panel.
The following code can be copied directly into the JS panel.
export function didMount() {
document.getElementsByClassName("deep-form-submit")[0] ? document.getElementsByClassName("deep-form-submit")[0].style.display = "none" : ""//隐藏提交按钮
}
3.3 Step 3: Create and bind a variable data source
In the customer table form, create a variable data source to save and use configuration items.
3.2.1 create a variable data source
Procedure:
a. Click the data source button on the right side of the form.
B. Click the "add" button and select the "variable" option,
c. Name the variable data source as "loginbehavior" and add a description as "control login group status".
d. Click save
e. Repeat steps 1-4 to create two other variable data sources named "behavior" and "errMsg.
(The operation effect is shown in Figure 3.3-1)
The preceding three variable data sources are described as follows:
- The function of "loginbehavior" is to control the status of the login group.
"NORMAL"As the default value. - The function of "behavior" is to control the submission group status, and fill in the data
"HIDDEN"As the default value.
- errMsg stores error messages. The default value is empty.
Figure 3.3-1 create a variable data source
3.2.2 bind variable data sources
(1) bind loginbehavior variables
Procedure:
a. Click to select the logon authorization group.
B. Click the {/} button in the property column-default status column on the right.
c. In the variable binding dialog box that appears, select data source-state.loginbehavior".
d. Click OK.
(The operation effect is shown in Figure 3.3-2)
Figure 3.3-2 bind loginbehavior variables
(2) bind behavior variables
Procedure:
a. Click Select customer information form group.
B. Click the {/} button in the property column-default status column on the right.
c. In the variable binding dialog box that appears, select data source-state.behavior".
d. Click OK.
(The operation effect is shown in Figure 3.2-3)
Figure 3.2-3 binding behavior
(3) bind errMsg variables
Procedure:
a. Click the single-line text component named "password" under the "login authorization" group.
B. Click the {/} button in the property column-description information column on the right.
c. In the variable binding dialog box that appears, select data source-state.errMsg".
d. Click OK.
(The operation effect is shown in Figure 3.3-4)
Figure 3.3-4 binding errMsg
4. Effect demonstration
Login error message
Login successful display
5. Online experience
Please click the link for online experience.👉Customer data sheet
YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!
-------------------- Get the latest information YIDA, welcome to follow US--------------------
