JavaScript フレームワーク fairy support js
validate

値の検証処理を実装します
src/js/msg/msg.jsonを作成しましょう

src/js/msg/msg.json
{
     "errorMinMaxLength" : "length min:${min} max:${max}"
    ,"errorMinMaxValue" : "value min:${min} max:${max}"
    ,"errorRadioValue" : "cannot change value"
    ,"errorRadiType" : "cannot wrong type"
    ,"errorCheckValue" : "cannot change value"
    ,"errorCheckType" : "cannot wrong type"
    ,"errorSelectedIndex" : "index min:${min} max:${max}"
    ,"errorSelectValue" : "option cannot wrong type"
    ,"errorRequired" : "required"
}

src/js/util/validator.jsを作成しましょう

src/js/util/validator.js
export class Validator {

    constructor() {
    }

    initValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        meta.msgObj.textContent = "";
        return true;
    }
    
    propRequireValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target)[property];
        if (newValue === null || newValue === undefined) {
            console.error(meta.name + ' : ' + $f.msg('errorRequired'));
            return false;
        } else {
            return true;
        }
    }
    
    propLengthValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target)[property];
        if (newValue !== null && newValue !== undefined && (newValue.length < meta.minLen || meta.maxLen < newValue.length)) {
            console.error(meta.name + ' : ' + $f.msg('errorMinMaxLength', {'min': meta.minLen, 'max': meta.maxLen}));
            return false;
        } else {
            return true;
        }
    }
    
    textValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue.length < meta.minLen || meta.maxLen < newValue.length) {
            meta.msgObj.textContent = $f.msg('errorMinMaxLength', {'min': meta.minLen, 'max': meta.maxLen});
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    radioValueValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue !== old) {
            meta.msgObj.textContent = $f.msg('errorRadioValue');
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    radioCheckValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue !== true && newValue !== false) {
            meta.msgObj.textContent = $f.msg('errorRadiType');
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    checkValueValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue !== old) {
            meta.msgObj.textContent = $f.msg('errorCheckValue');
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    checkCheckValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue !== true && newValue !== false) {
            meta.msgObj.textContent = $f.msg('errorCheckType');
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    selectValueValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue < meta.min || meta.max < newValue) {
            meta.msgObj.textContent = $f.msg('errorMinMaxValue', {'min': meta.min, 'max': meta.max});
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    selectIndexValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue < meta.min || meta.max < newValue) {
            meta.msgObj.textContent = $f.msg('errorSelectedIndex', {'min': meta.min, 'max': meta.max});
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }
    
    selectOptionValidate (target, property, newValue, old, arg) {
        let meta = $f.getMeta(target);
        if (newValue !== true && newValue !== false) {
            meta.msgObj.textContent = $f.msg('errorSelectValue');
            return false;
        } else {
            meta.msgObj.textContent = "";
            return true;
        }
    }

}

src/js/modules/index.jsを修正しましょう

src/js/modules/index.js
import {Validator} from '../util/validator.js';

export class Index {

    constructor() {
        this.prop1 = 'abc';
    }

    init() {

        $f.addMeta(this.text, {"minLen": 2, "maxLen": 4, "msgObj": this.bind1});
        $f.addMeta(this.radio1, {"msgObj": this.bind2});
        $f.addMeta(this.radio2, {"msgObj": this.bind2});
        $f.addMeta(this.checkbox, {"msgObj": this.bind4});
        $f.addMeta(this.singleSelect, {"min": 0, "max": 2, "msgObj": this.bind5});
        $f.addMeta(this.singleSelect.options[0], {"msgObj": this.bind5});
        $f.addMeta(this.singleSelect.options[1], {"msgObj": this.bind5});
        $f.addMeta(this.singleSelect.options[2], {"msgObj": this.bind5});
        $f.addMeta(this.multipleSelect, {"min": 0, "max": 2, "msgObj": this.bind7});
        $f.addMeta(this.multipleSelect.options[0], {"msgObj": this.bind7});
        $f.addMeta(this.multipleSelect.options[1], {"msgObj": this.bind7});
        $f.addMeta(this.multipleSelect.options[2], {"msgObj": this.bind7});
        $f.addMeta(this.textarea, {"minLen": 5, "maxLen": 10, "msgObj": this.bind9});
        $f.addMeta(this, {"prop1": {"minLen": 2, "maxLen": 4, "name": "Index->prop1"}});

        let v = new Validator();

        $f.validate(this.text, 'value', ['input'], [v.initValidate.bind(v), v.textValidate.bind(v)]);
        $f.validate(this.radio1, 'value', ['input'], [v.initValidate.bind(v), v.radioValueValidate.bind(v)]);
        $f.validate(this.radio1, 'checked', ['input'], [v.initValidate.bind(v), v.radioCheckValidate.bind(v)]);
        $f.validate(this.radio2, 'value', ['input'], [v.initValidate.bind(v), v.radioValueValidate.bind(v)]);
        $f.validate(this.radio2, 'checked', ['input'], [v.initValidate.bind(v), v.radioCheckValidate.bind(v)]);
        $f.validate(this.checkbox, 'value', ['input'], [v.initValidate.bind(v), v.checkValueValidate.bind(v)]);
        $f.validate(this.checkbox, 'checked', ['input'], [v.initValidate.bind(v), v.checkCheckValidate.bind(v)]);
        $f.validate(this.singleSelect, 'value', ['input'], [v.initValidate.bind(v), v.selectValueValidate.bind(v)]);
        $f.validate(this.singleSelect, 'selectedIndex', null, [v.initValidate.bind(v), v.selectIndexValidate.bind(v)]);
        $f.validate(this.singleSelect.options[0], 'selected', null, [v.initValidate.bind(v), v.selectOptionValidate.bind(v)]);
        $f.validate(this.singleSelect.options[1], 'selected', null, [v.initValidate.bind(v), v.selectOptionValidate.bind(v)]);
        $f.validate(this.singleSelect.options[2], 'selected', null, [v.initValidate.bind(v), v.selectOptionValidate.bind(v)]);
        $f.validate(this.multipleSelect, 'value', ['input'], [v.initValidate.bind(v), v.selectValueValidate.bind(v)]);
        $f.validate(this.multipleSelect, 'selectedIndex', null, [v.initValidate.bind(v), v.selectIndexValidate.bind(v)]);
        $f.validate(this.multipleSelect.options[0], 'selected', null, [v.initValidate.bind(v), v.selectOptionValidate.bind(v)]);
        $f.validate(this.multipleSelect.options[1], 'selected', null, [v.initValidate.bind(v), v.selectOptionValidate.bind(v)]);
        $f.validate(this.multipleSelect.options[2], 'selected', null, [v.initValidate.bind(v), v.selectOptionValidate.bind(v)]);
        $f.validate(this.textarea, 'value', ['input'], [v.initValidate.bind(v), v.textValidate.bind(v)]);
        $f.validate(this, 'prop1', null, [v.propRequireValidate.bind(v), v.propLengthValidate.bind(v)]);
        
    }

