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"
  }
  

前期准备及落地提效

详情见内部文档

• 调研
• 研讨