Ar-easy-validator NPM

ar-easy-validator

安装和使用

npm install --save ar-easy-validator

或者直接通过CDN

<script src="https://cdn.jsdelivr.net/npm/ar-easy-validator"></script>

什么是ar-easy-validator

之前有一个需求是，当用户填完所有的表单才会高亮按钮，若按钮置灰时，点击按钮用户还可以知道没有完成的表单项是哪些，除此之外，表单中有些内容是否是必填项取决于某一项是否符合某些条件，于是封装了这个校验器。

Github上有很多现成的校验器，这款校验器和其他校验器最大的不同在于, 它的校验规则以字面量的形式编写，比较简单且意思明了。

通过传入一个表单的值和需要校验的规则，返回校验的结果和提示消息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ar-easy-validator demo</title>
</head>
<body>
  <script src="../dist/validator.js"></script>
  <script>
    const formData = {
        name: '姓名',
        sex: '',
        age: 18,
        isStudent: 0,
        job: ''
    };
    const formDataRules = [
        // name必须符合名字规则
        { field: 'name', name: '姓名', rules: 'isName'},
        // sex必填
        { field: 'sex', name: '性别'},
        // age大于15
        { field: 'age', name: '年龄', rules: {'>': 15}},
        // isStudent必填，可传递提示语
        { field: 'isStudent', name: '是否是学生', tip: '是否是学生是必填项'},
        // 当isStudent==1时才会去校验job字段
        { field: 'job', name: '工作', need: [{field: 'isStudent', rules: {'===': 1}}]}
    ]
    const r = Validator.validate(formData, formDataRules);
    console.log(r.res, r.msg);       // false sex is error

    // 新增自定义校验器
    Validator.addRule('isInArray', (value) => {
        return [1,2,3,4,5,6,7,8,9,0].indexOf(value);
    })
    const ohterRules = [
      { field: 'name', name: '姓名', need: [{ field: 'test', rules: 'isInArray'}]}
    ]
    const r2 = Validator.validate({name: ''}, ohterRules);
    console.log(r2.res, r2.msg);       // false name is error
    
    const r3 = Validator.validate({name: '王花花'}, ohterRules);
    console.log(r3.res, r3.msg);       // true success
  </script>
</body>
</html>

方法说明

方法名	规则
isRequired	必填
isEmpty	是否为空
isEqual	是否相等
isEmail	邮箱
isMobile	手机号
isConcat	手机号和座机
isWx	微信
isName	姓名
isNumber	纯数字
isPositiveInt	是否是正整数
isBankcard	银行卡
isAge	年龄
isMoney	金额（两位数）
isChinese	是否为中文
isEnglish	是否为英文
isUrl	url
isIdcard	身份证
validate	校验方法
addRule	自定义校验方法

代码示例：

const validator = new Validator();
const res1 = validator.isName('错误的姓名');      // false
const res2 = validator.isPhone('13800138000');   // true

validate说明

const { res, msg } = validator.validate(formData, rules);

formData为一个对象，rules是校验规则。校验规则格式如下： | 参数 | 参数说明 | 是否必填 | 格式 | | ----- | ---------------- | -------- | -------- | | rules | 校验规则 | 否 | string、object、array，默认为isRequired | | field | key值 | 是 | string | | tip | 报错提示 | 否 | string | | need | 校验前置条件 | 否 | array |

rule规则说明

rule可支持字符串、对象和数组： | 参数类型 | 参数举例 | | ------------------ | ---------------------------------------- | | 字符串（单个校验） | rules: 'isName' | | 对象（单个校验） | rules: {'>': 2} | | 数组（多个校验） | rules: 'isMoney', {'>': 2}, {'<': 100} |

当rule为字符串时，可传入以下参数：

校验规则名字	通过条件
isRequired	必填
isEmpty	是否为空
isEqual	是否相等
isEmail	邮箱
isMobile	手机号
isConcat	手机号和座机
isWx	微信
isName	姓名
isNumber	纯数字
isPositiveInt	是否是正整数
isBankcard	银行卡
isAge	年龄
isMoney	金额（两位数）
isChinese	是否为中文
isEnglish	是否为英文
isUrl	url
isIdcard	身份证

当rule为对象时，可传入以下参数：

校验方法	通过条件
<	小于
<=	小于等于
>	大于
>=	大于等于
==	等于
===	全等于,其中NaN === NaN， +0 !== -0,还可以浅比较对象

代码示例：

const rule = {
    // 单种校验规则-字符串
    name: { rule:'isName', tip: '请输入正确的姓名' },
    // 单种校验规则-对象
    age: { rules: {'=': 2 } },
    // 多种校验规则-数组
    score: { rules: [ 'isNumber', { "==": 100 } ] },
}

need规则说明

跟rule相似：

const rule = {
    // 当age符合年龄校验规则时，再校验job
    job: { rule:'isReuqired', need: [{ field: 'age', rule: 'isAge' }] },
    // 当age大于等于18时，再校验job
    job: { rule:'isReuqired', need: [{ field: 'age', rule: { ">=": 18 } }] },
    // 当age符合年龄校验规则且大于等于18时，再校验job
    job: { rule:'isReuqired', need: [{ field: 'age', rule: ['isAge', { ">=": 18 }] }] }
}

addRule

代码示例：

validator.addRule('isInArray', (str) => {
   return [1,2,3,4,5,6,7,8,9,0].indexOf(str);
})

validator.isInArray('3');
validator.validate({test: 3}, rule: 'isArray');

该方法接受两个参数，第一个是校验规则的名字，第二个是校验函数。

注意：校验规则不可命名为validate和addRule。

@infinitebrahmanuniverse/nolb-ar-@everything-registry/sub-chunk-1159 @zalastax/nolb-ar-

3 years ago

3 years ago

3 years ago

3 years ago