1

「日付から」と「日付まで」を受け入れるjspフォームページにフィールドがあります..これで、送信ボタンを使用してこれを検証するために使用できるスクリプトコードがわかりました..しかし、私のフィールドは現在、任意の10文字を受け入れますフォーム....例: 28/07/2000 または 2807//2/00 数字と任意の数の /...

しかし、フィールドに2つの番号の後に/が続き、2つの番号の後に/と年が続くようにしたい..ユーザーに許可される 2 番目の番号のセットは 01、03、05、07... などです... 02、04.. などは許可されません。日付が 29/02/yyyy の場合、yyyy は閏年のみにする必要があります許可...これがすべて満たされる必要があり、カーソルのみが他のフィールドに移動し、ページを更新せずに...

これはajaxで実現できますか... 2つの番号が入力された後に検証が必要なので、誰かが何か考えを持っているなら、正しい方向に私を向けていただければ幸いです...

ちなみに、私は現在、このコードを日付の検証に使用しています....

    function checkdate(frmdt,todt){
    var validformat=/^\d{2}\-\d{2}\-\d{4}$/
    var returnval=false
       if(!validformat.test(frmdt.value)){
           alert("Invalid frmdt");
           document.form.frmdt.value="";
   }
       else if(!validformat.test(todt.value)){
       alert("Invalid Date 2");
        document.form.todt.value="";
   }
        else{
        var start = document.form.frmdt.value;
         var end = document.form.todt.value;

         var stDate = new Date(start);
        var enDate = new Date(end);
       var compDate = enDate - stDate;

        if(compDate >= 0)
       return true;
         else
            {
          alert("End date should be greater than start date.");
          return false;
         }
           }
         }
4

2 に答える 2

0

イベントを確認する必要がありonkeyupます。検証関数をこのイベントにバインドすると、キーが離されるたびに実行されます。イベントを使用しonkeydownて現在の入力値を変数に格納し、次にonkeyupイベントを使用して検証を実行できます。次に、検証関数を編集して、検証が無効な場合、キーが押されたときに入力を変数に格納された値にリセットします。このようにして、キーが離されるとすぐに、無効な入力が元に戻されます。

現時点で jQuery を使用しているようには見えません (質問にタグを追加したにもかかわらず)。それを使用したい場合は、代わりにそのメソッド.keyup()と.keydown()メソッドを使用できます。

サーバー側のコードを使用して検証を行い、結果を非同期で送り返す場合を除き、これには AJAX は必要ありませんが、このかなり単純な要件にはやり過ぎのようです。

于 2013-05-09T10:40:52.987 に答える
0

私が正しく理解していれば、このソリューションはあなたが求めたことを実行するはずです。

入力時の状態は 3 つあります。

赤 - 間違いなく無効

黄 - 一部有効

緑 - 確実に有効

HTML

<input id="date" type="text" maxlength="10" />

Javascript 

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */

(function (global) {
    "use strict";

    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);

        document.getElementById("date").addEventListener("keyup", function (evt) {
            var target = evt.target,
                value = target.value,
                parts = value.split("/"),
                day = parseInt(parts[0], 10),
                month = parseInt(parts[1], 10) - 1,
                date = new Date(parseInt(parts[2], 10) || 1600, month, day),
                dateCheck = day === date.getDate() && month === date.getMonth(),
                finalCheck = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/(18|19|20)\d\d$/.test(value) && dateCheck;

            if (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}$/.test(value) || (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}(0[1-9]|1[012])\/{0,1}$/.test(value) && dateCheck) || finalCheck) {
                if (finalCheck) {
                    target.style.backgroundColor = "green";
                } else {
                    target.style.backgroundColor = "yellow";
                }
            } else {
                target.style.backgroundColor = "red";
            }
        }, false);
    }, false);
}(window));

jsfiddleについて

更新：以下のコメントの追加の質問に対処する

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */

(function (global) {
    "use strict";

    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);

        document.getElementById("date").addEventListener("keyup", function (evt) {
            var target = evt.target,
                value = target.value,
                parts = value.split("/"),
                day = parseInt(parts[0], 10),
                month = parseInt(parts[1], 10) - 1,
                date = new Date(parseInt(parts[2], 10) || 1600, month, day),
                dateCheck = day === date.getDate() && month === date.getMonth(),
                finalCheck = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/(18|19|20)\d\d$/.test(value) && dateCheck;

            if (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}$/.test(value) || (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}(0[1-9]|1[012])\/{0,1}$/.test(value) && dateCheck) || finalCheck) {
                if (finalCheck) {
                    target.style.backgroundColor = "green";
                } else {
                    target.style.backgroundColor = "yellow";
                }
            } else {
                target.style.backgroundColor = "red";
                if (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}(0[1-9]|1[012])\/{0,1}$/.test(value)) {
                    if (!dateCheck) {
                        alert("incorrect number of days for month");
                    }
                }
            }
        }, false);
    }, false);
}(window));

jsfiddleで

更新: 古い非標準の Internet Explorer との互換性を提供するために使用できるイベント リスナー関数の例

これを使用してリスナーを追加します

function addEvt(obj, type, fni) {
    if (obj.attachEvent) {
        obj['e' + type + fni] = fni;
        obj[type + fni] = function () {
            obj['e' + type + fni](window.event);
        };

        obj.attachEvent('on' + type, obj[type + fni]);
    } else {
        obj.addEventListener(type, fni, false);
    }
}

これを使用してリスナーを削除します

function removeEvt(obj, type, fni) {
    if (obj.detachEvent) {
        obj.detachEvent('on' + type, obj[type + fni]);
        obj[type + fni] = nul;
    } else {
        obj.removeEventListener(type, fni, false);
    }
}

使用中で

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */

(function (global) {
    "use strict";

    function addEvt(obj, type, fni) {
        if (obj.attachEvent) {
            obj['e' + type + fni] = fni;
            obj[type + fni] = function () {
                obj['e' + type + fni](window.event);
            };

            obj.attachEvent('on' + type, obj[type + fni]);
        } else {
            obj.addEventListener(type, fni, false);
        }
    }

    function removeEvt(obj, type, fni) {
        if (obj.detachEvent) {
            obj.detachEvent('on' + type, obj[type + fni]);
            obj[type + fni] = nul;
        } else {
            obj.removeEventListener(type, fni, false);
        }
    }

    addEvt(global, "load", function onLoad() {
        removeEvt(global, "load", onLoad);

        addEvt(document.getElementById("date"), "keyup", function (evt) {
            var target = evt.target,
                value = target.value,
                parts = value.split("/"),
                day = parseInt(parts[0], 10),
                month = parseInt(parts[1], 10) - 1,
                date = new Date(parseInt(parts[2], 10) || 1600, month, day),
                dateCheck = day === date.getDate() && month === date.getMonth(),
                finalCheck = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/(18|19|20)\d\d$/.test(value) && dateCheck;

            if (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}$/.test(value) || (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}(0[1-9]|1[012])\/{0,1}$/.test(value) && dateCheck) || finalCheck) {
                if (finalCheck) {
                    target.style.backgroundColor = "green";
                } else {
                    target.style.backgroundColor = "yellow";
                }
            } else {
                target.style.backgroundColor = "red";
                if (/^(0[1-9]|[12][0-9]|3[01])\/{0,1}(0[1-9]|1[012])\/{0,1}$/.test(value)) {
                    if (!dateCheck) {
                        alert("incorrect number of days for month");
                    }
                }
            }
        });
    });
}(window));

jsfiddleについて

于 2013-05-09T14:53:38.463 に答える