    btn_click(event) {

        this.text.value = '12345';
        this.radio1.value = 'a';
        this.radio1.checked = 'a';
        this.radio2.value = 'a';
        this.radio2.checked = 'a';
        this.checkbox.value = 'a';
        this.checkbox.checked = 'a';
        this.singleSelect.value = 3;
        this.singleSelect.selectedIndex = 3;
        this.singleSelect.options[0].selected = 'a';
        this.singleSelect.options[1].selected = 'a';
        this.singleSelect.options[2].selected = 'a';
        this.multipleSelect.value = 3;
        this.multipleSelect.selectedIndex = 3;
        this.multipleSelect.options[0].selected = 'a';
        this.multipleSelect.options[1].selected = 'a';
        this.multipleSelect.options[2].selected = 'a';
        this.textarea.value = '12345678901';
        this.prop1 = 'abcdef';
    }
}

src/page/index.htmlを修正しましょう

src/page/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="bind1"></div>
    <div><input type="text" data-obj="text" value="1234"></div>
    <div data-obj="bind2"></div>
    <div><input type="radio" data-obj="radio1" name="radio" value="1"><input type="radio" data-obj="radio2" name="radio" value="2"></div>
    <div data-obj="bind4"></div>
    <div><input type="checkbox" data-obj="checkbox" value="1"></div>
    <div data-obj="bind5"></div>
    <div data-obj="bind6"></div>
    <div>
        <select data-obj="singleSelect">
            <option value="aa" selected>aa_val</option>
            <option value="bb">bb_val</option>
            <option value="cc">cc_val</option>
        </select>
    </div>
    <div data-obj="bind7"></div>
    <div data-obj="bind8"></div>
    <div>
        <select data-obj="multipleSelect" multiple>
            <option value="aaa" selected>aaa_val</option>
            <option value="bbb">bbb_val</option>
            <option value="ccc">ccc_val</option>
        </select>
    </div>
    <div data-obj="bind9"></div>
    <div><textarea cols="10" rows="10" data-obj="textarea">12345</textarea></div>
    <div><input type="button" data-name="btn" value="set"></div>
</body>
</html>

index.jsで使っている$f.addMetaメソッドは第一引数に関する情報を格納するメソッドです。格納した情報は$f.getMetaで取得できます。getMetaの引数はaddMetaの第一引数です。格納した情報は$f.deleteMetaで削除できます。deleteMetaの引数はgetMetaと同じです
index.jsで使っている$f.validateメソッドは第一引数オブジェクトの第二引数プロパティに値が格納されようとしたとき、第四引数に渡した関数を実行するメソッドです
例えば、$f.validate(this.text, 'value', ['input'], [v.initValidate.bind(v), v.textValidate.bind(v)]);の場合
this.textオブジェクトのvalueプロパティに値が格納されようとしたとき ValidatorクラスのinitValidate、textValidateメソッドが実行されます
さらに$f.validateメソッドは第一引数オブジェクトに第三引数イベントが発生したとき、第四引数に渡した関数を実行します
例えば、$f.validate(this.text, 'value', ['input'], [v.initValidate.bind(v), v.textValidate.bind(v)]);の場合
this.textオブジェクトにinputイベントが発生したとき ValidatorクラスのinitValidate、textValidateメソッドが実行されます。イベントが発生しないオブジェクトのプロパティの場合、第三引数はnullにしてください
$f.validateの第四引数に渡される関数は引数を5つ取ります
第一引数:$f.validateの第一引数に渡した値
第二引数:$f.validateの第二引数に渡した値
第三引数:新たに格納しようとしている値
第四引数:現在格納されている値
第五引数:$f.validateの第五引数に渡した値。$f.validateに第五引数を指定しなかった場合、undefinedになります
となります
$f.validateの戻り値はbooleanです。trueを返すと新たに格納しようとしている値を第一引数オブジェクトの第二引数プロパティにセットします。falseを返すとセットしません



次ページ値の保持

目次