紹

介紹

今天福哥來實現(xiàn)jQuery控件form對于表單驗證的功能，說起表單驗證大家可以想到的就是通過JQ獲取表單項的值，然后判斷表單項的值是否滿足業(yè)務(wù)規(guī)則，如果不滿足規(guī)則就要告知用戶重新填寫或重新選擇表單項，其實這一系列的操作是有很多規(guī)則可循的。

首先通過JQ獲取表單項的值是第一步，也是可以集中處理的。

其次根據(jù)業(yè)務(wù)規(guī)則判斷表單項的值是否合法，這一步也是可以總結(jié)到一起處理的。

最后根據(jù)判斷結(jié)果向用戶給出告警提示，這一步更加可以統(tǒng)一處理的。

那么今天福哥就根據(jù)分析出來的這個三步操作來實現(xiàn)相應(yīng)的業(yè)務(wù)邏輯，之前已經(jīng)完成了一部分JQ控件form的功能了，所以福哥只給出增加的部分的代碼。

JQ控件form

Javascript

_doValidation : function(form, validations){
    if(validations instanceof Array){
        for(vi=0;vi<validations.length;vi++){
            if(this._testValidation(form, validations[vi].type, validations[vi].value, validations[vi].name, validations[vi].msg)){
                this._postValidationError(form, validations[vi].name, validations[vi].msg);

                return false;
            }
        }
    }

    return true;
},

_postValidationError : function(form, name, msg){
    if(opts.onValidationError){
        opts.onValidationError(form, name, msg);
    }
    else{
        alert(msg);
        $(form).find('[name="'+name+'"]').focus();
    }
},

_testValidation : function(form, type, value, name, msg){
    elemObj = $(form).find('[name="'+name+'"]');
    elemVal = elemObj.val();
    switch (type) {
        case 'empty':
            if(elemVal == ""){

                return true;
            }
            break;
        case 'min':
            if(elemVal.length < value){

                return true;
            }
            break;
        case 'max':
            if(elemVal.length > value){

                return true;
            }
            break;
        case 'len':
            if(elemVal.length != value){

                return true;
            }
            break;
        case 're':
            if(!(new RegExp(value)).test(elemVal)){

                return true;
            }
            break;
    }

    return false;
},

用戶登錄頁面

Javascript

