表单插件
开发背景
业务开发,经常要使用框架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
- 点击提交按钮
- 正在输入内容,当失去焦点时,也触发验证
功能
验证规则
如果你要验证手机号码、邮箱,只要在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布局)
- 按钮
- chapter-btn-normal(一般按钮样式)
- chapter-btn-group(一组按钮)
- chapter-btn(基础样式)
- 表单组件(input,select等)
- chapter-form(表单)
- chapter-group(一组组件)
- chapter-row(一行的组件排列样式)
- chapter-input
- 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);//填充数据并渲染数据
};
复制代码