@cowin/validator-rules
v1.0.4
Published
该前端校验库适用于旗云健康项目中的特定表单字段校验,包括但不限于身份证校验,数字校验,手机号校验等等
Downloads
5
Keywords
Readme
使用说明
1.概述
该前端校验库适用于旗云健康项目中的特定表单字段校验,包括但不限于身份证校验,数字校验,手机号校验等等
2.使用方式
使用 npm 或者 yarn 安装,以下使用 yarn 方式举例:
安装
yarn add @cowin/validator-rules
引入
import validatorRules from "@cowin/validator-rules";
调用
const res = validatorRules("CardID", value);
// 校验多种类型
const res = validatorRules(['Phone','Telephone'], value);
3.验证 demo
在 react 中:
import React from "react";
import { ProForm, ProFormText } from "@ant-design/pro-components";
import validatorRules from "@cowin/validator-rules";
export default () => {
return (
<ProForm>
<ProFormText
name="name"
label="姓名"
rules={[
{
validator: (rules, value, fn) => {
const res = validatorRules("CardID", value);
if (!res.checkState) {
fn(res.message);
} else {
fn();
}
},
},
]}
/>
</ProForm>
);
};
在 vue 中:
<template>
<div class="hello">
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
import validatorRules from "@cowin/validator-rules";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
form: {
name: "",
},
rules: {
name: [
{
validator: (rule, value, callback) => {
const res = validatorRules("CardID", value);
if (!res.checkState) {
callback(new Error(res.message));
}
},
trigger: "blur",
},
],
},
};
},
};
</script>
<style scoped></style>
4.支持校验类型(持续补充。。。)
| 类型名称 | 类型说明 | | ---------- | ------------ | | CardID | 身份证 | | Phone | 手机号码 | | Age | 年龄 | | PostalCode | 邮政编码 | | Email | 邮箱 | | Telephone | 固定电话 | | SocialCode | 社会信用代码 |
5.更新记录
1.0.0 项目初始化
1.0.1 更新主函数命名为validatorRules
1.0.2 添加社会信用代码校验规则
1.0.4 更新打包方式