輕量級(jí)的JavaScript表單驗(yàn)證，字符串驗(yàn)證validator.js

bigdevil_s 發(fā)布于2019-08-19 17:49 / 508人閱讀

摘要：官網(wǎng)實(shí)例應(yīng)用輕量級(jí)的表單驗(yàn)證，字符串驗(yàn)證。沒有依賴，支持，。安裝使用模塊在應(yīng)用中引用文件在文件中調(diào)用字符串驗(yàn)證表單驗(yàn)證判斷是否錯(cuò)誤客戶端使用在應(yīng)用中引用文件在中使用方法。一個(gè)字符串驗(yàn)證器和轉(zhuǎn)換類型的庫是一個(gè)輕量級(jí)的表單驗(yàn)證庫靈感來源。

Github: validator.js

validator.js官網(wǎng)=>實(shí)例應(yīng)用

輕量級(jí)的JavaScript表單驗(yàn)證，字符串驗(yàn)證。沒有依賴，支持UMD，~3kb。

安裝使用 模塊

在應(yīng)用中引用 validator.min.js 文件

$ npm install validator.tool --save

在 .js 文件中調(diào)用

// 字符串驗(yàn)證
var validator = require("validator.tool");
var v = new validator();
v.isEmail("wowohoo@qq.com");
v.isIp("192.168.23.3");
v.isFax("");

// 表單驗(yàn)證
var a = new validator("example_form",[
    {...}
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯(cuò)誤
    }
})

客戶端使用

在應(yīng)用中引用 validator.min.js 文件

在JS中使用方法。

應(yīng)用在表單中的方法。


    
        郵箱驗(yàn)證

說明文檔

new Validator(formName, option, callback)

formName

formName 是標(biāo)簽中

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

option

name -> input 中 name 對(duì)應(yīng)的值

display -> 驗(yàn)證錯(cuò)誤要提示的文字 {{這個(gè)中間是name對(duì)應(yīng)的值}}

rules -> 一個(gè)或多個(gè)規(guī)則(中間用|間隔)

is_email -> 驗(yàn)證合法郵箱

is_ip -> 驗(yàn)證合法 ip 地址

is_fax -> 驗(yàn)證傳真

is_tel -> 驗(yàn)證座機(jī)

is_phone -> 驗(yàn)證手機(jī)

is_url -> 驗(yàn)證URL

required -> 是否為必填

max_length -> 最大字符長度

min_length -> 最小字符長度

{
    //name 字段
    name: "email",
    display:"你輸入的不{{email}}是合法郵箱|不能為空|太長|太短",
    // 驗(yàn)證條件
    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){
        // 判斷是否錯(cuò)誤
    }
})

例子 字符串驗(yàn)證

var v = new Validator();
v.isEmail("wowohoo@qq.com"); // -> 驗(yàn)證合法郵箱  |=> 返回布爾值
v.isIp("192.168.23.3"); // -> 驗(yàn)證合法 ip 地址  |=> 返回布爾值
v.isFax(""); // -> 驗(yàn)證傳真  |=> 返回布爾值
v.isPhone("13622667263"); // -> 驗(yàn)證手機(jī)  |=> 返回布爾值
v.isTel("021－324234-234"); // -> 驗(yàn)證座機(jī)  |=> 返回布爾值
v.isUrl("http://JSLite.io"); // -> 驗(yàn)證URL  |=> 返回布爾值
v.maxLength("JSLite",12); // -> 最大長度  |=> 返回布爾值
v.minLength("JSLite",3); // -> 最小長度  |=> 返回布爾值
v.required("23"); // -> 是否為必填(是否為空)  |=> 返回布爾值

表單中驗(yàn)證

點(diǎn)擊按submit按鈕驗(yàn)證

var validator = new Validator("example_form",[
    {
        //name 字段
        name: "email",
        display:"你輸入的不{{email}}是合法郵箱|不能為空|太長|太短",
        // 驗(yàn)證條件
        rules: "is_email|max_length(12)"
        // rules: "valid_email|required|max_length(12)|min_length(2)"
    },{
        //name 字段
        name: "sex",
        display:"請(qǐng)你選擇性別{{sex}}",
        // 驗(yàn)證條件
        rules: "required"
    }
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯(cuò)誤
    }
})

沒有submit驗(yàn)證

var validator = new Validator("example_form",[
    {
        //name 字段
        name: "email",
        display:"你輸入的不{{email}}是合法郵箱|不能為空|太長|太短",
        // 驗(yàn)證條件
        rules: "is_email|max_length(12)"
        // rules: "valid_email|required|max_length(12)|min_length(2)"
    },{
        //name 字段
        name: "sex",
        display:"請(qǐng)你選擇性別{{sex}}",
        // 驗(yàn)證條件
        rules: "required"
    }
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯(cuò)誤
    }
})
validator.validate()

參考

借鑒這些優(yōu)秀的庫，擼出此玩意兒。

chriso/validator.js一個(gè)字符串驗(yàn)證器和轉(zhuǎn)換類型的庫

rickharrison/validate.js validate.js是一個(gè)輕量級(jí)的JavaScript表單驗(yàn)證庫靈感來源CodeIgniter。

關(guān)注公眾號(hào)