详解基于原生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 相关文章推荐
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
详解微信小程序图片地扯转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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php使用正则验证中文
2016/04/06 PHP
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
jQuery Plupload上传插件的使用
2017/04/19 jQuery
requirejs + vue 项目搭建详解
2017/06/16 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue实现记事本功能
2019/06/26 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
浅谈Python中的数据类型
2015/05/05 Python
python编写爬虫小程序
2015/05/14 Python
python中字符串前面加r的作用
2015/06/04 Python
python字符串Intern机制详解
2019/07/01 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
生日寄语大全
2014/04/08 职场文书
委托书怎么写
2014/07/31 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
收入证明怎么写
2015/06/12 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Redis Stream类型的使用详解
2021/11/11 Redis
分享Python异步爬取知乎热榜
2022/04/12 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android