頁面校驗寫法總結

1.在頁面校驗較多的情況，或者網絡波動較大時。會出現異步校驗未返回時，已經提交表單

解決：

var lock = false;

$('input[name="username"]').blur(function(){
    lock = true; //對異步校驗加鎖
    $.post('/xx', data, function(d) {
        //success
        lock = false;
        d.status=...;
    })
})

$('button').click(function(){

    var flag = false;
    $('input').each(function() {
        while(lock) {
            //在lock未解鎖時，先進行等待。 避免出現異步未起作用的情況
        }

        //其次在，進行提交前。應該將所有需要提交的字段，進行重新校驗
        //避免在出現jQuery事件不兼容於IE發生的問題，或者已經修改而未起作用的校驗
        $(this).trigger('blur');

        //判斷錯誤信息沒有出現後
        if(...) {
            flag = true;
        }
    })

    if(flag) {
        form.submit();
    }
});

在上述提交表單時，再次進行校驗使用了blur事件。 如果是IE的某個版本，這個會有缺陷。

解決方法：將校驗字段封裝入function方法，在提交時，校驗方法

function validateUsername() {
    var username = $('input[name="username"]').val();
    if('' == username || null == username) {
        //儘量使用通用方法
        showError(username, location);
    }
}

$('button').click(function(){
    //重複校驗一次
    validateUsername();
    ...

    //統計錯誤信息，對應操作
})

2.建立自己的工具庫

(function() {
    var myUtil = (function() {
        var reg = {
            'ConfigPhone' : /^(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7}$/,
            'ConfigUsername' : /^[-_0-9a-z]{4,20}$/i
        };

        return function(){
            this.configPhone = function(selector) {
                var phone = selector.val();
                var result = {};
                if('' == phone) {
                    result.status = 0;
                    result.message = '不能爲空';
                } //調用屬性裏面的reg.ConfigPhone校驗
                else if((phone.length>0&&phone.length!=11)||!reg.ConfigPhone.test(phone)) {
                    result.status = 1;
                    result.message = '不符合格式';
                } else {
                    result.status = 9;
                    result.message = '';
                }
            }
        }   
    })();
    //聲明爲全局變量
    window.util = new myUtil();
})();


//外層調用
$('input[name="username"]').blur(function(){
    var result = util.configPhone($(this));
    //靜態校驗，通過工具類和公用函數，減少操作量，可通用
    showError(location. result.message);
    if(result.status == 9) {
        //進行異步校驗等操作
    }
})