我是初学者前端开发人员。 现在，我正在Minsk IT公司学习和培训。 学习Web-ui的基础知识以
Webix JS库
为例 ，我想分享我的适度经验并将其保存为该有趣的UI库的小指南。
第二项任务
在上一个
作业中，我使用Webix库创建了一个页面。 现在，我需要为用户与表单的交互设置以下逻辑：
本文将使用的主要小部件是
form 。 另外，可以在
文档中阅读。
您可以下载源
链接 。
生成的演示应用程序可以在
此处找到。
步骤1.将新数据添加到表中。
为了方便阅读代码并将项目划分为逻辑块，我将创建一个functions.js文件，并在index.html文件中指示其路径。 在其中，我将设置负责应用程序行为的功能。
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
在新文件中，我创建将新数据添加到表中的
addItem函数：
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
要访问Webix库中的元素，请使用
$$方法 ，将元素ID传递到其中。 在上面的代码中，使用
$$("film_form")构造访问表单。
addItem函数的工作方式如下：我通过其getValues方法从表单获取当前数据，并将其写入item_data变量。 使用此数据，我使用add方法在工作表中创建一个新记录。
要通过单击带有值
"Add new"的小部件
"button"来调用此功能，我设置了
click属性。
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
因此，应将表单中的数据添加到表中：
步骤2.验证表单。 弹出消息
在添加新数据之前，必须验证（验证）来自输入字段的信息。 验证
由validate（）方法触发
，在处理数据之前，我将在
addItem函数内部立即调用该
方法 。 我还将在此处放置有关成功验证的弹出消息的代码。
Webix中的一条简单消息是由
webix.message（）函数创建的，该函数将消息的文本作为参数。 一条消息将出现在右上角。
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
该功能是这样的。 在If条件中，我们访问表单并调用validate（）方法。 如果测试成功，则该方法返回true，并进一步执行代码。 将数据添加到表后，将调用带有消息的函数- "Validation is successful!" 。
弹出消息：
现在，我需要在
表单窗口小部件中创建一个
规则对象。
validate（）函数必须检查所有表单字段中的信息是否符合指定的条件。
成功验证的条件如下：
- 标题字段不能为空；
- 字段年份不得小于1970年且大于当前年份；
- 评分字段不能为零；
- 投票栏位必须大于1且小于1,000,000。
然后，带有验证规则
的表单小部件的源代码将如下所示：
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
规则对象的属性必须与表单元素的
name: "…"的值
name: "…"属性匹配。
预定义的规则 webix.rules.isNotEmpty和webix.rules.isNumber在title，rating和votes属性中设置，在这一年中有一个定义
用户规则的函数。
规则在成功时返回true，在错误时返回false。 当规则对象的所有属性返回true时，表单将通过验证。 否则，未通过验证的字段将以红色突出显示。
测试结果：
步骤3.错误消息
设置了规则，现在我需要一种机制来显示错误消息，以通知用户输入的数据不符合指定的条件。 为此，您可以用红色突出显示该字段并添加错误消息。
字段可以
设置invalidMessage属性；其值是带有错误消息的文本。 如果验证失败，此消息将显示在字段下方。
代码：
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
结果：
步骤4.清洁表格
要清除表单，必须创建一个由
"Clear"按钮调用的函数。 她还负责警告消息的输出，如果响应是肯定的，则她将擦除输入的数据并重置错误指示。
警告信息：
我将调用
clearForm函数并在其中编写以下代码：
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
webback.confirm（{...}）回调方法用于确认窗口，该窗口接受具有以下属性的对象：
text和
title 。 由于该方法返回promise，因此我可以使用
.then处理程序。 如果答案是肯定的，则在.then处理程序中，我将调用两个方法：clear（）-清除表单字段，和clearValidation（）删除验证错误标签。
最后的动作是将函数调用绑定到
"Clear"按钮。
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
可以在此处查看代码和演示
-snippet.webix.com/17w1dodb 。
泛化
从源头上很明显，上一篇文章的代码非常简单，但是随着项目的发展，它逐渐变得越来越复杂，并且其数量也在增加。 为了避免迷失在无穷无尽的代码行中，保持易读性和结构简单性变得很重要。 与表单进行交互的示例仅描述了基本方法，但从它们中也可以清楚地看出，为了提供页面动态性，webix提供了一个小巧，易读且直观的代码。 与纯JavaScript相比，它的体积最多是其两倍。