详解基于原生JS验证表单组件xy-form


Posted in Javascript onAugust 20, 2019

原生form表单

form 表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如 requireminlengthmaxlength ,还有各种类型的 input ,比如 type=email 可以校验是否是邮箱类型,如果不满足还可以使用 pattern 进行正则校验。

原生的表单验证大概如下

详解基于原生JS验证表单组件xy-form

虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用。

下面来看看 xy-form 下的效果

详解基于原生JS验证表单组件xy-form

结构基本和原生类似,也不需要额外的 js 逻辑

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

xy-form

xy-formxy-ui 新增了一类组件,主要用于表单提交和表单验证,完全可以取代原生 form 表单,下面简单介绍一下主要属性和方法,建议阅读在线文档 ,可以实时交互。

使用方式

使用方式很简单

npm

npm i xy-ui

cdn

<script type="module" src="https://unpkg.com/xy-ui/components/xy-form.js"></script>

<!--或者-->

<script type="module">
  import 'https://unpkg.com/xy-ui/components/xy-form.js'
</script>

或者直接从 github 拷贝源码。

<script type="module" src='./node_modules/xy-ui/components/xy-form.js'></script>
<!--或者-->
<script type="module">
  import './node_modules/xy-ui/components/xy-form.js';
</script>

使用

<xy-form>
  ...
</xy-form>

表单默认行为

属性

xy-form 内置了以下属性,基于 html5 规范。

这里的默认行为指的是,点击 submit 按钮或者回车,表单首先对表单元素进行格式校验,如果有误则会将有误的地方标识出来,全部正确后才能进行提交。

  • 表单地址 action

值为 URL ,规定向何处发送表单数据。

回车键会触发表单。

  • 请求方式 method

规定请求方式,默认为 get ,可选 post

  • 验证 novalidate

如果使用该属性,则提交表单时不进行验证。

方法

  • 提交 submit

当表单内包含 htmltype="submit" 的按钮时,点击该按钮可以触发表单提交。

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

  • 清空 reset

当表单内包含 htmltype="reset" 的按钮时,点击该按钮可以清空表单。

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

下面是一个最账号密码的登录框

<xy-form action="/login" method="post">
  <xy-form-item legend="user">
    <xy-input name="user" required placeholder="user"></xy-input>
  </xy-form-item>
  <xy-form-item legend="password">
    <xy-input name="password" required type="password" placeholder="password" minlength="6"></xy-input>
  </xy-form-item>
  <xy-form-item>
    <xy-button type="primary" htmltype="submit">login</xy-button>
    <xy-button htmltype="reset">reset</xy-button>
  </xy-form-item>
</xy-form>

渲染如下

详解基于原生JS验证表单组件xy-form

首先输入框均设置了 required 属性,表示必填项,如果不输入在 submit 时会提示以下信息

详解基于原生JS验证表单组件xy-form

其次,密码框规定了 minlength 属性,表示最小字符长度,如果不满足格式,会提示以下信息

详解基于原生JS验证表单组件xy-form

当全部满足要求才能进行提交,可在控制台查看提交的表单数据,格式为formData,可转换json。

详解基于原生JS验证表单组件xy-form

自定义表单

自定义表单提交

当表单带有 action 属性时,回车键可以触发表单提交,如果包含 htmltype="submit" 的按钮时,点击该按钮可以触发表单提交。

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

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

详解基于原生JS验证表单组件xy-form

sumbitBtn.onclick = function(){
  fetch('/login', {
    method: 'POST',
    body: form.formdata,
  })
  .then(function(data){
    //
  })
}

自定义表单验证

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

可以通过表单的 form.checkValidity() 方法手动校验所有表单元素,也可通过 form.validity 获取验证合法性。

详解基于原生JS验证表单组件xy-form

sumbitBtn.onclick = function(){
  if(form.checkValidity()){
    //全部验证通过
    XyDialog.success({
      title:"全部验证通过",
      content:JSON.stringify(form.formdata.json)
    })
  }
}

另外, xy-input 可以自定义校验规则,比如确认重复密码

pwdAgain.customValidity = {
  method:(el)=>{
    return el.value == pwd.value;
  },
  tips:'前后密码不一致'
}

详情可参考xy-input 的文档

其他

xy-form 并不是一个独立的组件,很多表单元素,如 xy-inputxy-checkboxxy-radio 等等均未提及,可参考 文档 ,有了这些组件,可以很轻松的完成表单校验,如文章开所示。

xy-form 是一个原生web组件,不限制于框架,可直接使用。如果想使用其他类似的组件,可关注xy-ui,汇集了其他各类常见交互组件,欢迎star~。

详解基于原生JS验证表单组件xy-form

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
js获取class的所有元素
Mar 28 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
js实现常见的工具条效果
Mar 02 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 #Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 #Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 #Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 #Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 #Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 #Javascript
详解ES6 Promise的生命周期和创建
Aug 18 #Javascript
You might like
mayfish 数据入库验证代码
2010/04/30 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
初识Node.js
2014/09/03 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
javascript 闭包详解
2015/07/02 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
WebPack基础知识详解
2017/01/16 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python async with和async for的使用
2019/06/20 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
python 生成器需注意的小问题
2020/09/29 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
店长职务说明书
2014/02/04 职场文书
酒店节能减排方案
2014/05/26 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
入党自荐书范文
2015/03/05 职场文书
导游词之山西-五老峰
2019/10/07 职场文书