限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 表单验证

jquery表单日期分隔切割输入实时验证插件

所属分类： 网页特效-表单验证    2023-11-06 12:34:21

 6.4K  0  查看评论 (0)
jquery表单日期分隔切割输入实时验证插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery表单日期分隔切割输入实时验证插件（共28个文件）

    • jquery.datetextentry.js
    • jquery.datetextentry.css
    • jquery.datetextentry.css
    • README.md
    • index.html
    • index.html

使用方法

  • code
  • source
  1. (function ($) {

  2. 

  3.     'use strict';

  4. 

  5. 

  6.     /* CUSTOM ERROR CLASS

  7.      * ================== */

  8. 

  9.     var DateValidationError = function (message, source_input) {

  10.         this.message = message;

  11.         this.source_input = source_input;  // Might be undefined

  12.     };

  13. 

  14.     DateValidationError.prototype = Error.prototype;

  15. 

  16. 

  17.     /* DATETEXTENTRY CLASS DEFINITION

  18.      * ============================== */

  19. 

  20.     var days_in_month = [ 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];

  21.     var key = { BACKSPACE : 8 };

  22. 

  23.     var DateTextEntry = function (element, options) {

  24.         this.$element          = $(element);

  25.         this.options           = $.extend({}, $.fn.datetextentry.defaults, options);

  26.         this.add_century       = this.options.add_century       || this.add_century;

  27.         this.parse_date        = this.options.parse_date        || this.parse_date;

  28.         this.format_date       = this.options.format_date       || this.format_date;

  29.         this.human_format_date = this.options.human_format_date || this.human_format_date;

  30.         this.on_blur           = this.options.on_blur;

  31.         this.on_change         = this.options.on_change;

  32.         this.on_error          = this.options.on_error;

  33.         this.custom_validation = this.options.custom_validation;

  34.         this.build_ui();

  35.         this.set_date(this.$element.attr('value'));

  36.         this.proxy_label_clicks();

  37.     };

  38. 

  39.     function str_right(str, n) { return str.substr(str.length - n); }

  40.     function pad2(n) { return str_right('00'   + (n || 0), 2); }

  41.     function pad4(n) { return str_right('0000' + (n || 0), 4); }

  42. 

  43.     DateTextEntry.prototype = {

  44. 

  45.         constructor: DateTextEntry,

  46. 

  47.         build_ui: function () {

  48.             var dte = this;

  49.             this.wrapper = $(this.$element.wrap('<span class="jq-dte" />').parent()[0]);

  50.             this.inner   = $('<span class="jq-dte-inner" />');

  51.             this.add_entry_fields();

  52.             this.tooltip  = $('<span class="jq-dte-tooltip" />').hide();

  53.             this.errorbox = $('<span class="jq-dte-errorbox" />').hide();

  54.             this.inner.on('paste', 'input', function (e) {

  55.                 var input = this;

  56.                 setTimeout(function () { dte.after_paste(input, e); }, 2);

  57.             });

  58.             this.wrapper.append(this.inner, this.tooltip, this.errorbox);

  59.             this.set_field_widths();

  60.             this.$element.hide();

  61.         },

  62. 

  63.         add_entry_fields: function () {

  64.             var dte = this;

  65.             dte.fields = [];

  66.             $.each(this.options.field_order.split(''), function (i, field) {

  67.                 switch (field) {

  68.                 case 'D':

  69.                     dte.build_field('day',   i);

  70.                     break;

  71.                 case 'M':

  72.                     dte.build_field('month', i);

  73.                     break;

  74.                 case 'Y':

  75.                     dte.build_field('year',  i);

  76.                     break;

  77.                 default :

  78.                     throw new Error("Unexpected field order '" + field + "' expected D, M or Y");

  79.                 }

  80.             });

  81.         },

  82. 

  83.         build_field: function (name, index) {

  84.             var dte   = this;

  85.             var opt   = this.options;

  86.             var input = new DateTextInput({

  87.                 name            : name,

  88.                 dte             : dte,

  89.                 index           : index,

  90.                 hint_text       : opt.show_hints ? opt['field_hint_text_' + name] : null,

  91.                 tip_text        : opt['field_tip_text_'  + name],

  92.                 auto_focus_text : opt['field_auto_focus_' + name]

  93.             });

  94.             this.inner.append(input.$input);

  95.             this['input_' + name] = input;

  96. 

  97.             if (index < 2) {

  98.                 this.inner.append($('<span class="separator" />').text(opt.separator));

  99.             }

  100. 

  101.             this.fields[index] = input;

  102.             this[name] = input;

  103.         },

  104. 

  105.         set_field_widths: function () {

  106.             var opt       = this.options;

  107.             var available = this.$element.width() - 2;

  108.             var total     = opt.field_width_year + opt.field_width_sep + opt.field_width_month +

  109.                 opt.field_width_sep + opt.field_width_day;

  110.             this.input_day.set_width(Math.floor(opt.field_width_day     * available / total));

  111.             this.input_month.set_width(Math.floor(opt.field_width_month * available / total));

  112.             this.input_year.set_width(Math.floor(opt.field_width_year   * available / total));

  113. 

  114.         },

  115. 

  116.         set_date: function (new_date) {

  117.             var dte = this;

  118.             new_date = this.parse_date(new_date);

  119.             delete this.day_value;

  120.             delete this.month_value;

  121.             delete this.year_value;

  122.             this.input_day.set(new_date   ? new_date.day   : '');

  123.             this.input_month.set(new_date ? new_date.month : '');

  124.             this.input_year.set(new_date  ? new_date.year  : '');

  125.             this.clear_error();

  126.             this.$element.val(new_date);

  127.             if (new_date) {

  128.                 $.each(this.fields, function (i, input) {

  129.                     dte.validate(input);

  130.                 });

  131.             }

  132.         },

  133. 

  134.         proxy_label_clicks: function () {

  135.             var dte = this;

  136.             var id  = this.$element.attr('id');

  137.             if (!id) { return; }

  138.             $('label[for=' + id + ']').click(function () {

  139.                 dte.focus();

  140.             });

  141.         },

  142. 

  143.         clear: function () {

  144.             this.clear_error('');

  145.             this.set_date('');

  146.         },

  147. 

  148.         destroy: function () {

  149.             this.$element.show();

  150.             this.$element.css('display', '');

  151.             this.wrapper.find('span').remove();

  152.             this.$element.unwrap();

  153.             this.$element.removeData('datetextentry');

  154.             delete this.inner;

  155.             delete this.wrapper;

  156.             delete this.$element;

  157.         },

  158. 

  159.         after_paste: function (target) {

  160.             var date = $(target).val();

  161.             if (this.parse_date(date)) {

  162.                 this.set_date(date);

  163.             }

  164.         },

  165. 

  166.         parse_date: function (text) {

  167.             return this.parse_iso_date(text);

  168.         },

  169. 

  170.         parse_iso_date: function (text) {

  171.             return text && text.match(/^(\d\d\d\d)-(\d\d)-(\d\d)/)

  172.                 ? { day: RegExp.$3, month: RegExp.$2, year: RegExp.$1 }

  173.                 : null;

  174.         },

  175. 

  176.         get_date : function () {

  177.             return (this.day_value && this.month_value && this.year_value)

  178.                 ? { day: this.day_value, month: this.month_value, year: this.year_value }

  179.                 : null;

  180.         },

  181. 

  182.         get_today : function () {

  183.             var today = new Date();

  184.             return {

  185.                 day:   pad2(today.getDate()),

  186.                 month: pad2(today.getMonth() + 1),

  187.                 year:  pad4(today.getFullYear())

  188.             };

  189.         },

  190. 

  191.         format_date : function (date) {

  192.             return this.iso_format_date(date);

  193.         },

  194. 

  195.         iso_format_date : function (date) {

  196.             return [ pad4(date.year), pad2(date.month), pad2(date.day) ].join('-');

  197.         },

  198. 

  199.         human_format_date: function (date) {

  200.             return [ pad2(date.day), pad2(date.month), pad4(date.year) ].join('/');

  201.         },

  202. 

  203.         add_century: function (year) {

  204.             return 2000 + year;

  205.         },

  206. 

  207.         focus_in: function () {

  208.             this.wrapper.addClass('focus');

  209.         },

  210. 

  211.         focus_out: function () {

  212.             if (this.on_blur || this.options.is_required) {

  213.                 var self = this;

  214.                 setTimeout(function () { self.check_widget_focus_lost(); }, 2);

  215.             }

  216.             this.wrapper.removeClass('focus');

  217.         },

  218. 

  219.         check_widget_focus_lost: function () {

  220.             var opt = this.options;

  221.             if (this.wrapper.is('.focus')) {

  222.                 return;

  223.             }

  224.             if (opt.is_required) {

  225.                 if (!this.get_date()) {

  226.                     this.set_error(opt.E_REQUIRED_FIELD);

  227.                 }

  228.             }

  229.             if (this.on_blur) {

  230.                 this.on_blur();

  231.             }

  232.         },

  233. 

  234.         show_input_tip: function (input) {

  235.             var opt = this.options;

  236.             if (!opt.show_tooltips) { return; }

  237.             var x_offset = (input.left() + opt.tooltip_x) + 'px';

  238.             var y_offset = (this.wrapper.height() + opt.tooltip_y) + 'px';

  239.             this.tooltip.css({position: 'absolute', top: y_offset, left: x_offset})

  240.                 .text(input.tip_text)

  241.                 .show();

  242.         },

  243. 

  244.         hide_input_tip: function () {

  245.             this.tooltip.hide();

  246.         },

  247. 

  248.         set_error: function (error_text, source_input) {

  249.             this.error_text = error_text;

  250.             this.error_source_input = source_input;

  251.             this.show_error();

  252.         },

  253. 

  254.         clear_error: function () {

  255.             delete this.error_text;

  256.             this.show_error();

  257.         },

  258. 

  259.         set_readonly: function (mode) {

  260.             if (mode === undefined) {

  261.                 mode = true;

  262.             }

  263.             this.input_day.set_readonly(mode);

  264.             this.input_month.set_readonly(mode);

  265.             this.input_year.set_readonly(mode);

  266.             if (mode) {

  267.                 this.wrapper.addClass('readonly');

  268.             }

  269.             else {

  270.                 this.wrapper.removeClass('readonly');

  271.             }

  272.         },

  273. 

  274.         show_error: function () {

  275.             var opt = this.options;

  276.             var error_text = this.widget_error_text();

  277.             if (this.on_error) {

  278.                 this.on_error(error_text);

  279.             }

  280.             if (!opt.show_errors) {

  281.                 return;

  282.             }

  283.             if (error_text === '') {

  284.                 this.errorbox.hide();

  285.                 this.errorbox.text('');

  286.             }

  287.             else {

  288.                 var x_offset = (this.inner.outerWidth() + o<p></p>

  289.                                                 

(function ($) {

    'use strict';


    /* CUSTOM ERROR CLASS
     * ================== */

    var DateValidationError = function (message, source_input) {
        this.message = message;
        this.source_input = source_input;  // Might be undefined
    };

    DateValidationError.prototype = Error.prototype;


    /* DATETEXTENTRY CLASS DEFINITION
     * ============================== */

    var days_in_month = [ 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    var key = { BACKSPACE : 8 };

    var DateTextEntry = function (element, options) {
        this.$element          = $(element);
        this.options           = $.extend({}, $.fn.datetextentry.defaults, options);
        this.add_century       = this.options.add_century       || this.add_century;
        this.parse_date        = this.options.parse_date        || this.parse_date;
        this.format_date       = this.options.format_date       || this.format_date;
        this.human_format_date = this.options.human_format_date || this.human_format_date;
        this.on_blur           = this.options.on_blur;
        this.on_change         = this.options.on_change;
        this.on_error          = this.options.on_error;
        this.custom_validation = this.options.custom_validation;
        this.build_ui();
        this.set_date(this.$element.attr('value'));
        this.proxy_label_clicks();
    };

    function str_right(str, n) { return str.substr(str.length - n); }
    function pad2(n) { return str_right('00'   + (n || 0), 2); }
    function pad4(n) { return str_right('0000' + (n || 0), 4); }

    DateTextEntry.prototype = {

        constructor: DateTextEntry,

        build_ui: function () {
            var dte = this;
            this.wrapper = $(this.$element.wrap('<span class="jq-dte" />').parent()[0]);
            this.inner   = $('<span class="jq-dte-inner" />');
            this.add_entry_fields();
            this.tooltip  = $('<span class="jq-dte-tooltip" />').hide();
            this.errorbox = $('<span class="jq-dte-errorbox" />').hide();
            this.inner.on('paste', 'input', function (e) {
                var input = this;
                setTimeout(function () { dte.after_paste(input, e); }, 2);
            });
            this.wrapper.append(this.inner, this.tooltip, this.errorbox);
            this.set_field_widths();
            this.$element.hide();
        },

        add_entry_fields: function () {
            var dte = this;
            dte.fields = [];
            $.each(this.options.field_order.split(''), function (i, field) {
                switch (field) {
                case 'D':
                    dte.build_field('day',   i);
                    break;
                case 'M':
                    dte.build_field('month', i);
                    break;
                case 'Y':
                    dte.build_field('year',  i);
                    break;
                default :
                    throw new Error("Unexpected field order '" + field + "' expected D, M or Y");
                }
            });
        },

        build_field: function (name, index) {
            var dte   = this;
            var opt   = this.options;
            var input = new DateTextInput({
                name            : name,
                dte             : dte,
                index           : index,
                hint_text       : opt.show_hints ? opt['field_hint_text_' + name] : null,
                tip_text        : opt['field_tip_text_'  + name],
                auto_focus_text : opt['field_auto_focus_' + name]
            });
            this.inner.append(input.$input);
            this['input_' + name] = input;

            if (index < 2) {
                this.inner.append($('<span class="separator" />').text(opt.separator));
            }

            this.fields[index] = input;
            this[name] = input;
        },

        set_field_widths: function () {
            var opt       = this.options;
            var available = this.$element.width() - 2;
            var total     = opt.field_width_year + opt.field_width_sep + opt.field_width_month +
                opt.field_width_sep + opt.field_width_day;
            this.input_day.set_width(Math.floor(opt.field_width_day     * available / total));
            this.input_month.set_width(Math.floor(opt.field_width_month * available / total));
            this.input_year.set_width(Math.floor(opt.field_width_year   * available / total));

        },

        set_date: function (new_date) {
            var dte = this;
            new_date = this.parse_date(new_date);
            delete this.day_value;
            delete this.month_value;
            delete this.year_value;
            this.input_day.set(new_date   ? new_date.day   : '');
            this.input_month.set(new_date ? new_date.month : '');
            this.input_year.set(new_date  ? new_date.year  : '');
            this.clear_error();
            this.$element.val(new_date);
            if (new_date) {
                $.each(this.fields, function (i, input) {
                    dte.validate(input);
                });
            }
        },

        proxy_label_clicks: function () {
            var dte = this;
            var id  = this.$element.attr('id');
            if (!id) { return; }
            $('label[for=' + id + ']').click(function () {
                dte.focus();
            });
        },

        clear: function () {
            this.clear_error('');
            this.set_date('');
        },

        destroy: function () {
            this.$element.show();
            this.$element.css('display', '');
            this.wrapper.find('span').remove();
            this.$element.unwrap();
            this.$element.removeData('datetextentry');
            delete this.inner;
            delete this.wrapper;
            delete this.$element;
        },

        after_paste: function (target) {
            var date = $(target).val();
            if (this.parse_date(date)) {
                this.set_date(date);
            }
        },

        parse_date: function (text) {
            return this.parse_iso_date(text);
        },

        parse_iso_date: function (text) {
            return text && text.match(/^(\d\d\d\d)-(\d\d)-(\d\d)/)
                ? { day: RegExp.$3, month: RegExp.$2, year: RegExp.$1 }
                : null;
        },

        get_date : function () {
            return (this.day_value && this.month_value && this.year_value)
                ? { day: this.day_value, month: this.month_value, year: this.year_value }
                : null;
        },

        get_today : function () {
            var today = new Date();
            return {
                day:   pad2(today.getDate()),
                month: pad2(today.getMonth() + 1),
                year:  pad4(today.getFullYear())
            };
        },

        format_date : function (date) {
            return this.iso_format_date(date);
        },

        iso_format_date : function (date) {
            return [ pad4(date.year), pad2(date.month), pad2(date.day) ].join('-');
        },

        human_format_date: function (date) {
            return [ pad2(date.day), pad2(date.month), pad4(date.year) ].join('/');
        },

        add_century: function (year) {
            return 2000 + year;
        },

        focus_in: function () {
            this.wrapper.addClass('focus');
        },

        focus_out: function () {
            if (this.on_blur || this.options.is_required) {
                var self = this;
                setTimeout(function () { self.check_widget_focus_lost(); }, 2);
            }
            this.wrapper.removeClass('focus');
        },

        check_widget_focus_lost: function () {
            var opt = this.options;
            if (this.wrapper.is('.focus')) {
                return;
            }
            if (opt.is_required) {
                if (!this.get_date()) {
                    this.set_error(opt.E_REQUIRED_FIELD);
                }
            }
            if (this.on_blur) {
                this.on_blur();
            }
        },

        show_input_tip: function (input) {
            var opt = this.options;
            if (!opt.show_tooltips) { return; }
            var x_offset = (input.left() + opt.tooltip_x) + 'px';
            var y_offset = (this.wrapper.height() + opt.tooltip_y) + 'px';
            this.tooltip.css({position: 'absolute', top: y_offset, left: x_offset})
                .text(input.tip_text)
                .show();
        },

        hide_input_tip: function () {
            this.tooltip.hide();
        },

        set_error: function (error_text, source_input) {
            this.error_text = error_text;
            this.error_source_input = source_input;
            this.show_error();
        },

        clear_error: function () {
            delete this.error_text;
            this.show_error();
        },

        set_readonly: function (mode) {
            if (mode === undefined) {
                mode = true;
            }
            this.input_day.set_readonly(mode);
            this.input_month.set_readonly(mode);
            this.input_year.set_readonly(mode);
            if (mode) {
                this.wrapper.addClass('readonly');
            }
            else {
                this.wrapper.removeClass('readonly');
            }
        },

        show_error: function () {
            var opt = this.options;
            var error_text = this.widget_error_text();
            if (this.on_error) {
                this.on_error(error_text);
            }
            if (!opt.show_errors) {
                return;
            }
            if (error_text === '') {
                this.errorbox.hide();
                this.errorbox.text('');
            }
            else {
                var x_offset = (this.inner.outerWidth() + o<p></p>
站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 日期时间表单验证日期验证分隔切割判断
相关资源 / 表单验证
查看更多

jquery会员注册表单验证

 一款基于jquery多类型表单验证，包含了表单验证、生日下拉框选择、邮箱自动补全、密码可见性与重复密码的验证等，非常实用。
  表单验证
 5314  0

jquery自定义文本文字传递到DIV并显示插件

 一款onclick时间传递文本内容到指定DIV元素显示，非常的高效实用。
  表单验证
 4397  0

js表单输入密码在线检验插件

 一款密码实时检查插件，根据即时输入的密码进行实时反馈，检查所输入的字符是否包含有特定字符。
  表单验证
 9266  0

原生js实现的支持移动端触屏拼图滑块验证插件

 一款支持移动端触摸滑块验证插件，随机加载不同的背景图片，然后在背景图片上增加拼图滑块，手动拖动水平滑块即可验证。
  表单验证
 5234  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论