Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

validationらしきもの

JavaScript

とっかかりをつくってみた。

const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/**
 * 
 * @param {Node} e 
 * @returns {HTMLElement}
 */
const htmlElement = (e) => {
    if (e instanceof HTMLElement) {
        return e;
    }

    return e;
}

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
/**
 * 
 * @param {Node} node 
 */
var cloneNode = (node) => (index) => {
    const dc = node.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";

const id_listBox = "listBox";


const assertNonull = (o, msg) => {
    if (o!=null) {
        return true;
    }
    console.log("[Assert]"+msg);
    return false;
}



/**
 *  @type{HTMLTableElement}
 */
const listBox = document.getElementById(id_listBox);

console.log("listBox="+listBox);

/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);
assertNonull(d,"id_cell is null");
console.log(id_cell+"="+d);


for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    if (title instanceof HTMLDivElement) {
        title.innerText = "hoge" + i;
    }
    const amount = document.getElementById(id_cell_amount+i);
    if (amount instanceof HTMLInputElement) {
        amount.value = "" + i;
        amount.innerText = "" + (i * 100) + "Yen";
        amount.oninput = (txt) => {
            if (txt instanceof InputEvent) {
                if (txt.inputType == "deleteContentBackward") {
                    console.log("delete....");
                    amount.oldValue = amount.value;
                } else {
                    console.log(amount.value + "=>+" + txt.data);
                    const reg = /^\d{0,6}$/;
                    if (amount.value.match(reg) != null) {
                       console.log("ok"); 
                       amount.oldValue = amount.value;
                    } else {
                        console.log("invalid");
                        console.log(txt);
                        const pos = amount.selectionStart;
                        amount.value = amount.oldValue;
                        amount.selectionStart = pos-1;
                        amount.selectionEnd = pos-1;
                    //    amount.value　= amount.value.slice(0,-1);
                    }
                }
            }
        }
    }
 


    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}

クラスで指定できるようにした。








const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/**
 * 
 * @param {Node} e 
 * @returns {HTMLElement}
 */
const htmlElement = (e) => {
    if (e instanceof HTMLElement) {
        return e;
    }

    return e;
}

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
/**
 * 
 * @param {Node} node 
 */
var cloneNode = (node) => (index) => {
    const dc = node.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";

const id_listBox = "listBox";


const assertNonull = (o, msg) => {
    if (o!=null) {
        return true;
    }
    console.log("[Assert]"+msg);
    return false;
}



/**
 *  @type{HTMLTableElement}
 */
const listBox = document.getElementById(id_listBox);

console.log("listBox="+listBox);

/**
 * 
 * @param {HTMLInputElement} input 
 * @returns {(inputEvent:Event) => void}
 */
const amountValidation = (input) => (inputEvent) => {
    if (inputEvent instanceof InputEvent) {
        if (inputEvent.inputType == "deleteContentBackward") {
            console.log("delete....");
            input.oldValue = input.value;
        } else {
            console.log(input.value + "=>+" + inputEvent.data);
            const reg = /^\d{0,6}$/;
            if (input.value.match(reg) != null) {
               console.log("ok"); 
               input.oldValue = input.value;
            } else {
                console.log("invalid");
                console.log(inputEvent);
                const pos = input.selectionStart;
                input.value = input.oldValue;
                input.selectionStart = pos-1;
                input.selectionEnd = pos-1;
            //    amount.value　= amount.value.slice(0,-1);
            }
        }
    }
}



/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);
assertNonull(d,"id_cell is null");
console.log(id_cell+"="+d);





for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    if (title instanceof HTMLDivElement) {
        title.innerText = "hoge" + i;
    }

    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}


// setValidation
const className_validation_amount = "validation_amount";
const ls = document.getElementsByClassName(className_validation_amount);
console.log("valid ls" + ls.length);
for (const l of ls) {
    console.log(l);
    if (l instanceof HTMLInputElement) {
        console.log(l);
        l.oldValue = l.value;
        let v = amountValidation(l);
        l.oninput = v;
    }
}

関数に出した。コメントで型が定義できるらしい。








const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/**
 * 
 * @param {Node} e 
 * @returns {HTMLElement}
 */
const htmlElement = (e) => {
    if (e instanceof HTMLElement) {
        return e;
    }

    return e;
}

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
/**
 * 
 * @param {Node} node 
 */
var cloneNode = (node) => (index) => {
    const dc = node.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";

const id_listBox = "listBox";


const assertNonull = (o, msg) => {
    if (o!=null) {
        return true;
    }
    console.log("[Assert]"+msg);
    return false;
}



/**
 *  @type{HTMLTableElement}
 */
const listBox = document.getElementById(id_listBox);

console.log("listBox="+listBox);

/**
 * 
 * @typedef {(txt:String)=>boolean} Rule
 * @param {String} txt 
 * @returns {boolean}
 */
const numberRule6 = (txt) => {
    const reg = /^\d{0,6}$/;
    if (txt.match(reg) != null) {
        return true;
    }
    return false;
}

/**
 * 
 * @param {HTMLInputElement} input 
 * @returns {(rule:Rule) => (inputEvent:Event) => void}
 */
const amountValidation = (input) => (rule) => (inputEvent) => {
    console.log("amountValidation");
    if (inputEvent instanceof InputEvent) {
        if (inputEvent.inputType == "deleteContentBackward") {
            console.log("delete....");
            input.oldValue = input.value;
        } else {
            console.log(input.value + "=>+" + inputEvent.data);
            if (rule(input.value)) {
               console.log("ok"); 
               input.oldValue = input.value;
            } else {
                console.log("invalid");
                console.log(inputEvent);
                const pos = input.selectionStart;
                input.value = input.oldValue;
                input.selectionStart = pos-1;
                input.selectionEnd = pos-1;
            //    amount.value　= amount.value.slice(0,-1);
            }
        }
    }
}



/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);
assertNonull(d,"id_cell is null");
console.log(id_cell+"="+d);





for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    if (title instanceof HTMLDivElement) {
        title.innerText = "hoge" + i;
    }

    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}


// setValidation
const className_validation_amount = "validation_amount";
const ls = document.getElementsByClassName(className_validation_amount);
console.log("valid ls" + ls.length);
for (const l of ls) {
    console.log(l);
    if (l instanceof HTMLInputElement) {
        console.log(l);
        l.oldValue = l.value;
        let v = amountValidation(l)(numberRule6);
        l.oninput = v;
    }
}