一:表單的校驗是JS里的必學內容也是很重要的內容，如果使用按鈕觸發式的校驗方式會讓用戶使用體驗極差，導致產品失敗。
二：要在用戶操作過程中進行校驗，下面附上非空校驗的幾張測試圖片
三：具體代碼實現如下
html代碼：
1 <div id="tbl" style=" margin:auto; height: 1000px; border: blue 1px solid;position: relative; text-align: center;"> 2 3 //實現了表格的垂直水平的塊居中 4 <table style="margin: auto; padding-top:400px ;"> 5 <tr> 6 <td> 7 姓名 8 </td> 9 10 <td> 11 <span style="color: red;"> 12 * 13 </span> 14 <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" required="required" /> 15 <span id="userNameSpan" style="color: gray; display: none;"> 16 </span> 17 </td> 18 </tr> 19 20 <tr> 21 <td> 22 年齡 23 </td> 24 25 <td> 26 <span style="color: red;"> 27 * 28 </span> 29 <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" required="required" /> 30 <span id="ageSpan" style="color: gray; display: none;"> 31 32 </span> 33 </td> 34 </tr> 35 <tr> 36 <td> 37 賬號 38 </td> 39 40 <td> 41 <span style="color: red;"> 42 * 43 </span> 44 <input type="text" name="userNumber" id="userNumber" /> 45 <span id="userNumberSpan"> 46 47 </span> 48 </td> 49 </tr> 50 <tr> 51 <td> 52 密碼 53 </td> 54 55 <td> 56 <span style="color: red;"> 57 * 58 </span> 59 <input type="password" name="password" id="password" /> 60 <span id="passwordSpan"> 61 62 </span> 63 </td> 64 </tr> 65 </table> 66 </div>
Js代碼
1 //如果要設置不同的提示信息，也可以通過傳參的方式進行實現 2 function of(id){ 3 userNameSpan=document.getElementById(id+"Span"); 4 userName=document.getElementById(id); 5 if(userName.value==""){ 6 userNameSpan.innerHTML="XX不能為空"; 7 userNameSpan.style.display="block"; 8 } 9 } 10 function ob(){ 11 if(userName.value!=""){ 12 userNameSpan.innerHTML=""; 13 userNameSpan.style.display="none"; 14 }else{ 15 userNameSpan.innerHTML="<font color='red'>XX必填</font>" 16 } 17 }