jquery表单验证插件
- 使用灵活，单个表单域可配置，不依赖form标签
- 每个表单域可以根据验证返回值不同而使用不同的提示语
- 错误样式可自定义
- 可失去焦点验证，或关闭该功能
- 支持后端验证
- 支持select验证
- 依赖jQuery，请先引入jQuery
- 直接通过script标签引入
-
引入插件后，会引入validate和validated两个对象级别的方法，使用方法:
$('#fieldId').validate(options); $('#formId').validated(onSuccess, onFailure);
-
validate的参数options是一个对象，对象的属性如下：
options
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
expression |
验证表达式，验证通过返回0，未通过返回大于0的数值 | string | function(options [,callback]){} | function() {return 0} |
message1 |
错误提示语，message后面的数字可以是任意值，如果expression返回1将使用message1的提示语，如果返回2使用message2的提示语，以此类推 |
string | - |
live |
是否开启失去焦点验证，select组件则是触发change时验证 | boolean | true |
mode |
验证模式，1：正常input表单验证，2：expression函数会有一个回调函数的参数，用于异步校验，3：用于select验证 |
1 | 2 | 3 |
1 |
error_input_class |
验证未通过时，被验证元素添加的样式 | string | 'error' |
error_message_class |
验证未通过时，提示语的样式 | string | 'valid-error' |
showError |
错误提示的显示方式，函数中的this指向当前验证元素 | function(options, fieldResult){} | 验证未通过时，元素添加error_input_class样式，并且在其后面添加一个error_message_class样式的div显示提示语 |
cleanError |
清除错误提示，重写showError时，一定要重写该方法 |
function(options) {} | 清除验证元素的error_input_class，并清除后面的提示语 |
expression当其为函数时会有下列参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
options |
同options |
object | - |
callback |
回调函数，mode为2时，必须执行该回调函数，验证通过时调用callback(0)，未通过时callback的参数是一个大于0的值 |
function(number) {} | - |
showError默认函数如下
function showError(options, fieldResult) {
var errorEl = ['<div class="', options.error_message_class, '">', options['message' + fieldResult], '</div>'].join('');
$(this).addClass(options.error_input_class).after(errorEl);
}cleanError默认函数如下
function cleanError(options) {
$(this).removeClass(options.error_input_class).next('.' + options.error_message_class).remove();
}- validated的两个参数都是函数，整个表单验证通过时回调第一个函数onSuccess，未通过时调用第二个参数onFailure
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent