npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ideagays/validate-js

v0.1.1

Published

## 安装

Downloads

1

Readme

validator 表单校验

安装

npm i @souche-f2e/validate.js --save

基础使用

import Validator from "@ideagays/validator";

let validatorResult = Validator.check([
{
    value: this.form.age,
    key: 'age', 
    name: '年龄',
    rules: [{ name: 'required' }, { name: 'max:90', msg: '年龄不能大于90'}]
},], (msg, result) => {
    // to do something
});

Rules

{0}:校验字段提供的name值

{1}:校验条件值 例如max:20中的20

| 名称 | 默认提示文案 | 说明 | |:---------|:---------|:-------| | required | {0}不能为空 | 非空必填 | | isNumber | {0}必须是合法的数字 | 合法数字 | | isPositiveInteger | {0}必须是正整数 | 正整数 | | isEmail | 邮箱格式不正确 | 邮箱 | | isPhone | 手机号格式不正确 | 手机号 | | isIDCard | 身份证号格式不正确 | 大陆身份证 | | isFax | 电话号码格式不正确 | 固话传真 | | isEqual | 两个值不相等 | 判断相等 equalTo:${otherValue}| | maxlength | {0}最大长度为{1} | 最大长度 maxlength: 20 | | minlength | {0}最小长度为{1} | 最小长度 minlength: 20 | | max | {0}不能大于{1} | 最大值 max:20 | | min | {0}不能小于{1} | 最小值 min:20 | | isChinese | {0}只能包含汉字 | 中文汉字 |

Methods

addRule 添加自定义规则

用法

Validator.addRule('isEnglish', {
    validate: (value) => {
        return /^[a-zA-Z]*$/.test(value);  // 返回值必须是正向的
    },
    msg: '{0}只能包含英文字母'
});

check 校验

用法

Validator.check(allFields<field>, callback(msg, notPassFields)); // 全部校验通过返回true, 否则返回false;

参数

{array} allFields

{object} field

|参数|说明|类型|是否必须| | ----- | ---------- | ------ | -------- | | value | 字段的值 | String | 是 | | name | 字段名称,在不提供校验提示文案时,可用该值替换默认提示文案中的{0} | String | 否 | | key | 作为校验结果中对象中的对应key值,一般用于表单域标红等需求 非必传 | String | 否 | | rules | 规则数组 rule | Array[rule] | 是 |

{obejct} rule

|参数|说明|类型|是否必须| | ----- | ---------- | ------ | -------- | | name | 规则名称,除了默认提供的之外,还支持正则表达式,带条件的规则写法是用:分割名称和条件值,例如max:20 | String | 是 | | msg | 不提供字段名称name或传入自定义正则表达式时,该值必传,否则不必传 | String | - |

{function} callback 回调函数 |参数|说明|类型| | ----- | ---------- | ------ | -------- | | msg | 校验不通过的第一个字段的提示文案 | String | | notPassFields | 所有校验失败字段的集合 例如 {'age': '年龄不能超过20'}, 未提供key值时,序号index作为key值 | Object |

例子

Demo

    <template>
        <input type="text" v-model="form.name" placeholder="姓名" :class="{'error': validator.name}">
        <input type="text" v-model="form.ename" placeholder="英文名" :class="{'error': validator.ename}">
        <input type="text" v-model="form.idCard" placeholder="身份证号" :class="{'error': validator.idCard}">
        <input type="text" v-model="form.phone" placeholder="手机号" :class="{'error': validator.phone}">
        <input type="text" v-model="form.age" placeholder="年龄" :class="{'error': validator.age}">
        <input type="text" v-model="form.psw" placeholder="密码" :class="{'error': validator.psw}">
        <input type="text" v-model="form.psw1" placeholder="重复密码" :class="{'error': validator.psw1}">
    </template>

    <script>
        import Validator from "@ideagays/validator";

        export default {
            data () {
                return {
                    form: {
                        name: "",
                        ename: "",
                        idCard: "",
                        phone: "",
                        age: "",
                        psw: "",
                        psw1: ""
                    },
                    validator: {}
                };
            },
            methods: {
                submit() {
                this.validator = Validator.check(
                    [
                    {
                        value: this.form.name,
                        key: "name",
                        name: "姓名",
                        rules: [{ name: "required" }, { name: "isChinese" }]
                    },
                    {
                        value: this.form.ename,
                        key: "ename",
                        name: "英文名",
                        rules: [{ name: "required" }, { name: 'isEnglish' }]
                    },
                    {
                        value: this.form.idCard,
                        key: 'idCard',
                        rules: [
                        { name: 'isIDCard' }
                        ]
                    },
                    {
                        value: this.form.age,
                        name: "年龄",
                        key: "age",
                        rules: [
                        { name: "isPositiveInteger" },
                        { name: "max:90" }
                        ]
                    },
                    {
                        value: this.form.phone,
                        key: "phone",
                        name: "手机号",
                        rules: [
                        { name: "isPhone" }
                        ]
                    },
                    {
                        value: this.form.psw,
                        key: "psw",
                        name: "密码",
                        rules: [{ name: "required" }]
                    },
                    {
                        value: this.form.psw1,
                        key: "psw1",
                        name: "重复密码",
                        rules: [
                        { name: "required" },
                        { name: `isEqual:${this.form.psw}`, msg: "两个密码不一致" }
                        ]
                    }
                    ],
                    (msg, result) => {
                        console.error(msg);
                        console.error(result);
                        this.validator = result;
                    }
                );
                }
        }
    </script>

    <style scoped>
        .error {
            border: 1px solid red;
        }
    </style>