提交表單資料或阻止表單資料的提交(使用者輸入的資料不合法)
阿新 • • 發佈：2018-12-14
提交表單資料
- 單擊submit按鈕按鈕
- 表單元素使用From物件的submit()方法; (記住form裡面的表單元素有一個form屬性，它指向它所在的form元素, 也就是說在在表單元素的onclick事件裡用this.form.submit(); 即可提交資料 )
阻止表單資料提交
1submit按鈕onclick()事件處理函式返回false(阻止事件的預設行為); 2`Form物件的onsubmit()事件處理函式返回false;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this is test</title> </head> <body> <form action="#" method="get"> <p> <lable for="numer">賬號:</lable> <input type="text" name="number" id="number"> </p> <p> <lable for="pwd">密碼:</lable> <input type="pwd" name="pwd" id="pwd"> </p> <p> <span>submit按鈕 </span> <input type="submit" value="登入"> <br> <span>button按鈕 </span> <button type="button">登入</button> </p> </form> </body> </html> <script> //簡單的處理使用者輸入的資料 var checkUserInput={ number: function(){ var number = document.getElementById("number"); var value=number.value //拿到使用者輸入的value,下面想怎麼驗證就怎麼驗證， if(value ===""){ return [false,"賬戶"]; } return [true,"賬號"]; } , pwd: function(){ var pwd = document.getElementById("number"); var value=number.value //拿到使用者輸入的value,下面想怎麼驗證就怎麼驗證， if(value ===""){ return [false,"賬戶"]; } return [true,"賬號"]; } } var btn = document.getElementsByTagName("button")[0]; //驗證成功,通過From物件的submit()提交, //驗證失敗彈出警告框 btn.onclick= function(){ if(checkUserInput.number()[0] && checkUserInput.pwd()[0]){ this.form.submit(); }else{ alert(checkUserInput.number()[1] +"和"+checkUserInput.pwd()[1]+"不合法"+"\n你的IP地址已被記入，請老實點!"); } }; var form = document.getElementsByTagName("form")[0]; //單擊submit按鈕，觸發這個按鈕的click事件(要求:這個事件沒有被祖先元素阻止這個事件傳播) //if onclik事件處理函式返回false,瀏覽器會阻止onclick事件的預設行為， // 也就是不會觸發From物件的submit事件; //else 觸發Form物件的submit事件; //form.onsubmit()返回false,資料就不會提交 form.onsubmit = function (){ if(checkUserInput.number()[0] && checkUserInput.pwd()[0]){ return "OK"; }else{ alert(checkUserInput.number()[1] +"和"+checkUserInput.pwd()[1]+"不合法"+"你的IP地址已被記入，請老實點!"); return false; } } </script>