qcform

qcform是一个轻量的，易用的表单绑定器，在1.1.0版本中，我对源代码进行了彻底的重构， 现在它的min体积只有不到7kb,可以在任何传统开发环境(未使用构建工具)中无缝使用。当初写这个的时候 其实还考虑到了使用模板解析，虚拟dom，异步渲染，但是在一个以控制表单位主要目标的库中，用到以上的东西显然过于 浪费，在分析模板，抽象虚拟dom，以及diff打补丁的时候，这些开销显然会使其失去原来的初衷。

安装

NPM安装

• npm i qcform
• yarn add qcform

<script>标签引入

进入仓库中的dist目录，将其中的js文件作为依赖引入(或者css文件)

注意

你可以按照我的源文件形势和dom结构来构建你的表单，在大多数情况下我也推荐如此，阅读那些流行的UI库你会发现它们的dom结构都是大同小异的， 也就是说，这个库实际上并不提供配套的样式，源代码中的样式只是我调试着玩的而已(尽管我将它用在了我的项目中...),你可以在demo中看见详细的使用方法

使用

• js文件

// webpack 构建下
import FormBind from 'qcform'

const binder = new FormBind('.form')
// 如果需要验证

• html文件

<form class="my-form">
  <!-- form-item类为一个标准的表单项 -->
  <div class="form-item">
    <label class="form-item__label">姓名:</label> <!-- label项 -->
    <label class="form-item__wrap" data-valid="name"> <!-- 在需要验证时请务必保证表单以一个wrap包裹 -->
      <div class="w-input">
        <input type="text" class="input__payload" 
        data-bind="name" placeholder="请填写姓名">
      </div>
    </div>
  </div>

  <div class="form-item">
    <label class="form-item__label">邮箱:</label> <!-- label项 -->
    <label class="form-item__wrap" data-valid="email"> <!-- 在需要验证时请务必保证表单以一个wrap包裹 -->
      <div class="w-input">
        <input type="text" class="input__payload" 
        data-bind="email" placeholder="请填写邮箱">
      </div>
    </div>
  </div>
</form>

• 该模块暴露一个全局构造函数 FormBind 该函数接受两个参数 第一个参数是选择器字符串(使用querySelector实现),第二个选项是配置项，具体可以去看配置一栏 具体用法参考仓库demo文件

实例API

binder.validate(prop)

验证某一个值，前提是你已经为它提供了对应的规则，具体在demo中尝试

binder.validateAll()

验证所有设置了验证规则的表单值

binder.clearValidate(prop)

清楚某个值得验证

binder.clearAllValidate()

清除所有的验证

配置项

data

// 如果显式的指定data,里面初始化的数据就会在视图中呈现出来,否则会自动生成一个json表单对象
// 可以通过这个data发起交互
{
  data: {
    name: '张三',
    age: 11
  }
}

默认也是唯一的用于管理数据的对象，注意data中的值没有递归去setter值，这是故意为之的，因为这个库本身只为表单服务， 如果有复杂数据，可以在data中初始化，在另外一个配置项update中使用数据更新的钩子函数来处理复杂数据

update

{
  update: {
    name (value, ref) {
      console.log(value + '更新了')
    }
  }
}

update主要用来监听数据的变化

rules

{
  rules: {
    name: [
      {method: 'required', limit: true, msg: '必须!'},
      {method: 'range', limit: [4, 6], msg: '长度限制在4-6位'}
    ]
  }
}

最核心的配置功能，在引用盛放错误节点的容器后,实例会在验证出现问题的时候抛出错误， 并且追加一个错误节点到错误存放容器中,验证通过时销毁同时解除引用

提示

请在demo中查看具体的用法，你也可以将项目拉去下来安装好依赖 运行

npm run dev or yarn dev