建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery WEB 表单工具插件 TinyForm

来源:易助科技网浏览量:10收藏

简介

TinyForm是一个基于 JQuery 的WEB表单处理工具 ,仅操作表单,不。使用这个工具,不会改变原有的DOM结构和样式,也不会新增或移除元素。 他根据传入的选择器或DOM/jQuery对象,创建表单实例,然后在这个范围内搜索带有name属性的表单字段。

插件主要功能:

通过一个接口读取表单的指定(或全部)字段的值

通过一个接口写入表单的指定(或全部)字段的值

通过一个接口重置表单的指定(或全部)字段的值

对字段进行校验

对表单数据进行暂存,下次打开浏览器可以再次读取


使用

1.  根据情况引入相关文件


2.  HTML


<form id="foo" method="post" action="/foo/bar">
  <input type="text" name="name" value="hyjiacan" data-rule="required" />
  <input type="text" name="age" value="16" />
</form>


3.  调用


<script>
  var form = new TinyForm('#foo')
  
  // 读取所有字段的值
  var data = form.getData() // {name: 'hyjiacan', age: '16'}
  
  // 读取字段 name 的值
  var name = form.getData('name')
  
  // 'hyjiacan'
  // 设置所有字段的值
  form.setData({ name: 'Korra',  age: 21 })
  
  // 设置字段 name 的值
  form.setData('Korra', 'name')
  
  // 校验输入
  var result = form.validate()
  
  // 提交表单
  form.submit()
</script>



相关链接

Gitee 地址 :https://gitee.com/hyjiacan/TinyForm/tree/master

中文文档 :https://hyjiacan.oschina.io/tinyform/