轻量级的JavaScript表单验证，字符串验证validator.js

bigdevil_s 发布于2019-08-19 17:49 / 477人阅读

摘要：官网实例应用轻量级的表单验证，字符串验证。没有依赖，支持，。安装使用模块在应用中引用文件在文件中调用字符串验证表单验证判断是否错误客户端使用在应用中引用文件在中使用方法。一个字符串验证器和转换类型的库是一个轻量级的表单验证库灵感来源。

Github: validator.js

validator.js官网=>实例应用

轻量级的JavaScript表单验证，字符串验证。没有依赖，支持UMD，~3kb。

安装使用 模块

在应用中引用 validator.min.js 文件

$ npm install validator.tool --save

在 .js 文件中调用

// 字符串验证
var validator = require("validator.tool");
var v = new validator();
v.isEmail("wowohoo@qq.com");
v.isIp("192.168.23.3");
v.isFax("");

// 表单验证
var a = new validator("example_form",[
    {...}
],function(obj,evt){
    if(obj.errors){
        // 判断是否错误
    }
})

客户端使用

在应用中引用 validator.min.js 文件

在JS中使用方法。

应用在表单中的方法。


    
        邮箱验证

说明文档

new Validator(formName, option, callback)

formName

formName 是标签中

中的 id 或者 name 的值，如上面的example_form

option

name -> input 中 name 对应的值

display -> 验证错误要提示的文字 {{这个中间是name对应的值}}

rules -> 一个或多个规则(中间用|间隔)

is_email -> 验证合法邮箱

is_ip -> 验证合法 ip 地址

is_fax -> 验证传真

is_tel -> 验证座机

is_phone -> 验证手机

is_url -> 验证URL

required -> 是否为必填

max_length -> 最大字符长度

min_length -> 最小字符长度

{
    //name 字段
    name: "email",
    display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
    // 验证条件
    rules: "is_email|max_length(12)"
    // rules: "valid_email|required|max_length(12)|min_length(2)"
}

callback

var validator = new Validator("example_form",[
    {...},{...}
],function(obj,evt){
    //obj = {
    //  callback:(error, evt, handles)
    //  errors:Array[2]
    //  fields:Object
    //  form:form#example_form
    //  handles:Object
    //  isCallback:true
    //  isEmail:(field)
    //  isFax:(field)
    //  isIp:(field)
    //  isPhone:(field)
    //  isTel:(field)
    //  isUrl:(field)
    //  maxLength:(field, length)
    //  minLength:(field, length)
    //  required:(field)
    //} 
    if(obj.errors.length>0){
        // 判断是否错误
    }
})

例子 字符串验证

var v = new Validator();
v.isEmail("wowohoo@qq.com"); // -> 验证合法邮箱  |=> 返回布尔值
v.isIp("192.168.23.3"); // -> 验证合法 ip 地址  |=> 返回布尔值
v.isFax(""); // -> 验证传真  |=> 返回布尔值
v.isPhone("13622667263"); // -> 验证手机  |=> 返回布尔值
v.isTel("021－324234-234"); // -> 验证座机  |=> 返回布尔值
v.isUrl("http://JSLite.io"); // -> 验证URL  |=> 返回布尔值
v.maxLength("JSLite",12); // -> 最大长度  |=> 返回布尔值
v.minLength("JSLite",3); // -> 最小长度  |=> 返回布尔值
v.required("23"); // -> 是否为必填(是否为空)  |=> 返回布尔值

表单中验证

点击按submit按钮验证

var validator = new Validator("example_form",[
    {
        //name 字段
        name: "email",
        display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
        // 验证条件
        rules: "is_email|max_length(12)"
        // rules: "valid_email|required|max_length(12)|min_length(2)"
    },{
        //name 字段
        name: "sex",
        display:"请你选择性别{{sex}}",
        // 验证条件
        rules: "required"
    }
],function(obj,evt){
    if(obj.errors){
        // 判断是否错误
    }
})

没有submit验证

var validator = new Validator("example_form",[
    {
        //name 字段
        name: "email",
        display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
        // 验证条件
        rules: "is_email|max_length(12)"
        // rules: "valid_email|required|max_length(12)|min_length(2)"
    },{
        //name 字段
        name: "sex",
        display:"请你选择性别{{sex}}",
        // 验证条件
        rules: "required"
    }
],function(obj,evt){
    if(obj.errors){
        // 判断是否错误
    }
})
validator.validate()

参考

借鉴这些优秀的库，撸出此玩意儿。

chriso/validator.js一个字符串验证器和转换类型的库

rickharrison/validate.js validate.js是一个轻量级的JavaScript表单验证库灵感来源CodeIgniter。

关注公众号

GPU云服务器云服务器 javascript验证表单 javascript表单验证提示，html5的表单验证验证表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78870.html

前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

huayeluoliuhen 2019-08-01 15:13 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

AlphaWallet 2019-08-02 15:56 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

lushan 2019-08-30 13:09 评论0 收藏0