電子書籍の厳選無料作品が豊富！

Javascript 郵便番号の入力欄で記述の仕方がおかしいとエラーが出る様にしたい。

解決済

  • 質問者：零礼
  • 質問日時：
  • 回答数：5件

首記の件、ご教示お願いします。

郵便番号を記述するテキストボックスに、桁数が間違っていた場合や間のハイフンが入っていなかった場合は、’桁数が違います'や'-が抜けています’などのアラートが出る様にしたいです。

下記のコードが作成中の物です。
(長いので一部抜粋にします)

HTML:
<form action="top.html" method="POST" id="form">
<div class="areas">
<div class="columns">郵便番号</div>
<div class="rows"><input type="text" name="sample" class="input-text6"><br>(例：123-4567)<br><span class="red">半角</span>でお願いします。</div>
</div>
</form>
______________________________________________________________________
JavaScript:
document.getElementById('form').onsubmit = function() {
let textValue6 = document.querySelector('.input-text6').value;

if(textValue6.match(/[^0-9a-zA-Z-]+/)) {
window.alert('半角英数字で入力してください');
return false;
　　 }
};

半角英数字で入力されてない場合はエラーが出る様にはしたのですが、
・桁数を間違って入力した場合(前半３桁ー後半４桁)
・ハイフンが入ってない場合
上記２つを組み込むにはどの様なコードを記述すればいいのでしょうか？

宜しくお願いします。

質問者からの補足コメント

  • 回答ありがとうございます。

    教えて頂いたコードで再度行ってみました。
    テキストボックスに、
    ・「てすと」と入力
    アラート「半角英数字で入力してください」と表示される

    ・「1234567」と入力
    アラート表示なし

    ・「12-4567」と入力
    アラート表示なし

    となりました。
    _____________________________________________________________________
    イメージとしては、
    ・「1234567」と入力された場合
    アラート「ハイフンが入力されていません」と表示させたい

    ・「12-4567」or「137-78998」と入力した場合
    アラート「桁数が違います」と表示させたい

    わかりづらく申し訳ございません。
    宜しくお願いします。

    No.2の回答に寄せられた補足コメントです。 補足日時：2020/09/23 09:58
    通報する

  • 再度の回答ありがとうございます。
    const Test = str => /^\d{3}-\d{4}$/.test(str);

    　alert( Test("てすと") ); // false
    　alert( Test("1234567") ); // false
    　alert( Test("12-4567") ); // false
    　alert( Test("123-4567") ); // true

    確認してみましたが、trueの部分(123-4567)でテキストボックスに入力したらアラートが出ました。
    それ以外は出ませんでした。

    上記のfalseが出た時にアラートが表示される様にしたいです。
    正しい郵便番号を入力したときにアラートが出るのではなく、それ以外の間違った入力をしたときにアラートが出る様にしたいです。

    言葉が足りずに申し訳ございませんでした。

      補足日時：2020/09/24 20:42
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No4です。



＞未だにこの逆をどうやればいいかわかりませんがw
論理値（true／false）を逆にするのはNotにすればよいです。
記述としては ! を付せばよいです。

あるいは、判定はそのままでも、else 以降に処理を記述すれば、false の際に実行される内容となります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答頂きありがとうございます。
無事こちらもできました。

本当に感謝しかありません。
ありがとうございます。

通報する
お礼日時：2020/09/30 09:35

No.4

  • 回答者： fujillin
  • 回答日時：

No3です。



＞trueの部分(123-4567)でテキストボックスに入力したらアラートが出ました。
＞それ以外は出ませんでした。
＞上記のfalseが出た時にアラートが表示される様にしたいです。
あいかわらず、どのように試しておられるのか不明ですが、それって単純に判定を逆になさっているだけではないのですか？？
関数の戻り値を逆にするか、判定条件を逆にすればよいだけのように思われます。


