Lite-validator.js - 轻量级的验证工具类,做纯数据验证,不操作相关DOM与事件注册,规则配置方便,简单易用

Last update: Mar 26, 2021

lite-validator.js

轻量级的验证工具类,做纯数据验证,不操作相关DOM与事件注册,规则配置方便,简单易用

依赖ES6的 Promise,如果需要低版本浏览器支持,请使用 dist/lite-validator.js

安装

npm install lite-validator --save

ES6 引用

import { validForm, validValue, validField } from 'lite-validator'

AMD 引用

var liteValidator = require('lite-validator');
validForm = liteValidator.validForm;
validValue = liteValidator.validValue;
validField = liteValidator.validField;

浏览器引用

">
<script src="../lite-validator/dist/lite-validator-es5.js" type="text/javascript">

<script>
window.liteValidator.validForm
window.liteValidator.validValue
window.liteValidator.validField
</script>

API

  • validForm 验证整个 表单
  • validField 验证单个 字段
  • validValue 验证单个 数值

validValue

做纯数据的验证,返回 truefalse

validValue(value, ruleName, pms)validValue.ruleName(value, pms)

value 数值 ruleName 规则名称 pms 规则的参数,可以是多个,具体参数见下面的默认规则

validValue.required(' ')//false
validValue.qq('123')//false
validValue.phone('1761231221')//false
validValue.email('1761231221')//false
validValue.Length('1761231221', '~5')//false 由于length与函数的length冲突,这里将首字母大写,暂时只有这一个规则是大写
validValue.range('3', '1~5')//true 默认转换为数值类型
···

validField

用于表单中 单个字段 的验证,可以 组合 多种规则,异步验证 某个字段

validField (formEl, field, rules)

formEl 表单的DOM对象 field 可以是字段的 name 名称,也可以是字段的DOM对象 rules 规则数组

let i = 0;
validField(formEl, 'name', [
	['required'],
	[(el)=>{
     window.timmerx = setInterval(()=>console.log(++i), 1000);
     return new Promise((r,j)=>{
      setTimeout(()=>{r(el.value); clearInterval(window.timmerx)}, 3000);
     })}
    ]
  ])
.then(res =>{
  console.log('验证通过:'+res)
})
.catch(err =>{
  console.log(err.msg || '')
})

validForm

用于验证整个表单,默认是遇到验证失败时就停止验证

validForm(formEl, fieldsRules, validAll)

formEl 表单DOM对象 fieldRules 所有字段的验证配置 validAll 是否一次性验证所有字段

//逐个验证,遇到错误时,停止验证,常用于移动端表单验证
validForm(oFormBox, {
  'uName':[['required'],['length:~10','字符长度过长,请小于10个字符']],
  'uAge': [['required'],['range:25~40','请输入25至40周岁']],
  'uEmail': [['required'],['email']],
  'uBirthday': [['required'],['date']],
  'invalicode': [['required']],
  'uPwd': [['required'],['password']],
  'rePwd': [['required'],['match:uPwd','与密码输入不一致']],
  'address': [['required'],['chinese']],
  'city': [['required'],['checked:1~','至少选择1项']],
})
.then(res=>console.log(res))
.catch(err=>{
	if(err instanceof Error) throw err;
	console.log(err.msg);
})

// 一次性验证所有字段,常用于PC端表单验证
validForm(oFormBox, {
  'uName':[['required'],['length:~10','字符长度过长,请小于10个字符']],
  'uAge': [['required'],['range:25~40','请输入25至40周岁']],
  'uEmail': [['required'],['email']],
  'uBirthday': [['required'],['date']],
  'invalicode': [['required']],
  'uPwd': [['required'],['password']],
  'rePwd': [['required'],['match:uPwd','与密码输入不一致']],
  'address': [['required'],['chinese']],
  'city': [['required'],['checked:1~','至少选择1项']],
}, true)
.then(res=>{
  console.log(res)
})
.catch(err=>{
  console.log(err)
})

验证成功 返回成功字段的验证信息 如果是遇到错误就停止,则返回一个对象 {el:inputObj, field:fieldName} 如果是一次性验证所有字段,则返回这个对象组成的数组

验证失败 如果在验证过程中失败,出现异常,则返回异常对象 如果是验证规则失败,则返回,失败的字段信息对象 {el:inputObj, msg:errmsg, field:fieldName} 如果是一次性难所有字段,则返回这个对象组成的数组

内置规则

常用正则

必填项

  • required 字段必填

整数

  • integer 整数
  • integer(+) 正整数
  • integer(+0) 正整数和零
  • integer(-) 负整数
  • integer(-0) 负整数和零

