成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

輕量級的JavaScript表單驗證，字符串驗證validator.js

bigdevil_s / 506人閱讀

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

Github: validator.js

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

輕量級的JavaScript表單驗證，字符串驗證。沒有依賴，支持UMD，~3kb。

安裝使用 模塊

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

$ npm install validator.tool --save

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

// 字符串驗證
var validator = require("validator.tool");
var v = new validator();
v.isEmail("[email protected]");
v.isIp("192.168.23.3");
v.isFax("");

// 表單驗證
var a = new validator("example_form",[
    {...}
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯誤
    }
})
客戶端使用

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

在JS中使用方法。

應(yīng)用在表單中的方法。
說明文檔 
new Validator(formName, option, callback)
formName

formName 是標簽中

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

option

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

display -> 驗證錯誤要提示的文字 {{這個中間是name對應(yīng)的值}}

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

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("[email protected]"); // -> 驗證合法郵箱  |=> 返回布爾值
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()
參考

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

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

rickharrison/validate.js validate.js是一個輕量級的JavaScript表單驗證庫靈感來源CodeIgniter。

關(guān)注公眾號

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78870.html

相關(guān)文章

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結(jié)束標簽之后結(jié)束標簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...

    LiangJ 評論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結(jié)束標簽之后結(jié)束標簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...

    codercao 評論0 收藏0

  • 前端技術(shù) 博客文章、書籍 積累

    摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結(jié)束標簽之后結(jié)束標簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...

    huayeluoliuhen 評論0 收藏0

  • 推薦輕量高效無依賴的開源JS插件和庫

    摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。 在這里維持一個持續(xù)更新的地方 圖片 baguetteBox.js - 是一個簡單易用的響應(yīng)式圖像燈箱效果腳本。demo Lightgallery.js -...

    AlphaWallet 評論0 收藏0

  • 推薦輕量高效無依賴的開源JS插件和庫

    摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。 在這里維持一個持續(xù)更新的地方 圖片 baguetteBox.js - 是一個簡單易用的響應(yīng)式圖像燈箱效果腳本。demo Lightgallery.js -...

    lushan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<