基于MVVM模式开发的表单插件

表单插件

开发背景

业务开发,经常要使用框架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);//填充数据并渲染数据
};
复制代码

源码地址

分类:
前端
标签: