qy-validate-rules
v1.0.6
Published
该前端校验库适用于旗云健康项目中的特定表单字段校验,包括但不限于身份证校验,数字校验,手机号校验等等
Downloads
5
Readme
qy-validate-rules 使用说明
1.概述
该前端校验库适用于旗云健康项目中的特定表单字段校验,包括但不限于身份证校验,数字校验,手机号校验等等
2.使用方式
使用 npm 或者 yarn 安装,以下使用 yarn 方式举例:
安装
yarn add qy-validate-rules
引入
import { CustomizeRules } from "qy-validate-rules";
调用
const res = CustomizeRules("idCard", value);
3.验证 demo
在 react 中:
import React from "react";
import { ProForm, ProFormText } from "@ant-design/pro-components";
import { CustomizeRules } from "qy-validate-rules";
export default () => {
return (
<ProForm>
<ProFormText
name="name"
label="姓名"
rules={[
{
validator: (rules, value, fn) => {
const res = CustomizeRules("idCard", 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 { CustomizeRules } from "qy-validate-rules";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
form: {
name: "",
},
rules: {
name: [
{
validator: (rule, value, callback) => {
const res = CustomizeRules("idCard", value);
if (!res.checkState) {
callback(new Error(res.message));
}
},
trigger: "blur",
},
],
},
};
},
};
</script>
<style scoped></style>
4.支持校验类型(持续补充。。。)
| 类型名称 | 类型说明 | | --------- | -------- | | idCard | 身份证 | | phone | 手机号码 | | telephone | 固定电话 | | age | 年龄 | | ECode | 邮政编码 | | email | 邮箱 | | age | 年龄 |
5.更新记录
- 1.0.0~1.0.5 项目初始化
- 1.0.6 更新校验函数的入参类型,以支持校验多种类型
const res = CustomizeRules("idCard", value);
const res = CustomizeRules(['phone','telephone'], value);