jquery.validate onkeyup等;errorPlacement;与datetimepicker结合使用

来源:互联网 发布:易经 知乎 编辑:程序博客网 时间:2024/04/28 01:51

onfocusin onfocusout onclick onkeyup

最近在用验证的时候想敲击键盘时验证,可是网上搜了很多都是onkeyup:true,没有反 应而且还报错Uncaught TypeError: e[d].call is not a functionprintf() ,在网上搜到一些正确的使用方式

        //onfocusin 事件在一个元素获得焦点时触发,支持冒泡        onfocusin: function(element) { $(element).valid(); },        //onfocusout 事件在元素失去焦点时触发,支持冒泡        onfocusout: function(element) { $(element).valid(); },        onclick: function(element) { $(element).valid(); },        onkeyup: function(element) { $(element).valid(); },

errorPlacement自定义验证提示位置

使用errorPlacement: function(error, element) { }即可

errorPlacement: function(error, element) {            $(element).parent().parent().append($(error) );            $(error).css("position","absolute");            $(error).css("top","-15px");//设置bottom会被error的top覆盖导致无效        },

上面是我使用的,$(error)即为我们的验证提示弹出的标签label,$(element)在这里是输入框input,由于标签提示内容无法完全显示,我将其移动到了上面显示这里写图片描述这里写图片描述


与bootstrap-datetimepicker结合使用

先自己写一个验证方法并使用compareDate:true,如下:

//增加一个日期时间检验$.validator.addMethod("compareDate",function(value,element){                //两个时间输入框的值                var assigntime = $('#goodfast_form>div:not(.hide) #t1').val();                var deadlinetime = $('#goodfast_form>div:not(.hide) #t2').val();                //正则替换,将-替换为/                var reg = new RegExp('-','g');                assigntime = assigntime.replace(reg,'/');                deadlinetime = deadlinetime.replace(reg,'/');                //Date.parse()先将日期字符串转换为毫秒数字符串,parseInt(,10)再将十进制的毫秒数转换为整数                assigntime = new Date(parseInt(Date.parse(assigntime),10));                deadlinetime = new Date(parseInt(Date.parse(deadlinetime),10));                //比较判断                if(assigntime>deadlinetime||assigntime<new Date()||deadlinetime<new Date()){                    return false;                }else{                    return true;                }            },"发售日期必须小于下架日期,切两者大于当前时间!");

最后记得在datetimepicker中日期选择插件选择完之后给input一个blur事件,因为validate验证是根据blur或者change事件来判断的,选择日期焦点变成了日期选择插件,就是这时候input的blur事件已经执行完了,日期选择完后只是赋值,所以我们需要手动触发一次。

    $('#goodfast_form>div:not(.hide) #t1').datetimepicker({        minView: 1,         language: 'zh',        format: 'yyyy-mm-dd hh:00',        todayBtn: 1,        startDate:new Date(),        autoclose: 1,    }).on("changeDate",function(ev){            $('#goodfast_form>div:not(.hide) #t1').blur();    });
原创粉丝点击