sneakxy-validator

前端校验使用

Usage no npm install needed!

<script type="module">
  import sneakxyValidator from 'https://cdn.skypack.dev/sneakxy-validator';
</script>

README

校验框架

介绍

javascript 实现的校验框架

安装教程

  1. npm install sneakxy-validator --save

使用说明

  1. npm使用方式
import { validate, load, i18n, registerValidator, removeValidator } from 'sneakxy-validator';
//import cn from 'sneakxy-validator/src/locale/zh-CN';
//import en from 'sneakxy-validator/src/locale/en-US';

//添加其他国际化信息
//load('zh-CN', cn);
//load('en-US', en); 
//load('zh-TW', {……}); 
//改变当前国际化错误信息,默认:zh-CN
//i18n('en-US');
//直接覆盖当前国际化信息信息
//i18n(cn);	

//添加自定义校验
//registerValidator('custom', (value, rule, label, messages) => {});
//删除校验
//removeValidator("range");

//需要校验的数据
var model = {
    name: '',
    
};
//每个字段可以包含一个或多个校验规则,对象或者数组
//校验规则格式:rules = { name: {……} ]} 或者 rules = { name: [ {……} ]}
var rules = {
    name: {
        //替换错误信息中的{0}。不填写{0}会被替换成被校验的“字段名”,本例中为"name"。规则为数组的情况只第一个规则填写此字段即可
        label: "姓名", 
        //校验数据类型:string、function、array、object、number、date、boolean、integer、float、regexp、email、url、color、mobile
        type: "string", 
        required: true,    
        selected: true, //与required一样,错误提示可单独设置
        min: 5, //数据值类型为string、number、array时有效
        max: 10, //数据值类型为string、number、array时有效
        range: [5, 10],    //范围,数据值类型为string、number、array时有效
        len: 10, //数据值类型为string、number、array时有效
        //message: "", //自定义错误信息。最好在规则数组中单独使用,一般跟自定义校验使用,不然所有校验错误信息都会是此数据
        validate(value, rule, label, messages) {
            //自定义校验,同步校验
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(new Error('自定义错误信息.'));
                    //resolve(false); //会返回default错误信息,如设置message则返回message信息
                }, 3000);
            });
            //另外两种返回形式
            //return true;
            //return new Error('自定义错误信息.');
        }
    }
}

var options = {
    //firstError: false, //每个字段是否第一个错误就返回,默认:true
    //messages: {……} //当前校验使用的国际化信息
};

validate(model, rules, function(valid, errors) {
    console.log(valid);
    if(!valid) {
        for(var i=0; i<errors.length; i++) {
            console.log(errors[i].name + ":" + errors[i].message);
        }
    }
}, options);
  1. 正常引入script方式
<script src="sneakxy-validator.min.js"></script>
<script src="locale/zh-CN.min.js"></script>
<script src="locale/en-US.min.js"></script>
<script type="text/javascript">
//添加其他国际化信息
//SneakxyValidator.load('zh-TW', {……});
//错误信息国际化,默认zh-CN
//SneakxyValidator.i18n("zh-CN");
//SneakxyValidator.i18n("en-US");
//直接覆盖当前国际化信息
//SneakxyValidator.i18n({……});

//需要校验的数据
var model = {……};
//每个字段可以包含一个或多个校验规则,对象或者数组
//校验规则格式:rules = { name: {……} ]} 或者 rules = { name: [ {……} ]}
var rules = {……};
var options = {……};

SneakxyValidator.validate(model, rules, function(valid, errors) {
    console.log(valid);
    if(!valid) {
        for(var i=0; i<errors.length; i++) {
            console.log(errors[i].name + ":" + errors[i].message);
        }
    }
}, options);