表单插件

开发背景

业务开发，经常要使用框架layui，bootstrap等。为了写一个表单，有的经常要把整个库导进来，增大项目体积；有的还要额外导入的扩招包，使用起来非常麻烦。开发这个插件，可以解决这个问题。

技术点

Object.defineProperty, MVVM模式，正则，构造函数，原型链

How to use simplelly?

html

<form class="chapter-form" id="formChapter" enctype="application/x-www-form-urlencoded">
  ....
</form>
复制代码

javascript

const Yue = require("./Yue.js")//sea.js模块化语法，使用时请注意

const form = new Yue({
  els: 'formChapter'
})
const submmitBtn = document.querySeletor("#sumbit")

submmitBtn.click = () => {
  const isPass = form.validtor()//提交时，触发表单验证
  if (isPass) {
    //todo
  }
}
复制代码

演示效果

演示操作

git clone https://github.com/JhonLandy/Yue.git
npm install
nodemon index
复制代码

open 127.0.0.1:4000/chapterAdd

点击提交按钮

验证2.jpg

正在输入内容，当失去焦点时，也触发验证

验证1.jpg

功能

验证规则

如果你要验证手机号码、邮箱，只要在html中这样使用即可

<input class="chapter-input" y-valid="phone|email" maxlength="255">
复制代码

如果只想验证手机号码

<input class="chapter-input" y-valid="phone" maxlength="255">
复制代码

如果你想要更多验证规则验证，可以在js脚本里这样定义：

from.valids['customer'] = function() {
  if (true) {
    return true//验证通过返回true，否则false
  }
}
复制代码

数据绑定

just like the Vue.和vue的v-modal指令一样的

<input class="chapter-input" y-modal="chapterItem" y-valid="empty" maxlength="255">
复制代码

会自动生成数据的属性chapterItem

const form = new Yue({
  els: 'formChapter'
})
console.log(form.$data)// {chapterItem: null}
复制代码

有内置样式提供使用（基于flex布局）

按钮
1. chapter-btn-normal（一般按钮样式）
2. chapter-btn-group（一组按钮）
3. chapter-btn（基础样式）
表单组件（input,select等）
1. chapter-form（表单）
2. chapter-group（一组组件）
3. chapter-row（一行的组件排列样式）
4. chapter-input
5. chapter-textarea

核心源码

Yue.prototype.init = function () {
    buildData.call(this);//扫描y-modal构造数据模型(Modal)
    obServer(this.$data);//数据劫持(ViewModal)
    complie.call(this);//编译,给特定组件(比如带有y-modal就是特定主键,可扩展)添加订阅者(View)
    if(this.$config.data)setData(this.$data, this.$config.data);//填充数据并渲染数据
};
复制代码

源码地址