1. 程式人生 > >Js 阻止表單提交方法

Js 阻止表單提交方法

js 阻止表單提交方法

<body>
    <form action="clock.html" method="post" onsubmit="return checkLength()">
        <p>name:<input type="text" name="user" id="user"></p>
        <input type="submit" id="submit" name="submit"> 
    </form>
</body>
</html>


html頁面。

第一種方法:利用event的阻止默認事件機制,頁面載入之後獲得submit元素,然後為submit註冊click響應函數,參數為event事件。

在用戶點擊submit觸發響應函數後,直接event.preventDefault();阻止表單轉跳的默認事件。


第二種方法:在表單form標簽下屬性onsubmit="return checkLength()" 或 id="submit"的input標簽下添加屬性 checkLength()"

function 函數中 阻止 form提交 return false;

阻止 函數中代碼向下執行 return;




以下還有

1.form的兩個事件


submit,提交表單,如果直接調用該函數,則直接提交表單

onSubmit,提交按鈕點擊時先觸發,然後觸發submit事件。如果不加控制的話,默認返回true,因此表單總能提交。


2. JS的校驗

通過在JS中用document.myform.name.value,來得到用戶的每一個輸入 ,進行校驗,當完全通過時,返回TRUE,反之返回false。


3. 頁面代碼實現

/*

<form name="testform" action="hello.html" method="post" onSubmit="return check();">

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

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

</form>

*/

4. JS的實現

function check(){

if (document.testform.name.value=="admin") {
alert("姓名不正確");
return false;
}
else{
return true;
}
}

註意

onSubmit的寫法,千萬不要寫成:“check()”,這樣當檢驗不能通過的時候不會提交表單。


本文出自 “Exist” 博客,請務必保留此出處http://exist.blog.51cto.com/10305882/1955982

Js 阻止表單提交方法