页面校验写法总结

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) {
        //进行异步校验等操作
    }
})