JS表單提交驗證、input（type=number）去三角刷新驗證碼

更新時間：2017年06月21日 14:06:36 作者：vili_sky

在進行表單提交時，需要對輸入框和文本域等的value的合理性進行驗證，可以編寫form的onSubmit事件，下面給大家介紹js表單提交驗證input（type=number）去三角刷新驗證碼注意事項，一起看看吧

在進行表單提交時，需要對輸入框和文本域等的value的合理性進行驗證，可以編寫form的onSubmit事件，代碼，踩過的坑；注意點：

1、只有通過form里面的 <button type="submit" >提交</button>進行表單的提交才會觸發(fā)form的onSubmit事件，如果是通過button的onclick事件進行表單提交則不會觸發(fā)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等等，表示需要輸入合法的數(shù)字，郵箱，電話號碼等。但是我發(fā)現(xiàn)將type設置為number之后，讓它只接受數(shù)字的輸入，會出現(xiàn)兩個三角形，用于調(diào)整數(shù)字的大小（加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、驗證碼是常常見到的小部件，獲取驗證碼，點擊刷新，應傳遞一個參數(shù)避免多次獲取同一個驗證碼，這時候常?？紤]時間戳或者隨機數(shù)，此處采用隨機數(shù)

<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）去三角刷新驗證碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: