1 Star 0 Fork 75

tianxia007 / validator.js

forked from MinJieLiu / validate-framework 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

#validator.js

Build Status npm version

validator.js 是一个轻量级 JavaScript 表单、字符串验证库

Demo: http://minjieliu.github.io/validator.js/example

特性

  1. 轻量级
  2. 无依赖
  3. 表单验证
  4. 字符串验证
  5. 易扩展
  6. 支持 chrome 、firfox 、IE6 +
  7. 支持相同 name 的表单验证
  8. 支持动态验证

快速上手

通过 bower 安装

bower install validate-framework

通过 npm 安装

npm install validate-framework

表单验证:

<form id="validate_form">
    <div class="form-group">
        <label for="email">邮箱:</label>
        <input class="form-control" id="email" name="email" type="email" placeholder="请输入邮箱" />
    </div>
    <div class="form-group">
        <label for="phone">手机:</label>
        <input class="form-control" id="phone" name="phone" type="text" placeholder="请输入手机号" />
    </div>
    <input class="btn btn-primary" id="submit" type="submit" value="提交" />
</form>
var validator = new Validator('validate_form', {
    fields: {
        email: {
            rules: 'required | is_email | max_length(32)',
            messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
        },
        phone: {
            rules: 'is_phone',
            messages: "手机号: {{value}} 不合法"
        }
    },
    // 参数:errorEl 错误信息节点,fieldEl 出现错误的表单节点
    errorPlacement: function(errorEl, fieldEl) {
        // 错误位置
    },
    callback: function(event, errors) {
        // 阻止表单提交
        validator.preventSubmit();
        // 回调函数
    }
});

字符串验证:

// 返回布尔值
var v = new Validator();
v.isEmail('example@qq.com');
v.isIp('192.168.1.1');
v.isPhone('170111222231');
v.lessThan('11', '22');
v.greaterThanDate('2010-01-02', '2010-01-01');

表单验证说明文档

new Validator(formName, options)

参数(可选,无参为字符串验证)

formName (必需) 是标签中 <form> 中的 id 或者 name 的值

options (必需) 是 Validator 的第二个参数

  • fields 表单验证域 rulesmessages 集合
  • errorPlacement (可选) 错误信息位置
  • callback (可选) 验证成功或失败后回调函数

参数详细

fields

fields: {
    email: {
        rules: 'required | is_email | max_length(32)',
        messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
    },
    phone: {
        rules: 'is_phone',
        messages: "手机号: {{value}} 不合法"
    }
}

注: emailphone 为表单 name 属性
rules : 一个或多个规则(中间用 | 分隔)
messages : 相对应的错误提示(中间用 | 分隔) {{value}} 为表单中的 value 值, {{param}}max_length(32) 的参数
(不填写则没有提示)

errorPlacement

errorPlacement: function(errorEl, fieldEl) {
    // 非 label 、radio 元素
    if (fieldEl.parentNode !== undefined) {
        fieldEl.parentNode.appendChild(errorEl);
    }
},

注: errorEl 为错误信息节点,fieldEl 为出现错误的表单节点 验证失败后 validator.js 会在类似文本框表单中添加 valid-error , checkbox、radio 中添加 valid-label-error 错误信息中添加 valid-error-message class 类

callback

callback: function(event, errors) {
    // 自定义逻辑
    if (errors) {
        // 验证失败逻辑
    }
}

注: event 当前事件
errors 验证失败的表单域对象。表单验证成功, errors 的值为 null

方法

例如:

validator.validate();

.validate() 手动验证

注: validator.js 默认使用 submit 按钮提交进行拦截验证,可手动调用 .validate() 调用验证 form 所有定义过的元素

.validateByName(name) 手动验证单个表单域

注: validator.js 默认使用表单改变事件拦截验证,当使用 js 方法改变表单的值时,可手动调用 .validateByName(name) 进行验证单个域, name 参数为 表单域的 name 属性

.preventSubmit() 阻止表单提交

.addMethod(name, method) 自定义验证方法

注: 当遇到 validator.js 提供的默认方法无法实现验证的时候,添加.addMethod(name, method)方法进行扩展
name 为校验名称,格式: is_date
method 为自定义方法

如:

// checkbox 至少选择两项 方法
// 扩展内部验证方法 field: 验证域, param: 参数 如 select_limit(2)
validator.addMethod('select_limit', function(field, param) {
    // checkbox 至少选择两项
    var checkedNum = 0;
    for (var i = 0, elLength = field.el.length; i < elLength; i++) {
        if (field.el[i].checked) {
            checkedNum += 1;
        }
    }
    return checkedNum >= param;
});

.addFields(fields) 动态添加 fields 方法

注: 满足更多动态验证表单的需求。可通过 .addFields(fields) 来动态新增一个或多个表单验证域

validator.addFields({
    userName: {
        rules: 'required | is_real_name',
        messages: "不能为空 | 请输入真实姓名"
    }
});

.removeFields(fieldNames) 动态移除 fields 方法

注: 满足更多动态验证表单的需求。可通过 .removeFields(fieldNames) 来动态移除一个表单验证域,移除之后验证器则不验证移除的对象
fieldNames 可接受字符串或者一个数组

// 移除单个
validator.removeFields('userName');
// 移除多个
validator.removeFields(['userName', 'email']);

字符串验证说明文档

如:

var v = new Validator();
v.isEmail('example@qq.com');
v.isPhone('170111222231');
  • required(param) 验证必填
  • isAbc(param) 验证字母数字下划线
  • isDate(param) 验证日期
  • isDecimal(param) 验证浮点数
  • isEmail(param) 验证邮箱
  • isInteger(param) 验证整数
  • isIp(param) 验证 ip 地址
  • isNumeric(param) 验证自然数
  • isPhone(param) 验证手机
  • isTel(param) 验证座机
  • isUrl(param) 验证URL
  • maxLength(param, length) 最大长度
  • minLength(param, length) 最小长度
  • greaterThan(param1, param2) 多于某个数
  • lessThan(param1, param2) 少于某个数
  • greaterThanDate(date1, date2) 大于某个日期
  • lessThanDate(date1, date2) 小于某个日期

验证方法不够? .addMethod(name, method) 添加自定义验证方法(与表单验证自定义方法类似)

备注

validator.js 只包含验证实现,不包括 UI,因此 UI 部分可以自由发挥
因注重结构和逻辑分离,validator.js 暂不考虑将验证表达式加入 html 结构中,以保持良好的可维护性
validator.js 不依赖 jQuery 及其他类库,可结合 jQuery 及其他类库使用

规范

validator.js 采用 eslint 来保持代码的正确性和可读性,详情见 .eslintrc 文件

更新日志

v1.4.1

  1. [修正] 执行 .removeFields 方法后,应删除对应的错误域
  2. 变更 email 正则
  3. 注释修正

v1.4.0

  1. [新增] .addFields.removeFields 扩展方法
  2. 实现动态验证表单域
  3. 微调内部函数结构

v1.3.0

  1. [新增] 相同 name 属性表单验证
  2. 兼容未在 dom 中的元素,可预先定义
  3. 微调内部函数名称

LICENSE

MIT

参考

https://github.com/jaywcjlove/validator.js

The MIT License (MIT) Copyright (c) 2016 MinJie Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一个简单、轻量、无依赖的 JavaScript 表单和字符串验证组件 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/dwxdfhx/validator.js.git
git@gitee.com:dwxdfhx/validator.js.git
dwxdfhx
validator.js
validator.js
master

搜索帮助