# zhh.validate.js **Repository Path**: qdbp/zhh.validate.js ## Basic Information - **Project Name**: zhh.validate.js - **Description**: ZHH表单校验插件，是一个WEB前端校验插件，提供表单字段的配置式校验功能。 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 41 - **Forks**: 10 - **Created**: 2018-07-29 - **Last Updated**: 2023-02-24 ## Categories & Tags **Categories**: javascript-toolkits **Tags**: None ## README # zhh.validate.js ZHH表单校验插件 ---
这是一个WEB前端校验插件，提供表单字段的配置式校验功能。 使用方便，所有校验参数都提供data-API，常用的校验功能不需要写一行JavaScript代码，即可完全通过配置来实现。 扩展简单，支持开发人员自定义复杂的校验，支持全局预置和页面定制。对基础校验功能也都提供了修改的方法。 整个表单的校验和每个字段行的校验都支持自动触发和手工触发。
**说明文档** https://qdbp.gitee.io/project/web/zhh.validate.js/doc/index.html **完整示例** https://qdbp.gitee.io/project/web/zhh.validate.js/doc/register.html
## 创建本项目的原因 --- 目前校验框架很多，都有各自的优缺点，但实际使用时各种不爽。
因此创建本项目，目标：校验规则支持data-API，配置简洁直观，支持分组校验合并提示，自定义规则扩展简单。 与其他校验框架的对比： https://jqueryvalidation.org/ data-fv-less-than___max="2000" 规则配置复杂 data-fv-different___compare="xxx" 仅支持与固定值对比，不支持与另一控件值对比，没有应用意义 https://formvalidation.io/ 只有required, type=number/email/url 等几个HTML5的规则支持配置，其他的规则全都需要写一大堆JavaScript http://validform.rjboy.cn/ datatype="n0-2000" errormsg="请输入2000以下的数字" 规则不直观，预定义规则较少，规则配置没有以data-开头不符合HTML5标准 https://gitee.com/qdbp/zhh.validate.js (本项目) data-vld="[ {required:true}, {number:[0,2000]}, {compare:'input[name=fieldName]'} ]" 支持data-API，配置简洁直观，预定义规则丰富
## 基本概念 --- > #### 校验单元 以`
`为基础，其中的每一个`class="vld-line"`或`class="form-group"`为一个校验单元。 一般就是表单的一个字段。如用户名/密码/注册邮箱等，都可以作为一个校验单元。 > #### 校验规则 校验规则，以`data-vld="..."`的形式配置在输入框上。 ```html ``` 如果`label`可以自动获取，则简写为： ```html ``` 如果只有一个规则，还可以简写为： ```html // 必填 // 手机号码 ``` 默认支持的类型有必填校验、长度校验、正则表达式校验、对比校验、AJAX校验、密码强度校验等。 > #### 标签文本 错误提示中的占位符`{label}`表示校验单元里面的标签文本。 标签文本可以自动查找校验单元中的`class="vld-label"`或`class="control-label"`。会清除前面的星号和后面的冒号。 以下示例，{label}=登录账号： ```html ``` 也可以通过配置指定，`data-vld="{ label:'登录账号', rules:[...] }"`。配置指定优先级高于自动查找。 ```html ```
## 校验示例 --- ```html
4-10位数字或字母

必填，4-10位，不支持中文字符

不允许包含!@#$%^*,./\等特殊字符，AJAX校验

密码必须包含字母/数字/特殊字符的任意两种

必填，6-16位，支持空格，不支持中文字符，不能与用户名相同

