we-validator

by ChanceYu

ChanceYu / we-validator

:100: 简单灵活的表单验证插件,支持小程序、浏览器以及Nodejs端使用

154 Stars 37 Forks Last release: 7 months ago (v2.1.11) MIT License 77 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

we-validator

2.x 和 1.x 版本有所差别,如果您继续使用老版本,可以查看 1.x 版本。如果您要升级到 2.x 请先阅读升级指南,推荐使用 2.x 版本。

简单灵活的表单验证插件,支持小程序、浏览器、Nodejs。小程序端支持:微信、支付宝、百度智能、字节跳动,小程序默认提示使用

showToast

API 文档 | 示例 Examples,如果你 :sparkling_heart: 就点击 ★Star 吧。

特点

安装

使用 npm:

npm install we-validator --save

使用 cdn:


使用

下面是微信小程序的用法,其它小程序类似

点击查看栗子 :chestnut:
<form bindsubmit="onSubmitForm">
    <input type="text" name="username" placeholder="用户名">
    <input type="number" name="phoneno" placeholder="手机号">
    <input type="text" name="str" placeholder="长度为3的字符串">

    <button type="default" formtype="submit">提交</button>
</form>
const WeValidator = require('we-validator')

Page({
    onReady(){
        this.initValidator()
    },
    onSubmitForm(e){
        let { value } = e.detail

        if(!this.validatorInstance.checkData(value)) return

        // 开始提交表单
        // wx.request
    },
    initValidator(){
        // 实例化
        this.validatorInstance = new WeValidator({
            rules: {
                username: {
                    required: true
                },
                phoneno: {
                    required: true,
                    mobile: true
                },
                str: {
                    length: 3
                },
            },
            messages: {
                username: {
                    required: '请输入用户名'
                },
                phoneno: {
                    required: '请输入手机号',
                    mobile: '手机号格式不正确'
                },
                str: { // 非必填字段
                    length: '请输入长度为3的字符串'
                },
            },
        })
    },
})

Examples

您也可参考当前项目下对应示例

API

Static API

默认支持的规则

注意: 非必填字段只有字段有值才会校验配置的规则

| 规则 | 描述 | 默认提示 | | --- | --- | --- | |

required: true
| 必填 | 此字段必填 | |
pattern: /^\d+$/
| 正则通用 | 不符合此验证规则 | |
email: true
| 电子邮件格式 | 请输入有效的电子邮件地址 | |
mobile: true
| 11位手机号 | 请输入11位的手机号码 | |
tel: true
| 座机号
例如:010-1234567、0551-1234567 | 请输入座机号 | |
url: true
| URL网址 | 请输入有效的网址 | |
idcard: true
| 身份证号 | 请输入18位的有效身份证 | |
equalTo: 'field'
| 字段值相同校验
例如:密码和确认密码,参考 | 输入值必须和字段
field
相同 | |
notEqualTo: 'field'
| 字段值不能相同校验
equalTo
相反 | 输入值不能和字段
field
相同 | |
contains: 'str'
| 是否包含某字符 | 输入值必须包含
str
| |
notContains: 'str'
| 不能包含某字符 | 输入值不能包含
str
| |
length: 5
| 长度为多少的字符串 | 请输入
5
个字符 | |
minlength: 2
| 最少多长的字符串 | 最少要输入
2
个字符 | |
maxlength: 6
| 最多多长的字符串 | 最多可以输入
6
个字符 | |
rangelength: [2, 6]
| 某个范围长度的字符串 | 请输入长度在
2
6
之间的字符 | |
number: true
| 数字 | 请输入有效的数字 | |
digits: true
| 正整数数字 | 只能输入正整数数字 | |
integer: true
| 正整数或负整数数字 | 只能输入整数数字 | |
min: 3
| 大于多少的数字
(最小只能多少),也可以比较字段的值,参考 | 请输入大于
3
的数字 | |
max: 9
| 小于多少的数字
(最大只能多少),也可以比较字段的值 | 请输入小于
9
的数字 | |
range: [3, 9]
| 大于且小于多少的数字 | 请输入大于
3
且小于
9
的数字 | |
chinese: true
| 中文字符 | 只能输入中文字符 | |
minChinese: 3
| 最少多少个中文字符 | 最少输入
3
个中文字符 | |
maxChinese: 9
| 最多多少个中文字符 | 最多输入
9
个中文字符 | |
rangeChinese: [3, 9]
| 大于且小于多少个中文字符 | 只能输入
3
9
个中文字符 | |
date: true
| 日期(默认使用
new Date(value)
校验) | 请输入有效的日期 | |
dateISO: true
| 日期(ISO标准格式)
例如:2019-09-19,2019/09/19 | 请输入有效的日期(ISO标准格式) | |
ipv4: true
| ipv4地址 | 请输入有效的IPv4地址 | |
ipv6: true
| ipv6地址 | 请输入有效的IPv6地址 |

new WeValidator(options)

实例化

返回: object - validatorInstance

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | options | object | | | | [options.rules] | object | | 验证字段的规则 | | [options.messages] | object | | 验证字段错误的提示信息 | | [options.onMessage] | function | | 错误信息显示方式
默认会自动检测环境。小程序默认使用

showToast

普通web浏览器默认使用
alert

Nodejs端不做处理建议自己配置,详情 | | [options.multiCheck] | boolean |
false
| 是否校验多个字段
需要一次校验多个字段并显示错误信息时使用,详情 |
点击查看栗子 :chestnut:
const WeValidator = require('we-validator')

new WeValidator({
    rules: {
        username: {
            required: true
        },
        phoneno: {
            required: true,
            mobile: true
        }
    },
    messages: {
        username: {
            required: '请输入用户名'
        },
        phoneno: {
            required: '请输入手机号',
            mobile: '手机号格式不正确'
        }
    }
})

