原生表单表单元素你可能用过。除了提交表单，还有一些内置的表单验证，比如require,minlength,maxlength,and各种类型的输入，比如type=email，可以用来验证是否是email类型，以及如果不满意，也可以使用pattern进行定期校验。原生表单验证大致如下。虽然丑，但是功能很强大，基本可以满足一般需求。不过ui毕竟太原生了，不好自定义，所以很多时候都没有用到这个默认的表单验证。再来看看xy-form下的效果结构，和原来的基本差不多，不需要额外的js逻辑。可以说，丑小鸭立马变白天鹅。xy-formxy-form是xy-ui的一个新组件，主要用于表单提交和表单验证，可以完全替代原有的form表单。下面简单介绍一下主要的属性和方法。推荐看在线文档，可以实时交互。用法很简单npmnpmixy-uicdn或直接从github复制源码。使用...表单默认行为属性xy-form有如下内置属性，基于html5规范。这里的默认行为意味着当您单击提交按钮或按Enter时，表单首先检查表单元素的格式。如果有错误，会标记错误，全部正确后才提交。表单地址动作值为URL，指定将表单数据发送到哪里。输入键将触发表单。requestmethod指定请求方式，默认为get，post可选。validationnovalidate如果使用该属性，则在提交表单时不进行任何验证。方法submit当表单中包含一个htmltype="submit"的按钮时，点击该按钮可以触发表单提交。可以通过form.submit()主动触发。清空重置当表单中包含htmltype="reset"的按钮时，点击该按钮可以清空表单。可以通过form.reset()主动触发。下面是一个账号和密码最多的登录框登录reset效果图如下首先输入框都设置了required属性，表示必填项，如果在提交时没有输入，会提示如下信息。其次，密码框指定了minlength属性，表示最小字符长度。如果不符合格式，满足所有要求后会提示以下信息提交。您可以在控制台查看提交的表单数据。格式是formData。可以转换json。CustomformCustomformsubmission当表单有action属性时，回车键可以触发表单提交，如果包含htmltype="submit"的按钮，点击按钮可以触发表单提交。如果想通过ajax手动提交，可以去掉action属性，这样就不会触发默认的表单提交效果。可以通过form.formdata获取表单的值。sumbitBtn.onclick=function(){fetch('/login',{method:'POST',body:form.formdata,}).then(function(data){//})}默认自定义表单验证，if验证失败，表单将不会被提交。你可以通过表单的form.checkValidity()方法手动验证所有表单元素，也可以通过form.validity获取验证的有效性。sumbitBtn.onclick=function(){if(form.checkValidity()){//全部验证通过XyDialog.success({title:"全部验证通过",content:JSON.stringify(form.formdata.json)})}另外，xy-input可以自定义校验规则，比如确认重复密码pwdAgain.customValidity={method:(el)=>{returnel.value==pwd.value;},tips:'前后密码不一致'}具体可以参考xy-input的文档。其他的xy-form不是一个独立的组件。很多表单元素，比如xy-input、xy-checkbox、xy-radio等，没有提到。您可以参考文档。有了这些组件，你就可以轻松完成表单验证，如文中所示。xy-form是一个原生的web组件，不受框架限制，可以直接使用。如果你想使用其他类似的组件，可以关注xy-ui，它汇集了其他各种常见的交互组件。欢迎star~。
