フォーム送信後のJSへの誤った入力の防止

Jiangxi123

HTMLとJSでサンプルのMabLibsタイプのものを作成しています。人がフィールドに入力すると、それを使用して独自のMadLibが作成されます。

私は少し調べましたが、探しているものが正確に見つかりませんでした。ある人が[名前]フィールドに12を入力するとします。このインスタンスが発生した場合、「それは有効な入力ではありません。もう一度入力してください!」という警告が表示されないように、どのようにコーディングしますか。またはそれらの線に沿った何か。

私が使用しているコードは以下のとおりです。私はJavascriptを初めて使用するので、形式や内容が間違っている可能性があることを知っています。

<html><head>
<title>
  Mad Libs Story
</title>

<script>
  function getVars() {
    person1 = String(document.getElementById("personOne").value);
    age = Number(document.getElementById("ageOne").value);
    firstAdjective = String(document.getElementById("adjective").value);


    document.getElementById("madLibCreation").innerHTML = "There once was a person named " + person1 + ". She was " + age + " and very " + firstAdjective = ".";

  }
</script>
</head>
<body>
<h3>
Welcome to Mad Libs! Please type in the prompted Information. Then press the submit button. Have fun!   
</h3>  

<p>
  Name of Person in Room: <input type="text" id="personOne">
  </p>
<p>
  Age: <input type="text" id="ageOne">
  </p>
<p>
  Adjective: <input type="text" id="adjective">
  </p>



<input type="submit" value="Get My MadLib Creation!" onclick="getVars();">

<p id="madLibCreation"></p>

</body></html>
マドゥシャンカコーヒー

そのためには、名前フィールドの値が数値であるかどうかを確認する必要があります。isNaN関数を使用して、値が数値であるかどうかを確認できます。この関数はtrueまたはfalseを返します。

isNaN(12)           // falsee
isNaN(-4.5)         // false
isNaN(15-3)         // false
isNaN(0)            // false
isNaN('123')        // false
isNaN('Nuwan')      // true
isNaN('2005/12/12') // true
isNaN()             // true

したがって、コードではgetVars()関数を次のように変更します

function getVars() {
        var name = document.getElementById("personOne").value;
        if(!isNaN(name) && name.length != 0){
            alert("That is not a valid input. PLease type again!");
        }else{
            person1 = String(document.getElementById("personOne").value);
            age = Number(document.getElementById("ageOne").value);
            firstAdjective = String(document.getElementById("adjective").value);
            document.getElementById("madLibCreation").innerHTML = "There once was a person named " + person1 + ". She was " + age + " and very " + firstAdjective + ".";
        }
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ChromeはjQueryクローンの後にフォーム入力を誤って無効にします

分類Dev

Javascriptで3回誤って試行した後、フォーム送信時にページへのリダイレクトをトリガーします

分類Dev

JSONへのフォーム入力値

分類Dev

フォーム送信入力防止のためにTextareaEnterキーが機能しない

分類Dev

Ruby Mechanize、動的フォームへの入力/ JSONの送信(Airbnbカレンダー)

分類Dev

フォームの送信:ボタンまたは入力?

分類Dev

parsley.jsによる検証後のフォーム送信の防止

分類Dev

動的入力を使用したWebフォームへの投稿

分類Dev

送信後のフォーム入力はどの程度明確ですか?

分類Dev

フォーム送信後の入力値の保持(キャッチ付き)

分類Dev

送信btnが無効になっている場合、事前入力されたフォーム入力要素は最初の入力を受け入れません

分類Dev

JS入力タイプの日付フィールド。フォーム送信後に値を選択したままにします

分類Dev

React-フォームの送信後に入力値をクリアする

分類Dev

IE-フォームを送信した後、入力からの検証検出を無効にする方法は?

分類Dev

HTMLフォームへの入力フィールドの追加

分類Dev

wicket7でのキー送信のフォームと入力

分類Dev

Semantic-ui-react入力フィールドの自動送信が誤った動作をトリガーする

分類Dev

React-フォーム送信の防止

分類Dev

ボットフォーム送信の防止

分類Dev

有効な入力を入力し、残りの入力フィールドを空にしてフォームを送信した後、JS検証が実行されません

分類Dev

紙の入力で入力時に送信されない鉄のフォーム

分類Dev

Ruby on Rails:モデルへのフォーム入力の取得

分類Dev

フォームへの入力の追加/削除

分類Dev

htmlフォームへの無制限の階層入力

分類Dev

InnerHTML出力へのフォーム入力値の追加

分類Dev

音声認識を使用したWebフォームへの入力

分類Dev

フォーム入力から配列PHPへの数値の入力

分類Dev

.netコアWebAPIへの連絡フォームの送信を防止します

分類Dev

フォームの送信を妨げる入力

Related 関連記事

  1. 1

    ChromeはjQueryクローンの後にフォーム入力を誤って無効にします

  2. 2

    Javascriptで3回誤って試行した後、フォーム送信時にページへのリダイレクトをトリガーします

  3. 3

    JSONへのフォーム入力値

  4. 4

    フォーム送信入力防止のためにTextareaEnterキーが機能しない

  5. 5

    Ruby Mechanize、動的フォームへの入力/ JSONの送信(Airbnbカレンダー)

  6. 6

    フォームの送信:ボタンまたは入力?

  7. 7

    parsley.jsによる検証後のフォーム送信の防止

  8. 8

    動的入力を使用したWebフォームへの投稿

  9. 9

    送信後のフォーム入力はどの程度明確ですか?

  10. 10

    フォーム送信後の入力値の保持(キャッチ付き)

  11. 11

    送信btnが無効になっている場合、事前入力されたフォーム入力要素は最初の入力を受け入れません

  12. 12

    JS入力タイプの日付フィールド。フォーム送信後に値を選択したままにします

  13. 13

    React-フォームの送信後に入力値をクリアする

  14. 14

    IE-フォームを送信した後、入力からの検証検出を無効にする方法は?

  15. 15

    HTMLフォームへの入力フィールドの追加

  16. 16

    wicket7でのキー送信のフォームと入力

  17. 17

    Semantic-ui-react入力フィールドの自動送信が誤った動作をトリガーする

  18. 18

    React-フォーム送信の防止

  19. 19

    ボットフォーム送信の防止

  20. 20

    有効な入力を入力し、残りの入力フィールドを空にしてフォームを送信した後、JS検証が実行されません

  21. 21

    紙の入力で入力時に送信されない鉄のフォーム

  22. 22

    Ruby on Rails:モデルへのフォーム入力の取得

  23. 23

    フォームへの入力の追加/削除

  24. 24

    htmlフォームへの無制限の階層入力

  25. 25

    InnerHTML出力へのフォーム入力値の追加

  26. 26

    音声認識を使用したWebフォームへの入力

  27. 27

    フォーム入力から配列PHPへの数値の入力

  28. 28

    .netコアWebAPIへの連絡フォームの送信を防止します

  29. 29

    フォームの送信を妨げる入力

ホットタグ

アーカイブ