页面校验写法总结

来源：互联网发布：埃微智能手环知乎编辑：程序博客网时间：2024/06/06 23:10

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

0 0