javascriptで文字列チェックしてみる

2019-11-4 - 読み終える時間: 6 分

以下のような条件で入力内容をチェックしたい。

  • a-z,0-9とハイフン”-”が使用でる
  • ハイフンを先頭または最後の文字にはできない
  • 数字のみの文字列は不可
  • 3文字未満の文字列は不可
  • 連続するハイフンは不可

こちらがそのjavascriptコード。多分うまくいくと思う

        <script type="text/javascript">
             function canuse() {
                target0 = document.getElementById("inputchkresult");
                target0.innerHTML = "<span style='color: green;'>使用可能な文字です</span>";
                targetX = document.getElementById("create_bttn");
                targetX.innerHTML = "<input type='button' id='create_bttn_obj' value='Create' onclick='submit();'>";
            }
            function findupper() {
                targetY = document.getElementById("inputchkresult");
                targetY.innerHTML = "<span style='color: orange;'>大文字は小文字に変換されます</span>";
                targetZ = document.getElementById("create_bttn");
                targetZ.innerHTML = "<input type='button' id='create_bttn_obj' value='Create' onclick='submit();'>";
            }
            function underminerror() {
                target1 = document.getElementById("inputchkresult");
                target1.innerHTML = "<span style='color: red;'>3文字未満のアカウントは作成できません</span>";
                target2 = document.getElementById("create_bttn");
                target2.innerHTML = "";
            }
            function headortailerror() {
                target3 = document.getElementById("inputchkresult");
                target3.innerHTML = "<span style='color: red;'>ハイフンを先頭または最後の文字にはできません</span>";
                target4 = document.getElementById("create_bttn");
                target4.innerHTML = "";
            }
            function hyphenerror() {
                target5 = document.getElementById("inputchkresult");
                target5.innerHTML = "<span style='color: red;'>ハイフンは連続して使用できません</span>";
                target6 = document.getElementById("create_bttn");
                target6.innerHTML = "";
            }
            function onlynumerror() {
                target7 = document.getElementById("inputchkresult");
                target7.innerHTML = "<span style='color: red;'>数字だけでは作成できません</span>";
                target8 = document.getElementById("create_bttn");
                target8.innerHTML = "";
            }
            function wordserror() {
                target9 = document.getElementById("inputchkresult");
                target9.innerHTML = "<span style='color: red;'>使用できない文字が含まれています</span>";
                target10 = document.getElementById("create_bttn");
                target10.innerHTML = "";
            }
            function createhide() {
                target11 = document.getElementById("inputchkresult");
                target11.innerHTML = "<span style='color: red;'>不明なエラーです</span>";
                target12 = document.getElementById("create_bttn");
                target12.innerHTML = "";
            }
            function inputcheck() {
                var acntinputvalue = "";
                acntinputvalue = document.addrle_account_name.inputaccount.value;
                if (acntinputvalue.length < 3){
                    underminerror();
                    checking = "NG"
                    return false;
                } else {
                    checking = "OK"
                }
                function headortailcheck() {
                    if (acntinputvalue.match(/^[\-]/)){
                        headcheckresult = "NG";
                    } else {
                        headcheckresult = "OK";
                    }
                    if (acntinputvalue.match(/[\-]$/)){
                        tailcheckresult = "NG";
                    } else {
                        tailcheckresult = "OK";
                    }
                    if (headcheckresult == "NG" || tailcheckresult == "NG"){
                        headortailcheckresult = "NG";
                    } else {
                        headortailcheckresult = "OK";
                    }
                }
                headortailcheck();
                if (headortailcheckresult == "NG"){
                    headortailerror();
                    checking = "NG";
                    return false;
                } else {
                    checking = "OK";
                }
                if (acntinputvalue.match(/[\-][\-]+/)  == null){
                    checking = "OK";
                } else {
                    hyphenerror();
                    checking = "NG";
                    return false;
                }
                if (acntinputvalue.replace(/[0-9]/g , '') == ''){
                    onlynumerror();
                    checking = "NG";
                    return false;
                } else {
                    checking = "OK";
                }
                if (acntinputvalue.replace(/[0-9a-z\-]/g , '') == ''){
                    checking = "OK"
                } else {
                    wordserror();
                    return false;
                }
                if (acntinputvalue.match(/[A-Z]/g)){
                    findupper();
                    return false;
                }
                if (checking == "OK"){
                    canuse();
                } else {
                    createhide();
                    return false;
                }
            }
        </script>

ただ、function findupper() は前のwordserror()と内容が重複するので、切り捨ててよい。 同様に不明なエラーとしている createhide() 部分も不要なはず。

ちなみに私、javascriptは初めて書きました。初心者のつたないコードですが、何かの参考になればと😅

[AD]入門JavaScriptプログラミング

[AD]入門JavaScriptプログラミング【PDF版】

こちらはHTMLのコード抜粋

            <form action="createaccount.php" method='POST' onsubmit="return false;" name="addrle_account_name">
                    <section name="input">
                        <p id="yourname">
                            <input type="text" name="idname" id="inputaccount" maxlength="32" minlength="3" inputmode="text" placeholder=" Your account name" pattern="[a-z0-9\-]*">
                            <br><span id="inputchkresult">入力してください</span>
                        </p>
                    </section>
                    <section name="checkbutton">
                        <p id="usercheck_bttn"><input type="button" id="usercheck_bttn_obj" value="Check if it can be used" onclick="inputcheck()"></p>
                        <p id="create_bttn"></p>
                    </section>
            </form>

そして私、HTMLを書くのは15年ぶりくらいです。当時はまだHTML4.0.1しか無かった。HTML5は洗練されていますね😄

[AD]HTML5&CSS3標準デザイン講座 30LESSONS【第2版】

[AD]HTML5&CSS3標準デザイン講座 30LESSONS【第2版】【PDF版】

個人的にはPDFより紙の本を購入することをお勧めします。 メモとか付箋で貼っておけるし。

今回はここまで。

ALTERWORKS Labo について

まだ特筆すべきものはありません《以下広告》