前后端共用的表单验证链:validate-chain

jopen 9年前

Validate-Chain

表单验证链,以及中文验证错误反馈信息

Motivation 为啥要写这个工具?

以NODE作为后端开发单页应用时,前后端对表单的验证的逻辑和返回的提示信息其实是一样的,应该做到前后端共用验证逻辑,在React应用中这一点就更重要了。目前后端可以使用的koa-validate,express-validate等验证util又不能在前端使用,而且似乎目前还没有一个是中文提示信息的,于是就决定自己写一个前后端共用的链状验证器。验证器去检查多个字段并在最后返回一个提示信息的数组,已经消毒后的数据;

之前在angular项目中这样写过

重复的if return, 以及大量的错误提示信息。。。。。

validator.loginForm = ({credential,password,email}) => {      if( !credential ) return err("手机号或者Email地址,你忘了吧");      if( !password ) return err("你是不是忘了填写密码了");      if( /emailRegx/.test(email)) return err("这个不是Email地址。。。")      ....      .... blah blah blah        var san = {credential,password};      return { san }  }    function err( msg ){      return { verr:msg }  }

使用 Validate-Chain

import VC from "validate-chain";    var objectData = {age:22,name:"eisneim",gender:"guy",email:"ss.kjk"}  validator.loginForm() => {        var vc = new VC( objectData )      vc.check("email").email()      vc.check("desc").alias("描述").required()      vc.check("opt").optional().max(2,"must not bigger than 2");      vc.check("name").required("名字为必填项");      vc.check("age").required().min(23).numeric().in([22,33,44])//可以一直链下去      vc.check("gender").alias("性别").regx(/male|female/).in(["男","女"])          console.log( vc.errors )      //["描述: 为必填字段", "age: 最小值为23", "性别: 不合格/male|female/的格式", "ss.kjk不是常规的email"]      console.log( vc.sanitized )      // {name: "eisneim"}  }

浏览器中使用

bower install --save validate-chain
<script src="路径/validate-chain-browser.js"></script>
// VC 为全局变量  var vc = new VC( objectData )  vc.check("name").required("名字为必填项");  //console.log( vc.errors )

安装

npm install --save validate-chain    // es5  var VC = require("validate-chain")    // es6  import VC form "validate-chain"

开发

// 测试  gulp test    // build  gulp build

 

API

  • check(key) 以它作为开始
  • errors 检查完后,读取这个属性即可获取所有的错误提示
  • sanitized 检查完后读取这个属性即可获得消毒后的属性
  • alias(name) 如果设置了别名,错误信息将以这个别名开始
  • required([tip]) 必填,大部分情况下需要在链中指明,
  • optional() 可选,大部分情况下需要在链中指明,
  • between(min,max,[tip]) 如果value是字符串则比较长度,数字则比较大小
  • max(number,[tip]) 如果value是字符串则比较长度,数字则比较大小
  • min(number,[tip]) 如果value是字符串则比较长度,数字则比较大小
  • regx( /regx/,[tip] ) 传入正则表达式对象,或者字符串的正则:\w.?end$不加首尾的/
  • date(dateString,[tip]) 是否为时间格式
  • before(dateString,[tip]) 时间在dateString之前
  • after(dateString,[tip]) 时间在dateString之后
  • in(Array,[tip]) 在一个数组值之一
  • email([tip],[options]) options: allow_display_name:false 是否匹配 “姓名 ”; allow_utf8_local_part:true 是否限定只能使用英文字母和数字;
  • JSON([tip]) 是否是格式没有错误的JSON
  • URL([tip],[options]) 检查是否是正常的URL,options: protocols: ['http','https','ftp']指定可以用的协议, require_protocol:false 是否可以不用指定协议
  • phone([tip]) 检查手机号
  • numeric([tip]) 检查是否为数字
  • float([tip]) 是否为浮点数
  • alpha([tip]) 是否为纯字母
  • alphanumeric([tip]) 是否为字母+数字
  • ascii([tip]) 是否是ascii 码
  • objectId([tip]) 是否为Mongodb ObjectID
  • base64([tip]) 是否为base64格式字符串编码
  • creditCard([tip]) 是否为信用卡
  • currency(options,[tip]) 是否为货币,默认值:{symbol: '¥', require_symbol: false, allow_space_after_symbol: false, symbol_after_digits: false, allow_negatives: true, parens_for_negatives: false, negative_sign_before_digits: false, negative_sign_after_digits: false, allow_negative_sign_placeholder: false, thousands_separator: ',', decimal_separator: '.', allow_space_after_digits: false }. -

sanitizers 消毒器

// data = { name:"  小明 "}  vc.check("name").required("名字为必填项").trim();    console.log( vc.sanitized ) // {name:"小明"}

  • trim() 去掉首尾空格
  • escape() 将<, >, &, ', " /替换为HTML编码
  • whitelist(chars) 白名单 eg. whitelist("a-zA-Z") 将会变成:replace(/[^a-zA-Z]/g,"")
  • blacklist(chars) 黑名单 eg. whitelist("被和谐|不和谐|查水表") 将会变成:replace(/[被和谐|不和谐|查水表]/g,"")
  • toBoolean([strict])
  • toDate() 转换为日期对象
  • toFloat() 浮点数
  • toInt([radix]) 整数,radix为进制
  • toString() 转换为字符串

项目主页:http://www.open-open.com/lib/view/home/1442992172732