长度

  • length(n) 请填写 n 个字符
  • length(n~) 请至少填写 n 个字符
  • length(~n) 请最多填写 n 个字符
  • length(n1~n2) 请填写 n1 到 n2 个字符

选择数量 Checkbox

  • checked 必选
  • checked(n) 必选 n 项
  • checked(n~) 至少选择 n 项
  • checked(~n) 最多选择 n 项
  • checked(n1~n2) 选择 n1 到 n2 项

选择范围

  • range(n~) 请填写不小于 n 的数
  • range(~n) 请填写不大于 n 的数
  • range(n1~n2) 请填写 n1 到 n2 的数

过滤

  • filter 过滤 <>"'\ 和字符实体编码的字符

过滤隐藏字段和禁用字段

在验证表单时,会先过滤出配置的字段中,不是隐藏或禁用的字段,禁用的字段主要判断,主要判断该表单控件是否有属性 disabled 或 class disabled

自定义规则与提示

在表单验证中,可以配置组合多个验证规则,可以配置验证失败的错误提示,如果不设置,也可以使用默认规则中的配置的提示信息, 如果默认配置中没有,则取该字段的 placeholder

  'uName':[
      ['required', '请输入姓名1'],
      ['length:2~5', '字符数2到5个'],
      ['integer:+'],
      ['range:1~3', '大于1小于等于3'],
      ['checked:1~', '至少选择1个'],
      ['match:pwd', '和pwd这个字段值必须相同'],
      [/^[Α-¥]+$/, '请输入中文字符'],
      [()=>{return Promise.resolve(1)}, '名称已经存在了']

提示的优先级

自定义的提示 > 默认规则的配置 > placeholder

CodePen示例

GitHub

https://github.com/git-lt/lite-validator
You might also like...

A simple yet flexible validator library for vue.js

Simple Vue Validator Simple Vue validator is a lightweight yet flexible plugin for Vue.js 2.0 that allows you to validate input fields, and display er

Apr 11, 2022

Vue data validator - Easiness, simplicity, accurate

Overview This is a Vue data validator, trying to cover all needs and built on top of ES6 to achieve the best architecture. Demo You can view a demo an

Dec 8, 2021

A light, universal, interchangeable validator for all purposes including form validation with fully control.

vue-universal-validator A light, universal, interchangeable validator for all purposes including form validation with fully control. Usage rules.js //

Nov 29, 2019

Laravel frontend validator

An easy way to validate forms using backend logic.

Sep 8, 2021

A useful form validator for VueJS framework

vuejs-easy-validator A useful form validator for VueJS framework Introduction Suppose you work with VueJS framework. Imagine a form with a lot of fiel

Nov 27, 2018

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021

Vue validator

vue-validator 3.8k before gzipped Install Note: the "vue-validator" on NPM refers to https://github.com/kazupon/vue-validator. $ npm install --save @j

Feb 22, 2018
Vue data validator - Easiness, simplicity, accurate

Overview This is a Vue data validator, trying to cover all needs and built on top of ES6 to achieve the best architecture. Demo You can view a demo an

Dec 8, 2021
A light, universal, interchangeable validator for all purposes including form validation with fully control.

vue-universal-validator A light, universal, interchangeable validator for all purposes including form validation with fully control. Usage rules.js //

Nov 29, 2019
Laravel frontend validator

An easy way to validate forms using backend logic.

Sep 8, 2021
A useful form validator for VueJS framework

vuejs-easy-validator A useful form validator for VueJS framework Introduction Suppose you work with VueJS framework. Imagine a form with a lot of fiel

Nov 27, 2018
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021
Vue validator

vue-validator 3.8k before gzipped Install Note: the "vue-validator" on NPM refers to https://github.com/kazupon/vue-validator. $ npm install --save @j

Feb 22, 2018
vuejs lite music player example
vuejs lite music player example

vuejs-music-player A Vue.js lite music player Demo Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run d

Mar 12, 2022
a lite vue3.0 admin template,there is no typescript !

Vuejs3+Vite2+ElementPlus后台管理系统模板 简介 一个免费开源的后台管理系统模板。使用最新的主流技术开发,开箱即用(主要还是用于学习参考!),主要向以下两个高star的后台管理系统模板进行学习,并根据需求进行取舍和优化改进。 vue-vben-admin 使用了最新的vue3,

Jun 16, 2022
🔥️ Vue I18n Lite🌐 Lightweight, minimal internationalization plugin for Vue.js

?? Lightweight, minimal internationalization plugin for Vue.js

Feb 17, 2022
Petite vue i18n lite

??️ Petite Vue I18n Lite A super lightweight and minimal plugin that introduces internationalization into your Petite Vue app with a simple API. ?? Us

Feb 16, 2022