以下に記載するような複数の入力項目があるページがあります。
<!DOCTYPE html> <html> <head> </head> <body> <form id="large_form" name="large_form"> <table> <tr> <td> <input type="text" id="input1" name="input1" value=""> </td> </tr> <tr> <td> <input type="text" id="input2" name="input2" value="" /> </td> </tr> <tr> <td> <input type="text" id="input3" name="input3" value="" /> </td> </tr> <tr> <td> <textarea id="input4" name="input4"></textarea> </td> </tr> <tr> <td> <input type="text" id="input5" name="input5" value="" /> </td> </tr> <tr> <td> <textarea id="input6" name="input6"></textarea> </td> </tr> </table> </form> <button onClick="return check();" >OK!</button> </body> </html>
inputタグに入力した文字列を正規表現でチェックするため以下のコードを作成しました
このコードは半角文字が入力されているかをチェックし、入力されていたら背景をピンク色に変更するものです。
var items = []; //入力チェック項目 var field = []; //HTMLエレメント var formname; //選択フォーム var itemname; //選択フィールド //半角文字が入力されていないかチェック items = [ "input1", "input2", "input3", "input4", "input5" ]; var reg_Hs = new RegExp(/[ -~。-゚]/g); var Hs_found = false; for(var i = 0; i < items.length; i++) { itemname = items[i]; field = document.forms[formname].elements[itemname]; field.style.backgroundColor=''; if( /* 正規表現による判定 */ ){ field.style.backgroundColor='#ffdddd'; Hs_found = true; } } //半角文字が入力されている場合処理を停止 if(Hs_found == true) { alert("全角で入力してください"); return false; }
「/* 正規表現による判定 */」の部分に「reg_Hs.test(field.value)」と書くと
一部の項目で判定結果がfalseになりフィールドの背景色が変化しません。
これを「field.value.search(reg_Hs) != -1」とすると
すべての判定結果がtrueになり、フィールドの背景色が変化しました。
6つのフィールドにはすべて"TESTテスト"と入力しています。
input text、textareaを入れ替えても結果は同じです。
ただ正規表現を変えた場合にうまくいっている(ように見える)場合も有るのでいまいち原因がついかめていないです。
testメゾットの判定の仕方が間違っていたりするのでしょうか。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/08 09:31