qy-validate-rules v1.0.6

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.支持校验类型（持续补充。。。）

5.更新记录

• 1.0.0~1.0.5 项目初始化
• 1.0.6 更新校验函数的入参类型，以支持校验多种类型

const res = CustomizeRules("idCard", value);

const res = CustomizeRules(['phone','telephone'], value);