.checkData(data, onMessage)

校验数据,会显示错误信息,校验所有字段规则

返回: boolean

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | data | object | | 需要校验的表单数据 | | onMessage | function | | 自定义错误信息提示,详情 |

.checkFields(data, fields, onMessage)

校验数据,会显示错误信息,只校验对应的字段,参考

通常用于单独校验一个或多个字段规则

返回: boolean

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | data | object | | 需要校验的表单数据 | | fields | array | | 校验的字段规则,必填
例如:

['phoneNo']
只校验此字段的所有规则
['phoneNo:required']
只校验此字段的
required
规则
['phoneNo:required,mobile']
只校验此字段的
required
mobile
规则
['phoneNo', 'code']
只校验这两个字段的所有规则 | | onMessage | function | | 自定义错误信息提示,详情 |

.isValid(data, fields)

校验数据是否有效,不会提示错误信息

使用场景例如:表单中某些字段校验通过按钮才可点击的场景,参考

返回: boolean

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | data | object | | 需要校验的表单数据 | | fields | array | | 校验的字段
不传,默认校验所有字段规则
如果有,只校验对应的字段规则
配置方法同

.checkFields(data, fields)
|

.addRules(options)

动态添加字段校验,参考

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | options | object | | 同

new WeValidator(options)
详情 |
点击查看栗子 :chestnut:
const WeValidator = require('we-validator')

const validatorInstance = new WeValidator({
    rules: {
        username: {
            required: true
        }
    },
    messages: {
        username: {
            required: '请输入用户名'
        }
    }
})

// 动态添加校验
validatorInstance.addRules({
    rules: {
        phoneno: {
            required: true,
            mobile: true
        }
    },
    messages: {
        phoneno: {
            required: '请输入手机号',
            mobile: '手机号格式不正确'
        }
    }
})

.removeRules(fields)

动态移除字段校验,参考

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | fields | array | | 需要移除校验的表单字段 |

validatorInstance.removeRules(['username'])

WeValidator.addRule(ruleName, ruleOption)

静态方法:添加自定义规则,参考

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | ruleName | string | | 规则名称 | | ruleOption | object | | 规则配置 | | [ruleOption.message] | string | | 默认错误信息文字
可以动态插入参数,例如

请输入长度在 {0} 到 {1} 之间的字符
参考 | | [ruleOption.rule] | function|regexp | | 规则校验函数,需要返回一个
boolean

也可以直接写一个正则表达式(如果只是正则类型的校验)。 |
点击查看栗子 :chestnut:
const WeValidator = require('we-validator')

// 添加自定义规则(这两种写法一样)
WeValidator.addRule('theRuleName', {
  message: '默认错误信息文字',
  rule(value, param){
    return /\d/.test(value)
  }
})
WeValidator.addRule('theRuleName', {
  message: '默认错误信息文字',
  rule: /\d/
})

// 使用方式一,实例化
new WeValidator({
    rules: {
        field1: {
            theRuleName: true
        }
    },
    messages: {
        field1: {
            theRuleName: '提示信息'
        }
    }
})

// 使用方式二,调用函数
WeValidator.checkValue('theRuleName', 'str')

WeValidator.checkValue(ruleName, value, param)

静态方法:函数校验

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | ruleName | string | | 规则名称 | | value | string | | 需要校验的内容 | | param | any | | 传递给规则参数 |

支持所有默认支持的规则,也支持自定义的规则。

 // 必填
let b1 = WeValidator.checkValue('required', 'str') // true

// 不能小于6的数字 let b2 = WeValidator.checkValue('min', 'str', 6) // false

// 大于2小于5的数字 let b3 = WeValidator.checkValue('range', 'str', [2, 5]) // false

WeValidator.onMessage

自定义错误信息提示

可以全局配置一个,也可以单独配置,非常灵活。

优先级是:

.checkData(data, onMessage)
>
new WeValidator({ onMessage })
>
WeValidator.onMessage
> 默认检测

默认的消息提示方式:小程序默认使用

showToast
,浏览器默认使用
alert
,Nodejs端无处理建议自己配置。
点击查看栗子 :chestnut:
const WeValidator = require('we-validator')

// 1、全局配置
WeValidator.onMessage = function(data){
    /*
    data 参数
    {
        msg, // 提示文字
        name, // 表单控件的 name
        value, // 表单控件的值
        param // rules 验证字段传递的参数
    }
    */
}

// 2、实例化配置
new WeValidator({
    rules: {},
    message: {},
    onMessage: function(data){
        alert(data.msg)
    }
})

// 3、验证的时候配置 onMessage(nodejs端校验可以使用此方式)
if(!obj.checkData(formData, onMessage)) return

function onMessage(data){
  alert(data.msg)
}

多个字段同时校验并显示错误

使用场景如下,注意:当

multiCheck
true
时,建议使用自定义
onMessage
参考

we-validator

点击查看栗子 :chestnut:
var validatorInstance = new WeValidator({
  multiCheck: true,
  onMessage: function(data){
    console.log(data);

    // 根据自己的项目去处理,控制错误信息的显示
  },
  rules: {
      username: {
          required: true
      },
      phoneno: {
          required: true,
          mobile: true
      }
  },
  messages: {
      username: {
          required: '请输入用户名'
      },
      phoneno: {
          required: '请输入手机号',
          mobile: '手机号格式不正确'
      }
  }
});

Changelog

查看更新日志

Issues

如果您在使用过程中发现 Bug,或者有好的建议,欢迎报告问题

License

license

Copyright (c) 2019 ChanceYu

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.