フォームデータ校正方法onsubmit()の使用?

4533 ワード

プロジェクトでフォーム(from)のonsubmit()スクリプトを作成する場合、フォーム内のデータの正当性を検証する必要があることがよくあります.
したがって、
とよく書き、validateForm()でフォームのコミットを阻止しようとします.実際の効果はreturn falseフォームでも やはり提出します.
後でonsubmit=「return validateForm()」で問題ないことがわかりました.フォームにonsubmit=「return false;」を付けると、フォームのコミットを阻止できます.
  onsubmit=" checkForm(this);" 和 onsubmit="return checkForm(this);"の違いは?
           :

 

java  : 

 

<form action="index.jsp" method="post" onsubmit="submitTest();">

    <INPUT value="www">

    <input type="submit" value="submit">

</form>

<SCRIPT LANGUAGE="JavaScript">

<!--

    function submitTest() {

        //       

     return false;

    }

//-->

</SCRIPT>


このような書き方では、submitボタンをクリックするとフォームがそのまま提出されますが、なぜですか?
元のonsubmitプロパティはというhtmlオブジェクトのメソッド名のようなもので、その値(文字列)はメソッド体であり、デフォルトではtrueを返します.Javaと同様に、このメソッドボディでは、組み込み関数やカスタム関数など、任意の複数の文を書くことができます.
 
java  : 

 



onsubmit="



    alert('haha'); //     



    submitTest();  //      



    alert(this.tagName); //    this   



    ......(      )   



    return false;



"


に相当
 
Form.prototype.onsubmit = function() {



    alert('haha'); //     



    submitTest();  //      



    alert(this.tagName); //    this   



    ......(      )   



    return false;



};


これでオーバーライド(override)のデフォルトメソッド(デフォルトはtrueを返す)を上書きします.メソッドボディではthisというキーワードが使用できることに気づきました.ここではのオブジェクトインスタンスを表します.
このような分析を経て、以上の状況は理解しにくくなりました.
<form action="index.jsp" method="post" onsubmit="submitTest();">     ,override      :

 
Form.prototype.onsubmit = function() {



    submitTest();



};


ここでsubmitTest()はfalseを返すが,この関数のみを実行し,その結果を何も処理しなかった.そして
 
<form action="index.jsp" method="post" onsubmit="return submitTest();">


overrideメソッドの効果は次のとおりです.
 
Form.prototype.onsubmit = function() {



    return submitTest();



};


これにより,その戻り値を利用し,所期の効果を達成した.
 
formにはformフォームのデータを検証する方法がありますが、submitボタンをクリックしてこの検証をトリガーする必要があります.
<html>  

<head>  

<script>  

function checkForm(form) {  

    if(form['nameId'].value == "") {  

      

        alert("      !");  

        return false;  

    }  

    return true;   

}    

</script>  

</head>  

<body>  

  

<form id="formId" action="www.baidu.com" onsubmit="return checkForm(this)">  

     :<input type="text" id="nameId"/>  

<input type="submit" value="  "/>  

</form>    

</body>    

</html> 


2.jsでonsubmitメソッドを呼び出す
function checkForm(form){  

    if(form['o.NSfk'].value=="") {  

        alert("     !");  

        return false;  

    }  

    if(form['o.DFksj'].value=="") {  

        alert("      !");  

        return false;  

    }         

    return true;  

  

}  

function tijiao() {  

    var form = document.getElementById("productFormId");  

    if(form.onsubmit()==false) {  

        return;  

    }  

    form.submit();  

  

} 


注意:onsubmitイベントは、データのコミットに成功した後にトリガーされます.すなわち、actionを出発した後にトリガーされます.
 
 javascript       :
function f(){
return false;

}

<form action="text.html" onsubmit="f()">
<input type="text" ............/>

<input type="submit" value=" "...../>

</form>

f() false text.html?
onsubmit            ,              :
<input type="submit" value=" " onclick="return f()" />