详解基于原生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在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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
php新建文件自动编号的思路与实现
2011/06/27 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
python3.0 字典key排序
2008/12/24 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python requests 使用快速入门
2017/08/31 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python定义一个函数的方法
2020/06/15 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
资深财务管理人员自我评价
2013/09/22 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
个人授权委托书模板
2014/09/14 职场文书
教师自我剖析材料
2014/09/29 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
办公室卫生管理制度
2015/08/04 职场文书
详解python的内存分配机制
2021/05/10 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
python数字类型和占位符详情
2022/03/13 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS