Web表单验证类

此NPM包可用于Vue，React，Angular，小程序，NodeJS,HarmonyOS开发等项目中，如果你的程序不支持NPM，可使用npm i @itwmw/form-validate下载本包后，提取其中的index.js复制到您的项目中，在页面上引入js文件即可开始使用。

文档目录

• 安装使用
• 验证器
• 验证规则
• 错误信息
• 验证场景
• 内置验证规则
• 内置过滤规则
• 独立验证
• 静态调用
• 更新说明
• 演示Demo

安装

npm i @itwmw/form-validate

使用

JavaScript ES6中的用法

import { Validate } from '@itwmw/form-validate'
new Validate();

Html Script引入后

<script src="path/index.js"></script>
<script>
    new Validate();
</script>

CommonJs中的用法

var Validate = require('@itwmw/form-validate').Validate;
new Validate();

验证器定义

为具体的验证场景或者数据表单定义验证器类，直接调用验证类的check方法即可完成验证，下面是一个例子：

我们定义一个LoginValidate 验证器类用于登录的验证。

class LoginValidate extends Index
{
    constructor()
    {
        const rules = {
            'user'  : 'require|mail|max:30',
            'pass'  : 'require|chsDash|length:6,16'
        }
        
        super(rules)
    }
}

可以直接在验证器类中使用super()方法第二个参数定义错误提示信息，例如：

class LoginValidate extends Index
{
    constructor()
    {
        const rules = {
            'user'  : 'require|mail|max:30',
            'pass'  : 'require|chsDash|length:6,16'
        }

        const message = {
            'user.require' : '用户名必须填写',
            'user.mail'    : '用户名需为邮箱',
            'user.max'     : '你使用了长度过长的邮箱号码',
            'pass.require' : '密码必须填写',
            'pass.chsDash' : '密码格式错误',
            'pass.length'  : '密码长度为6~16个字符',
        }
        super(rules,message)
    }
}

如果没有定义错误提示信息，则使用系统默认的提示信息

数据验证

在需要进行登录验证的控制器方法中，添加如下代码即可：

const data = {
    'user' : '[email protected]',
    'pass' : '123456'
};
const login = new LoginValidate();
if(!login.check(data)){
    console.log(login.getError())
}

抛出验证异常

默认情况下验证失败后不会抛出异常，如果希望验证失败自动抛出异常，可以在验证器方法中进行设置： 在constructor中添加super.fail = true 或者在检验时添加

if(!login.check(data,true)){
    console.log(login.getError())
}

也可以使用链表操作

login.setFail(true)

设置开启了验证失败后抛出异常的话，会自动抛出ValidateException异常或者自己捕获处理。 验证规则的定义通常有三种方式，如果你使用了验证器的话，通常通过constructor构建函数中的super()方法或者修改类属性来定义验证规则，而如果使用的是独立验证的话，则是通过setRule方法进行定义。

super定义

class LoginValidate extends Validate
{
    constructor()
    {
        const rules = {
            'user'  : 'require|mail|max:30',
            'pass'  : 'require|chsDash|length:6,16'
        }
        
        super(rules)
    }
}

修改类属性

class LoginValidate extends Validate
{
    rule = {
        'user'  : 'require|mail|max:30',
        'pass'  : 'require|chsDash|length:6,16'
    }
}

::: warning 系统内置了一些常用的验证规则可以满足大部分的验证需求，具体每个规则的含义参考内置规则一节。

一个字段可以使用多个验证规则（如上面的user字段定义了require和max，mail三个验证规则) :::

方法定义

如果使用的是独立验证（即手动调用验证类进行验证）方式的话，通常使用setRule方法进行验证规则的设置，举例说明如下。

$data = {
    'user' : '[email protected]',
    'pass' : '123456'
};

const rules = {
    'user'  : 'require|mail|max:30|diy:1111',
    'pass'  : 'require|chsDash|length:6,16'
};

const login = new Index();
login.setRule(rules)

if(!login.check($data)){
    console.log(login.getError())
}

自定义验证规则

系统内置了一些常用的规则（参考后面的内置规则），如果不能满足需求，可以在验证器重添加额外的验证方法，例如：

class User extends Index
{
    constructor(){
        const rules = {
            'name'  : 'require|check_name:michael',
            'email' : 'mail'
        };
        const message = {
            'name.require' : '用户名必须填写',
            'email.mail'   : '填入的邮箱不是有效的电子邮件地址'
        }
        super(rules,message)
    }

    check_name(value, rule, data = {})
    {
        return value === rule ? true : '用户名错误';
    }
}

验证方法可以传入的参数共有4个（后面两个根据情况选用），依次为：

• 验证数据
• 验证规则
• 全部数据（数组）
• 其他数据（数组）如check_name:michael:1:2 此处为除去michael以外的1,2数据

全部完整文档