```
## 必填校验 --- ```javascript { required:true } ``` 可以自定义提示信息，如： ```javascript { required:true, text:'请同意服务协议' } { required:true, text:'请选择{label}' } ``` 如果目标输入框内容为空，则校验不通过。 单选框/复选框，没有选中则校验不通过。 单选框/复选框的校验规则应配置在第一个input上。
## 字符长度校验 --- 如果目标输入框的字符长度不符合要求，则校验不通过。 min指定字符长度的最小值，max指定最大值，这两个参数至少要指定一个。 如果不是必填项，即使指定了最小长度而输入框为空，也认为校验通过，可以提交。 ```javascript { length:{min:4,max:12} } // 字符长度4-12位 { length:[4,12] } // 字符长度4-12位 { length:{min:4} } // 字符长度不得小于4位 { length:[4] } // 字符长度不得小于4位 { length:{max:12} } // 字符长度不得大于12位 ```
## 数字校验 --- 如果目标输入框的内容不是数字，或者数字超过了指定范围，则校验不通过。 min指定数字的最小值，max指定最大值，这两个参数可以都不指定。 sign指定是否允许前面的+-号，默认为不允许。 decimal指定小数位数，默认为0，即只允许输入整数。 ```javascript { number:true } // 必须是数字 { number:{min:1900,max:2999} } // 数字必须在1900-2999之间 { number:[1900,2999] } // 数字必须在1900-2999之间 { number:{min:1900} } // 数字不得小于1900 { number:[1900] } // 数字不得小于1900 { number:{max:2999} } // 数字不得大于2999 { number:true, sign:true } // 允许+-号 { number:true, decimal:4 } // 最多4位小数 { number:true, sign:true, decimal:4 } // 允许+-号, 最多4位小数 ```
## 正则表达式校验 --- > #### 预定义正则表达式 ```javascript { regexp:'xxx' } ``` xxx指向预定义的正则表达式，url、email、mobile(手机号码)、ascii(只支持英文字符)、illegal-char(不支持非法字符)。 预定义的正则表达式可以自己扩充。 ```javascript (function(zv) { // 定义只允许输入数字和字母的表达式 zv.regexp["number-ascii"] = /^[0-9a-zA-Z]*$/; zv.locals["zh-CN"]["regexp-number-ascii"] = "{label}只允许输入数字和字母"; // 定义不允许特殊字符的表达式 // reverse=true表示反转判断结果, 如果匹配就提示错误 zv.regexp["illegal-char"] = { value:/[!@#$%^\*,.\-<>]/, reverse:true }; zv.locals["zh-CN"]["regexp-illegal-char"] = "{label}不支持!@#$%^*,.-<>等特殊字符"; })(jQuery.fn.zhhvalidate.defaults); ``` `reverse:true`表示反转判断结果，如果匹配就提示错误。 在`illegal-char`这个例子里，意味着只要出现这些特殊字符就会提示错误。 > #### 指定正则表达式 ```javascript { regexp:/^[0-9a-zA-Z]*$/, text:'{label}只允许输入数字和字母' } ``` **指定正则表达式时text错误提示不能省略！** 正则表达式校验，表示该字段必须匹配正则，匹配为通过，不匹配则提示错误。 `data-ignore-case="true"`表示忽略大小写，默认为区分大小写。 `data-reverse="true"`表示反转判断结果，如果匹配就提示错误。
## 相等校验 --- ```javascript { compare:'selector' } { compare:'selector', reverse:true } ``` 相等校验，表示该字段与另一字段必须相等，相等为通过，不相等则提示错误。 selector，通过jQuery选择符来从
中查找元素作为对比目标。 例如：确认密码必须与登录密码相同。`{ compare:'input[name=pwd]' }`指向登录密码输入框。 `reverse:true`表示反转判断结果，如果相等就提示错误。 例如：密码不能与用户名相同： `{ compare:'input[name=account]', reverse:true }`
## 服务端校验 --- ```script { ajax:'url.do' } { ajax:'url.do', fields:fields } { ajax:'url.do', fields:fields, options:{ type:GET|POST, dataType:json|html|text, ...} } ``` 如果服务端返回字符串，`true`或`1`表示校验通过；`false`或`0`表示校验不通过；其他字符串表示校验不通过，这个字符串就是错误提示。 如果服务端返回JSON格式的数据，就需要自已定义AJAX解析函数了： ```script (function(zv) { // 自定义AJAX解析函数 var parse = zv.ajax.parse; zv.ajax.parse = function(e, json) { if ($.isPlainObject(json)) { return { passed:json.code=="000000", text:json.message }; } else { // 调用原解析函数 return parse.call(this, e, json); } }; })(jQuery.fn.zhhvalidate.defaults); ```
## data-vld选项 --- ```html
``` `init:true|false`是否需要初始化事件绑定，默认为true。如果不初始化, 则只有在点提交按钮时才会触发表单校验；如果初始化，则在校验目标输入框内容改变时、失去焦点时、选择框点击时均会触发单元校验，而且在点击中的`class="vld-submit"`按钮时会校验整个表单，如果所有校验单元全部通过，则自动提交表单。 `oninput:true|false`是否需要绑定``和`