$(function () {
    $('form').form({
        url: "user/login",
        method: "post",
        validations: [
            {type:"empty", name:"user", msg:"請?zhí)顚懹脩裘?#34;},
            {type:"min", value:2, name:"user", msg:"用戶名最少2個字"},
            {type:"max", value:20, name:"user", msg:"用戶名最多20個字"},
            {type:"re", value:/^[^\`\~\!\@\#\$\%\^\&\*\(\)\[\]\{\}\-\_\+\|\\\:\;\"\'\<\>\,\.\?\/]/, name:"user", msg:"用戶名不能以符號開頭"},
            {type:"empty", name:"pass", msg:"請?zhí)顚懨艽a"},
            {type:"min", value:6, name:"pass", msg:"用戶名最少6個字"}
        ],
        onSuccess: function (d) {
            console.log('success', d);
        },
        onError: function (d) {
            console.log('error', d);
        },
        onValidationError: function (form, name, msg) {
            console.log(name, msg);
        }
    });
});

可以看到每一次點擊登錄按鈕在右邊都會有錯誤提示，根據(jù)錯誤提示用戶就可以完成表單提交操作了。

但是，大家可能已經(jīng)發(fā)現(xiàn)了一個問題，就是這個錯誤提示是以控制臺形式打印的，真正的用戶不會在這里去看錯誤提示的，怎么辦？

下一課福哥會專門講一講如何提示用戶操作錯誤信息，這會是一個很有意思的知識。

總結(jié)

今天福哥完成了JQ控件form的表單驗證的功能，支持的驗證規(guī)則有empty（空檢查）、min（最短字符檢查）、max（最長字符檢查）、len（指定長度字符檢查）、re（正則表達式匹配檢查）幾種基本驗證方式，這些驗證規(guī)則方式已經(jīng)可以滿足絕大多數(shù)的表單驗證的需要了。

下一課福哥會講一講關(guān)于表單操作錯誤提示方式的內(nèi)容，不同的提示方式會有這不同的用戶體驗，用戶體驗是web開發(fā)里的重中之重，大家一點要多花心思在用戶體驗上。

https://m.tongfu.net/home/35/blog/512915.html

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 
實例：window.frames["ifm"].document.getElementById("btnOk").click(); 
 
格式： 
var obj=document.getElementById("iframe的name").contentWindow; 
var ifmObj=obj.document.getElementById("iframe中控件的ID"); 
ifmObj.click(); 
實例： 
var obj=document.getElementById("ifm").contentWindow; 
var ifmObj=obj.document.getElementById("btnOk"); 
ifmObj.click(); 

格式：window.parent.document.getElementById("父窗口的元素ID").click(); 
實例：window.parent.document.getElementById("btnOk").click(); 

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 
實例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1 
 
格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2 
實例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2 

中后臺項目中，在瀏覽器邊角彈出通知或警告，然后定時消失，是經(jīng)常會遇到的功能需求。然而，許多 jQuery 的組件庫中，比如 Bootstrap 等，都缺乏這類組件的實現(xiàn)。Toastr，就實現(xiàn)了一個美觀易用的通知組件，十分方便。

簡介

Toastr，是 CodeSeven 在 Github 上開源的 jQuery 通知組件，代碼位于 https://github.com/CodeSeven/toastr，目前版本為 2.1.4。Toastr 設(shè)計美觀，默認的配置就能夠渲染具有流暢動畫的通知彈出效果，同時，也具備了豐富的個性化選項，可以根據(jù)自身需求進行配置。

安裝

Toastr 需要 jQuery，可以使用 NPM 安裝：

npm install --save toastr

也可以使用 YARN 安裝：

yarn add toastr

也可以在瀏覽器中直接使用CDN引入：

https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js
https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css

示例

Toastr 提供了四種不同的通知樣式：

• success：成功，完成
• info：一般通知、信息
• warning：警告、警示
• error：錯誤、危險、警報

分別具有不同的顏色和圖表樣式，調(diào)用對應(yīng)的接口就可以顯示通知。接口的第一個參數(shù)是通知的內(nèi)容，第二個參數(shù)則是通知的標題。我們來看一個基本的例子：

toastr.success('你好，世界！', '你好')
toastr.info('你好，世界！', '你好')
toastr.warning('你好，世界！', '你好')
toastr.error('你好，世界！', '你好')

可以看到，在頁面的右上角彈出了四個不同樣式的通知提示，且在顯示后逐漸淡出消失。也可以調(diào)用 clear 清除所有的通知：

toastr.clear()

我們可以進行個性化的配置，如對通知中的 HTML 字符進行轉(zhuǎn)碼：

toastr.options.escapeHtml=true;

在通知顯示關(guān)閉按鈕：

toastr.options.closeButton=true;

也可以自定義關(guān)閉按鈕的 HTML：

toastr.options.closeHtml='<button><i class="icon-off"></i></button>';

也可以對關(guān)閉按鈕點擊時的動畫進行配置：

toastr.options.closeMethod='fadeOut';
toastr.options.closeDuration=300;
toastr.options.closeEasing='swing';

這里設(shè)置關(guān)閉時動畫時 fadeOut 逐漸消失，動畫持續(xù) 300 毫秒，并使用 swing 方式的動畫過渡。

Toastr默認在頁面的右上角彈出通知，也可以配置在包括左上、左下、中上等共八個不同位置彈出：

toastr.options.positionClass=toast-top-right;

默認的配置是最新的通知在最下面，也可以設(shè)置相反的順序：

toastr.options.newestOnTop=false;

Toastr 提供了多個事件回調(diào)：

toastr.options.onShown=function() { console.log('hello'); }
toastr.options.onHidden=function() { console.log('goodbye'); }
toastr.options.onclick=function() { console.log('clicked'); }
toastr.options.onCloseClick=function() { console.log('close button clicked'); }

還可以設(shè)置通知的持續(xù)顯示時長：

toastr.options.timeOut=30;  // 顯示時間
toastr.options.extendedTimeOut=60;  // 用戶點擊后持續(xù)時間

也可以利用這個特性實現(xiàn)不會自動消失的通知提示，設(shè)置時長為0即可：

toastr.options.timeOut=0;
toastr.options.extendedTimeOut=0;

還能夠為通知提供一個進度條，提示通知剩余的展示時間：

toastr.options.progressBar=true;

Toastr 還提供了豐富的動畫配置功能，提供不同的展示和消失動畫：

toastr.options.showEasing='swing';
toastr.options.hideEasing='linear';
toastr.options.closeEasing='linear';

toastr.options.showEasing='easeOutBounce';
toastr.options.hideEasing='easeInBack';
toastr.options.closeEasing='easeInBack';

toastr.options.showMethod='slideDown';
toastr.options.hideMethod='slideUp';
toastr.options.closeMethod='slideUp';

Toastr 提供了一個在線的 demo 工具，通過點擊不同的配置選項就可以進行在線的測試，查看效果，十分方便：

總結(jié)

Toastr 作為一個 jQuery 通知組件庫，其使用簡單，調(diào)用簡單的接口就可以顯示美觀的通知，且具備強大的配置和自定義功能，能適應(yīng)不同的使用場景。Toastr 作為一個 Javascript 庫，短小精悍，代碼量雖不大，卻能夠?qū)崿F(xiàn)豐富的功能，且兼容性強，值得在實踐中嘗試。