原生形式

每个人都可能使用过表单元素。除了提交表单，还有一些内置的表单验证，比如require、minlength、maxlength，以及各种类型的输入，比如type=email，可以验证是否是邮箱类型。如果没有，模式可以用于定期验证。

原生表单验证大致如下

虽然丑，功能强大，基本可以满足一般需求，但是ui太原生，不方便自定义，所以很多情况下不使用这种默认的表单验证。

让我们看看xy-form下的效果

该结构基本上类似于原生结构，不需要额外的js逻辑

可以说，丑小鸭立刻变成了白天鹅。

xy形式

Xy-form是xy-ui的新组件，主要用于表单提交和表单验证，可以完全替代原来的表单。主要性能和方法简单介绍如下。建议在线阅读文档，实时互动。

使用方式

用法很简单

新公共管理

npm i xy-uicdn

脚本类型=' module ' src=' http :https://unpkg.com/xy-ui/components/xy-form . js '/脚本！-or-script type=' module ' import ' https://unpkg.com/xy-ui/components/xy-form.js'/script或直接从github复制源代码。

脚本类型=“模块”src=。/node _ modules/xy-ui/components/xy-form . js/'脚本！-or-script type=' module' import。/node _ modules/xy-ui/components/xy-form . js '；/script使用

Xy形式./xy-表单默认行为

属性

Xy-form内置了以下属性，并且基于html5规范。

这里的默认行为意味着当您单击提交按钮或输入时，表单将首先检查表单元素的格式。如有错误，将识别错误的地方，所有错误只有在正确后才能提交。

表单地址操作值是URL，它指定将表单数据发送到哪里。

输入触发表单。

request方法指定request方法，默认情况下是get，post是可选的。

验证新数据如果使用此属性，表单将在不验证的情况下提交。

方法

提交当表单包含一个htmltype='submit '的按钮时，点击该按钮可以触发表单提交。

可以通过form.submit()主动触发。

清除重置当表单包含htmltype='reset '按钮时，单击此按钮可清除表单。

它可以由form.reset()主动触发。

以下是大多数帐户密码的登录框

xy-form action='/login '方法=' post ' Xy-form-item legend=' user ' Xy-input name=' user '必需占位符=' user '/Xy-input/Xy-form-item Xy-form-item legend='password ' Xy-input name=' password '必需类型=' password '占位符=' password ' min length=' 6 '/Xy-input/Xy-form-item Xy-button类型=' primary' html类型=' submit ' log in/Xy-button Xy-button html类型=' submit '

首先在输入框中设置了必选属性，表示必选项。如果不输入，提交时会提示您以下信息

其次，密码框指定minlength属性，表示最小字符长度。如果不满足格式，将提示以下信息

当所有要求都满足时，可以提交。提交的表单数据可以在控制台中查看。格式为FormData，json可以转换。

自定义表单

自定义表单提交

当表单具有动作属性时，回车键可以触发表单提交，如果包含htmltype='submit '按钮，点击该按钮可以触发表单提交。

如果想通过ajax手动提交，可以去掉action属性，这样就不会触发默认的表单提交效果。

您可以通过form.formdata获取表单的值.

sumbitbtn . onclick=function(){ fetch('/log in '，{method:' post '，body:form.formdata，})。然后(函数(数据){//})}自定义表单验证

默认情况下，如果验证失败，将不会提交表单。

您可以通过表单的form . checkvalidation()方法手动验证所有表单元素，也可以通过form.validity获取验证有效性.

Sumbitbtn。onclick=function () {if (form。check validation()){//所有验证都通过了XyDialog.success({ title: '所有验证都通过了'，content:json。使(形式)严格化。formdata。JSON)})}}另外，xy-

pwdagain . custom validation={ method :(El)={ return El . value==pwd . value；}，tips:“前后密码不一致”}详情请参考xy输入文档

其他的

Xy-form不是独立的组件。许多表单元素，如xy输入、xy复选框、xy单选按钮等。都没有提到。你可以参考文件。使用这些组件，您可以轻松完成表单验证，如文章开头所示。

Xy-form是原生web组件，不限于框架，可以直接使用。如果想用其他类似的组件，可以关注xy-ui，它集合了其他常见的交互组件。欢迎来到星空~。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。