Wondering what’s next for npm?Check out our public roadmap! »

@itwmw/form-validate

3.2.0 • Public • Published

Web表单验证类

Test License Document Demo

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

文档目录

安装

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' : 'admin@admin.com',
    '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字段定义了requiremaxmail三个验证规则) :::

方法定义

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

$data = {
    'user' : 'admin@admin.com',
    '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数据

全部完整文档

Install

npm i @itwmw/form-validate

DownloadsWeekly Downloads

3

Version

3.2.0

License

MIT

Unpacked Size

250 kB

Total Files

13

Last publish

Collaborators

  • avatar
  • avatar
  • avatar