@2345mfe/octopus-validate/README.md

表单校验库

# octopus-validate
> 后台表单校验工具库



### 技术选型

- typescript
- rollup

### 项目结构介绍

```bash
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 
### 本地开发

```sh
npm start
```

### 打包

```javascript

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>   
```

- 浏览器

```html
<!-- 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

```javascript
//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配置依赖

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

---

### 前期准备及落地提效
> 详情见内部文档
- 调研
- 研讨