프레임워크에서 자주 사용되는 검증 기능을 함수로 제공

※여기서 프레임워크처럼 여러가지 실장한 버젼을 공개했습니다
htps : // 이 m / 0 / 0 / ms / d0b, 8, 84c, d1, 43, 2

자바스크립트 프레임워크에 자주 있는 오토밸리데이션 기능을 만듭니다.
프레임워크 전체의 사용법을 기억하는 것은 귀찮지만 오토밸리데이션은 갖고 싶다고 하는 사람용으로 일례로서 1행 텍스트의 경우의 실장예만을 씁니다.
프레임 워크를 사용하지 않고 끝나면 사용하고 싶지 않다는 비틀거린 사람을위한 이야기입니다. JQuery를 사용하고 있습니다.

구현

function addAutoSyncronizedToText(obj, id, opt) {
    var $elm = $(id);
    var minLength = "min" in opt ? opt["min"]: false;
    var maxLength = "max" in opt ? opt["max"]: false;
    obj[id] = "value" in opt ? opt["value"]: "";
    var $warn = $("<div>", {// 警告メッセージ用のDIV
        "css": {
            "display": "none",
            "position": "absolute",
            "border-style": "solid",
            "border-width": "2px",
            "border-radius": "5px",
            "border-color:": "#000000",
            "background-color": "#ffffff",
            "color": "#ff0000",
            "font-weight": 800,
        }
    });
    $("body").append($warn);
    $elm.on("change", function() {
        $warn.hide();
        var val = $elm.val();
        obj[id] = val;
        var warnText = false;
        if(minLength && val.length < minLength) {
            warnText = String(minLength) + "文字以上必要です";
        }
        if(maxLength && val.length > maxLength) {
            warnText = String(maxLength) + "文字以下です";
        }

        if(warnText !== false) {
            var pos = $elm.offset();
            var x = pos.left;
            var y = pos.top + $elm.outerHeight();
            $warn.text(warnText);
            $warn.css({"top": y, "left": x});
            $warn.show();
        }

        if("onChange" in obj) {
            obj["onChange"].apply(obj, [id, val]);
        }
    });
}

사용법

// 使い方
var obj = {
    "onChange": function(id, value) {
        console.log("id", id);
        console.log("value", value);
    }
};
addAutoSyncronizedToText(obj, "#name", {"min": 1, "max": 15});

변수 obj에 "#name"등의 ID와 완전하게 연동한 키로 값이 보존됩니다. 가능합니다.
개조해 에러의 유무를 obj 에 남겨도 좋다고 생각합니다.

실제 보이는 법

이상입니다.