form表單提交,前端驗證

前端用戶登錄驗證

轉自：https://blog.csdn.net/n1143916111/article/details/71024864/

 Form表單提交，js驗證

1,  Onclick()

2, Onsubmit()

Button標簽 input (屬性 submit  button )標簽

Input type=button   定義按鈕，沒有任何行為。多數情況下，用於通過javascript啟動腳本

Input type=submit 定義提交按鈕，提交按鈕會把表單數據發送到服務器

在javascript中，事件調用函數時，用return返回值實際上是對window.event.returnValue進行設置

而該值決定當前操作是否繼續，true是繼續 false中斷

第一種方法：onsubmit 與 Input type=submit 搭配  

 

 

 上述兩種方法的  Input type=submit 等同於 button標簽

第二種方法：onclick 與 Input type=button 搭配

 

 

 注意：Input type=button 提交不會觸發form的 onsubmit事件

js控制提交表單

1 <form action="/login" method="post" id="form1">
2      <span>用戶</span>
3     <input type="text" name="username" id="username"/><br/>  
4     <span>密碼</span>
5     <input type="password" name="password" id="passsword"/><br/>  
6     　　
7      <input type="submit" value="提交">    
9 </form>

說明：

• form是一個表單，用來發送http請求。直觀的說，只要用form將需要提交到服務器的標簽包圍，當提交的時候，就會向服務器發送有name屬性的數據。所以，input內容提交必須有name屬性。
  • action：服務器接口路徑；
  • method:選擇發送請求的方式，默認是get，通常用post。get請求會在地址欄顯示參數，並且有長度限制。post則沒有。
  • id:標識標簽元素
  • 當提交后，服務器就會得到：username=填的用戶名 & password=填的密碼
• 當點擊提交后，form數據就會發送。通常提交前要校驗數據。比如長度規則等。所以需要js。

方法一:  

在from屬性后面接着添加οnsubmit="return false;"屬性.表示不提交。true則相反。這里可以用一個方法替換。變成：

<form action="/login" method="post" id="form1" onsubmit="return sb1():">

 

然后，書寫js驗證規則：

 1 function sb1(){
 2         var username = document.getElementById("username");
 3         var password = document.getElementById("passsword");
 4         if(trim(username.value)==null || trim(username.value)==""){
 5             alert("請輸入用戶名");
 6             username.focus();
 7             return false;
 8         }
 9         if(trim(password.value)==null || trim(password.value)==""){
10             alert("請輸入密碼");
11             password.focus();
12             return false;
13         }
14         
15         return true;
16     }
17     function trim(str){ //刪除左右兩端的空格
18     　　     return str.replace(/(^\s*)|(\s*$)/g, "");
19     }

 

js含義：

　　js含義：

• var username = document.getElementById("username");
• 表示獲得id為username的標簽對象，可以理解為輸入用戶名的那個輸入框
• username.value表示輸入框的內容
• trim是一個方法，去除字符串左右兩端空格。
• 方法是一個串代碼的執行體，調用方法會執行方法中的內容。方法又叫做函數，方法由方法名，括號中的參數，大括號中的方法體組成。在js中，方法參數不用聲明類型，調用方法的時候，參數按照順序匹配。比如，trim(username)，username就是str，所以，方法中的參數str就是形式參數，簡稱形參，而username叫做實體參數，簡稱實參。當調用trim(username)的時候，username就替換了str。
• 判斷值為null或者""空字符串用==
• alert表示彈出對話框，內容是字符串，所以需要用引號括起來。
• username.focus()表示焦點聚集在username這個對象，也就是輸入框。
• return false；return表示函數執行結束，后面的代碼不執行。return false表示該函數返回一個boolean值為false。對應到表單，就是οnsubmit="false"，表示不提交。
• 如果if條件都滿足，則return true；提交。
• ||表示或者，意思是，如果username==null或者username是空字符串，條件1或者條件2為true則都是true

方法2：js控制提交表單

首先，表單元素代碼如下：

1 <form action="/back/login/login" method="post" id="form1">
 2     <span>用戶</span>
 3     <input type="text" name="username" id="username"/><br/>  
 5     <span>密碼</span>
 6     <input type="password" name="password" id="passsword"/><br/>  
 8  　　
 9     <a href="javascript:sb();">提交</a>     
10 </form>

 

這里關於提交，頁面切圖通常都會用a標簽或者button來提交，因為涉及到表單驗證。

同樣，js：

1 function sb(){
 2         var username = document.getElementById("username");
 3         var password = document.getElementById("passsword");
 4         if(trim(username.value)==null || trim(username.value)==""){
 5             alert("請輸入用戶名");
 6             username.focus();
 7             return;
 8         }
 9         if(trim(password.value)==null || trim(password.value)==""){
10             alert("請輸入密碼");
11             password.focus();
12             return;
13         }
14         
15         form1.submit();
16         
17     }

 

　　js含義：

• 這個sb()方法沒有返回值，return就是直接結束，如果沒有return就一直執行完所有代碼。也就是說，驗證通過就會提交。
• 這里說明一下提交的方法，可以用form的id或者name屬性表示form這個對象，然后調用submit()方法即可。
• 當然，推薦用document.getElementById("form1").submit();