在進行表單提交時，需要對輸入框和文本域等的value的合理性進行驗證，可以編寫form的onSubmit事件，代碼，踩過的坑；注意點：
1、只有通過form里面的 <button type="submit" >提交</button>進行表單的提交才會觸發form的onSubmit事件，如果是通過button的onclick事件進行表單提交則不會觸發form的onSubmit事件
2、 onSubmit事件的正確寫法是：<form action="" method="post" onsubmit="return checkFrom();">注意寫上 return ，不寫沒有作用
function checkFrom(){ var username=$('#username').val(); alert(username); var pwd=$('#pwd').val(); if(username==null || username==""){ $('#codeInfo').html("請輸入用戶名"); $('#username').focus(); return false; }else if(pwd==null || pwd==""){ $('#codeInfo').html("請輸入密碼"); $('#pwd').focus(); return false; }else{ return true; }}3、HTML5，input 提供很多新型的type，省去了我們寫JavaScript正則表達式來限定輸入值的類型的時間，比如，number，email，tel等等，表示需要輸入合法的數字，郵箱，電話號碼等。但是我發現將type設置為number之后，讓它只接受數字的輸入，會出現兩個三角形，用于調整數字的大小（加1減1），
很明顯，有些場合我們不需要它們，影響美觀度，可利用以下方法將其去掉
<style type="text/css">input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }input[type="number"]{-moz-appearance:textfield;}</style>4、驗證碼是常常見到的小部件，獲取驗證碼，點擊刷新，應傳遞一個參數避免多次獲取同一個驗證碼，這時候常常考慮時間戳或者隨機數，此處采用隨機數
<div class="form-group input-group"> <span class="input-group-addon" style="padding: 0px;"> <img alt="驗證碼" src="<%=basePath %>code/verifyCode" title="看不清可點擊刷新驗證碼" style="cursor:pointer;" onclick="this.src='<%=basePath %>code/verifyCode?d='+Math.random();"></span> <input type="number" class="form-control" id="code" placeholder="輸入驗證碼" onblur="validateCode(this.value)"/></div>
5、來個綜合的代碼吧
<style type="text/css">input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }input[type="number"]{-moz-appearance:textfield;}</style><script type="text/javascript">function checkFrom(){ var username=$('#username').val(); alert(username); var pwd=$('#pwd').val(); if(username==null || username==""){ $('#codeInfo').html("請輸入用戶名"); $('#username').focus(); return false; }else if(pwd==null || pwd==""){ $('#codeInfo').html("請輸入密碼"); $('#pwd').focus(); return false; }else{ return true; }}</script>form表單部分：
<form role="form" action="" method="post" onsubmit="return checkFrom();"> <hr /> <h5>Enter Details to Login</h5> <br /> <div class="form-group input-group"> <span class="input-group-addon"><i class="fa fa-tag"></i></span> <input type="text" class="form-control" placeholder="Your Username " name="username" id="username" /> </div> <div class="form-group input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" placeholder="Your Password" name="pwd" id="pwd" /> </div> <div class="form-group input-group"> <span class="input-group-addon" style="padding: 0px;"> <img alt="驗證碼" src="獲取驗證碼的URL" title="看不清可點擊刷新驗證碼" style="cursor:pointer;" onclick="this.src='獲取驗證碼的URL?d='+Math.random();"></span> <input type="number" class="form-control" id="code" placeholder="輸入驗證碼" onblur="validateCode(this.value)" /> </div> <div class="form-group input-group"> <span id="codeInfo" style="color: #f55"></span> </div> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" /> Remember me </label> <span class="pull-right"> <a href="index.html" rel="external nofollow" >Forget password ? </a> </span> </div> <button type="submit" class="btn btn-primary ">Login Now</button></form>
以上所述是小編給大家介紹的JS表單提交驗證、input（type=number） 去三角 刷新驗證碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