＞・「1234567」と入力された場合
＞アラート「ハイフンが入力されていません」と表示させたい
＞・「12-4567」or「137-78998」と入力した場合
＞アラート「桁数が違います」と表示させたい
No3でも書きましたように、No2の回答はまとめて全部をチェックするものです。
それで十分とは思いますが、個別の項目をそれぞれにチェックしたいのであれば、項目ごとにチェックを掛ければ良いでしょう。
※ 以下の例で、不要なチェックをはずしても、そのままで動作するはずと思います。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(){
document.querySelector('input[name="hoge"]').addEventListener('change', function(){
let r = [], s = this.value;
let err = [
'文字数が違います',
'「半角数字、ハイフン」以外の文字は使えません',
'ハイフンがありません',
'数字の桁数が違います'
];

//　文字数チェック
if(s.length != 8){ r.push(err[0]); }

//　文字種類チェック
if(!/^[-\d]+$/.test(s)){ r.push(err[1]); }

//　ハイフンチェック
if(s.indexOf('-')<0){ r.push(err[2]); }

//　桁数チェック
if(!/^\d{3}.\d{4}$/.test(s)){ r.push(err[3]); }

if(r.length){ alert(r.join('\n')); }
else{ alert('ＯＫです！'); }
});
});
</script>

</head>
<body>

<input name="hoge" type="text" />

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

無事できました。
重ね重ねありがとうございます。
NO,4の投稿方法でできました。

ベストアンサーだとコメントがかけないので
後日、必ずベストアンサーとさせて頂きます。

ちなみにできないといっていた検証の仕方は、

HTML;
<form action="top.html" method="POST" id="form">
<div class="question-form">

<div class="areas">
<div class="columns">郵便番号</div>
<div class="rows"><input type="text" name="sample" class="input-text6"><br>(例：123-4567)<br><span class="red">半角</span>でお願いします。</div>
<div class="rows-submit"><input type="submit" name="sample" value="送信" class="input-text"></div>
</div>

JavaScript;
document.getElementById('form').onsubmit = function() {
let textValue6 = document.querySelector('.input-text6').value;

if(textValue6.match(/^\d{3}-\d{4}$/)) {
window.alert('入力が違います');
return false;
}
};

上記にてテキストボックスを入力したらtrueの時(123-4567)しかアラートが出ないと悩んでました。
未だにこの逆をどうやればいいかわかりませんがw
先に検証方法をお見せすれば良かったですね。
まだわかっていないのでお手数をお掛けしました。

ご迷惑をおかけしましたが、また何かありましたらお力添えして頂ければ幸いです。

通報する
お礼日時：2020/09/29 18:00

No.3

  • 回答者： fujillin
  • 回答日時：

No2です。



＞～～～となりました。
どのような方法でチェックしているのかわかりませんが、以下のようになるはずですけれど？（補足で提示の結果とは異なります）

　const Test = str => /^\d{3}-\d{4}$/.test(str);

　alert( Test("てすと") ); // false
　alert( Test("1234567") ); // false
　alert( Test("12-4567") ); // false
　alert( Test("123-4567") ); // true


＞「ハイフンが入力されていません」と表示させたい
＞桁数が違います」と表示させたい
No2の例ではまとめて全部をチェックしていますので、それぞれをチェックしたければ
・ハイフンの存在チェック
・数値の桁数チェック
の二回に分けてチェックすれば良いでしょう。

まぁ、まとめてしまって
　/^(\d+)-(\d+)$/
でチェックして、
　false　なら「半角数字-以外の文字を含んでいるか、-が無いか」
　true　なら 結果の部分マッチの文字数が3、4でなければ「桁数違い」
として判断してしまうとかもあるかも知れません。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



半角数字のみで、「3文字」+「-」+「4文字」でよいものとするなら、
　　/^\d{3}-\d{4}$/
とかでチェックすればよいのでは？
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： zab_28258
  • 回答日時：

日本の郵便番号入力で半角英字はＯＫなの？

    • good
    • 2
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

たしかにそうですね。
教えて頂きありがとうございます。

通報する
お礼日時：2020/09/23 09:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報