Git Product home page Git Product logo

validator's Introduction

@txjs/validator

安装方法默认npm

安装

npm i @txjs/validator

基础示例

import { validator } from '@txjs/validator'

const rules = validator({
  name: {
    required: true,
    minlength: 2,
    maxlength: 8
  }
})

// 规则内容
{
  "name": [
    {
      "ruleName": "required",
      "trigger": [
        "change",
        "blur"
      ],
      "validator": (_, $$$value) => {}
    },
    {
      "ruleName": "minlength",
      "trigger": "blur",
      "validator": (_, $$$value) => {}
    },
    {
      "ruleName": "maxlength",
      "trigger": "blur",
      "validator": (_, $$$value) => {}
    }
  ]
}

校验字段配置 ValidatorRules<Trigger>

/** 自定义方法配置规则 */
interface CustomValidatorRule<Trigger> {
	trigger?: Trigger
	validator: CustomValidatorFunction
}

/** 内置规则 */
export type DefaultsValidatorRules<Trigger> =
	& Record<
		| 'number'
		| 'digits'
		| 'telephone'
		| 'email'
		| 'landline'
		| 'url'
		| 'xss',
		boolean | RuleType<boolean, 'default', Trigger>
	>
	& Record<
		| 'minlength'
		| 'maxlength'
		| 'min'
		| 'max',
		number | RuleType<number, 'default', Trigger>
	>
	& Record<
		| 'range'
		| 'rangelength',
		number[] | RuleType<number[], 'default', Trigger>
	>
	& {
		required: boolean | RuleType<boolean, 'select' | 'array' | 'default', Trigger>
		contains: any[] | RuleType<any[], 'default', Trigger>
	}

/** 暴露自定义规则 */
export declare interface CustomValidatorRules {
	[key: string]: any
}

type Rule<Trigger> =
	& CustomValidatorRules
	& Partial<DefaultsValidatorRules<Trigger>>
	& {
		/** 表单 label */
		label?: string
		/** 触发事件 */
		trigger?: Trigger
		/** 自定义规则 */
		custom?: CustomValidatorRule<Trigger>[]
	}

支持方法

内置验证方法

  • required
  • number
  • digits
  • contains
  • minlength
  • maxlength
  • rangelength
  • min
  • max
  • range
  • xss
  • telephone
  • email
  • landline
  • url

add - 自定义验证方法

import { validator } from '@txjs/validator'

validator.add('custom-name', config: ValidatorConfig<Trigger>)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.