0

すべての入力フィールドをアラートに表示する送信ボタンを取得するために、javascript ですべてを試しました。

例。ユーザーがフォームに入力すると、フォームが検証され、送信をクリックして、名前、費用、住所、電話番号などのアラートに結果が表示されます。javascript で練習しようとしていますが、望んでいた結果が得られません。

誰か助けてくれませんか！

これが私のスクリプトです。

<script type="text/javascript">     
// Form validation code will come here.     
var Num1 = document.getElementById('1stTotal').value;
var Num2 = document.getElementById('2ndTotal').value;
var Num3 = document.getElementById('3rdTotal').value;
var Total = Num1 + Num2 + Num3;
grandTotal.value = Total;
function validate() {
    if (document.myForm.Name.value == "") {
        alert("Please provide your name!");
        document.myForm.Name.value.focus();
        return false;
    }
    if (document.myForm.Street.value == "") {
        alert("Please provide your Street!");
        document.myForm.Street.value.focus();
        return false;
    }
    if (document.myForm.City.value == "") {
        alert("Please provide your City!");
        document.myForm.City.focus();
        return false;
    }
    if (document.myForm.Postal.value == "" || isNaN(document.myForm.Postal.value) || document.myForm.Postal.value.length != 7) {
        alert("Please provide a Postal in the format xxx-xxx.");
        document.myForm.Postal.focus();
        return false;
    }
    if (document.myForm.Telephone.value == "" || isNaN(document.myForm.Telephone.value) || document.myForm.Telephone.value.length != 12) {
        alert("Please provide a Telephone in the format xxx-xxx-xxxx.");
        document.myForm.Telephone.focus();
        return false;
    }
    var emailID = document.myForm.Email.value;
    atpos = emailID.indexOf("@");
    dotpos = emailID.lastIndexOf(".");
    if (atpos < 1 || (dotpos - atpos < 2)) {
        alert("Please provide a valid email.");
        document.myForm.Email.focus();
        return false;
    }
    if (document.myForm.CardNo.value == "" || isNaN(document.myForm.CardNo.value) || document.myForm.CardNo.value.length != 16) {
        alert("Please provide a Credit Card Number in the format 1234567890123456.");
        document.myForm.CardNo.focus();
        return false;
    }
    if (document.myForm.Expiry.value == "" || isNaN(document.myForm.Expiry.value) || document.myForm.Expiry.value.length != 10) {
        alert("Please provide a Expiry in the format MM-DD-YYYY.");
        document.myForm.Expiry.focus();
        return false;
    }
    return (true);
}
function greeting() {
    alert("Hello " + Name + "," + "<br />" + "Your book order includes:");
} < /script>
4

3 に答える 3

0

アラートが次々と発生しないようにしてください。非常に迷惑なUI。無効な入力のたびに返さないでください。一度にすべてを行います。

代わりに、無効な入力ごとにメッセージの文字列を作成します。空の文字列から始めます。最後に、文字列に長さがある場合は警告します。そうでなければ、あなたは有効です。

したがって、最初の部分は次のようになります。

var str = "";
function validate() {
if (document.myForm.Name.value == "") {
    str += "Please provide your name!\n"; // use a newline in alerts
}
// etc.
//
if (str.length > 0) {
    alert(str);
}
// but there are better ways than alert, too.
于 2013-07-31T21:21:13.670 に答える
0

コア ネイティブ JavaScript を使用する場合、ブラウザの異なる解釈/レンダリング/互換性に関連する問題が発生する可能性があります。

mootoolsやjQueryなどの js フレームワークを使用することを強くお勧めします。

次に、フォーム要素を非常に簡単に選択し、フォームを適切に検証することができます。

もちろん、最初に選択したフレームワークを少し勉強する必要がありますが、そのときはとても幸せになることを確認してください:)

編集: また、html 要素を参照するコードは、要素が作成された後に呼び出す必要があることに注意してください。つまり、関数呼び出しを onload または ondomready イベントでラップする必要があります。

于 2013-07-31T21:16:53.360 に答える