This package has been deprecated

Author message:

本包已迁移至:@itwmw/form-validate

form-validate-wm
TypeScript icon, indicating that this package has built-in type declarations

3.1.1 • Public • Published

Web表单验证类

Document Npm Test License Demo

小程序,Vue,Web等项目中均可使用

文档目录

安装

npm i form-validate-wm

使用

JavaScript中的用法

import { Validate } from 'form-validate-wm'
new Validate();

Html Script引入后

<script src="form-validate-wm/index.js"></script>
<script>
    new Validate();
</script> 

CommonJs中的用法

var Validate = require('form-validate-wm').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 Index
{
    constructor()
    {
        const rules = {
            'user'  : 'require|mail|max:30',
            'pass'  : 'require|chsDash|length:6,16'
        }
        
        super(rules)
    }
}

系统内置了一些常用的验证规则可以满足大部分的验证需求,具体每个规则的含义参考内置规则一节。 一个字段可以使用多个验证规则(如上面的user字段定义了requiremax两个验证规则)

方法定义

如果使用的是独立验证(即手动调用验证类进行验证)方式的话,通常使用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数据

全部完整文档

Package Sidebar

Install

npm i form-validate-wm

Weekly Downloads

3

Version

3.1.1

License

MIT

Unpacked Size

193 kB

Total Files

14

Last publish

Collaborators

  • moniang
  • xieshao