详解基于原生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第二章
Sep 30 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
详解Javascript实践中的命令模式
May 05 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python线程池如何使用
2020/05/28 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
PHP面试题附答案
2015/11/28 面试题
Servlet面试题库
2015/07/18 面试题
美容院营销方案
2014/03/05 职场文书
业务员的岗位职责
2014/03/15 职场文书
请假条范文大全
2014/04/10 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
酒店端午节活动方案
2014/08/26 职场文书
停电放假通知
2015/04/14 职场文书
教师节随笔
2015/08/15 职场文书
七个Python必备的GUI库
2021/04/27 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL