octopus-validate
后台表单校验工具库
技术选型
- typescript
- rollup
项目结构介绍
validator
├─ dist // 构建产物
│ ├─ demo.html // 示例
│ ├─ OcValidate.cjs.js // 构建cjs模式
│ ├─ OcValidate.esm.js // 构建ESM模式
│ └─ OcValidate.umd.js // 构建UMD合集模式
├─ scripts
│ └─ publish.js // npm发版(版本号、包名等控制)
├─ src
│ ├─ strategy
│ │ ├─ pattern.ts
│ │ └─ validateStrategy.ts // 正则类方法
│ ├─ validate
│ │ └─ validateValue.ts // 自定义校验类方法
│ ├─ validator
│ │ └─ validator.ts // 自定义校验库
│ ├─ index.ts
│ └─ util.js // 工具
├─ package.json // 配置信息
├─ README.md // 介绍
├─ rollup.config.js // rollup配置
├─ tsconfig.json // typescript配置
└─ yarn.lock // yarn
API
详情见源码
- OcStrategy 正则类方法
- OcValidate 自定义校验类方法
- OcValidator 自定义校验库
包名
- @2345mfe/octopus-validate
本地开发
npm start
打包
npm run build
安装使用
npm install --save-dev @2345mfe/octopus-validate
项目中调用
- vue
//main.js
import { OcStrategy, OcValidate, OcValidator } from '@2345mfe/octopus-validate'
Vue.prototype.$OcStrategy = OcStrategy
Vue.prototype.$OcValidator = OcValidator
// 业务示例 edit.vue
<el-form-item label="曝光总控" :rules="[{ required: false, validator: $OcValidator.checkNumLimit(3,'输出3以内的正整数'), trigger: 'blur' }]" prop="exposure_limit">
<el-input v-model="ruleForm.exposure_limit" maxlength="40" placeholder="请输入曝光总控"></el-input>
</el-form-item>
- 浏览器
<!-- UMD -->
<script src="./OcValidate.umd.js"></script>
<script>
var validate = window.OcValidate;
let {OcStrategy, OcValidate, OcValidator} = validate;
console.log('UMD:', OcStrategy, OcValidate, OcValidator); //object
</script>
- ESM
//ESM
<script type="module"></script>;
import {OcStrategy, OcValidate, OcValidator} from './OcValidate.esm.js';
// 示例
console.log('ESM:', OcStrategy, OcValidate, OcValidator); //object
/*
* 校验正数(可含小数、0)
*/
console.log('输出:', OcStrategy.posiInt); // 输出:/^[1-9]\d*$/
console.log('输出:', OcStrategy.posiInt.test(0), OcStrategy.posiInt.test(2)); // false true
rollup配置依赖
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@types/ms": "^0.7.31",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"commander": "^6.2.0",
"rollup": "^2.74.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript": "^1.0.1",
"rollup-plugin-uglify": "^6.0.4",
"shelljs": "^0.8.4",
"ts-node": "^9.0.0",
"tslib": "^2.0.3",
"typescript": "^4.0.5"
},
"dependencies": {
"@types/lodash-es": "^4.17.3",
"lodash-es": "^4.17.15"
}
前期准备及落地提效
详情见内部文档
- 调研
- 研讨