快捷導(dǎo)航

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

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

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

在進(jìn)行表單提交時(shí)，需要對(duì)輸入框和文本域等的value的合理性進(jìn)行驗(yàn)證，可以編寫(xiě)form的onSubmit事件，代碼，踩過(guò)的坑；注意點(diǎn)：

1、只有通過(guò)form里面的 <button type="submit" >提交</button>進(jìn)行表單的提交才會(huì)觸發(fā)form的onSubmit事件，如果是通過(guò)button的onclick事件進(jìn)行表單提交則不會(huì)觸發(fā)form的onSubmit事件

2、 onSubmit事件的正確寫(xiě)法是：<form action="" method="post" onsubmit="return checkFrom();">注意寫(xiě)上 return ，不寫(xiě)沒(méi)有作用

function checkFrom(){
  var username=$('#username').val();
  alert(username);
  var pwd=$('#pwd').val();
  if(username==null || username==""){
    $('#codeInfo').html("請(qǐng)輸入用戶名");
    $('#username').focus();
    return false;
  }else if(pwd==null || pwd==""){
    $('#codeInfo').html("請(qǐng)輸入密碼");
    $('#pwd').focus();
    return false;
  }else{
    return true;
  }
}

3、HTML5，input 提供很多新型的type，省去了我們寫(xiě)JavaScript正則表達(dá)式來(lái)限定輸入值的類(lèi)型的時(shí)間，比如，number，email，tel等等，表示需要輸入合法的數(shù)字，郵箱，電話號(hào)碼等。但是我發(fā)現(xiàn)將type設(shè)置為number之后，讓它只接受數(shù)字的輸入，會(huì)出現(xiàn)兩個(gè)三角形，用于調(diào)整數(shù)字的大小（加1減1），

這里寫(xiě)圖片描述

很明顯，有些場(chǎng)合我們不需要它們，影響美觀度，可利用以下方法將其去掉

這里寫(xiě)圖片描述

<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、驗(yàn)證碼是常常見(jiàn)到的小部件，獲取驗(yàn)證碼，點(diǎn)擊刷新，應(yīng)傳遞一個(gè)參數(shù)避免多次獲取同一個(gè)驗(yàn)證碼，這時(shí)候常常考慮時(shí)間戳或者隨機(jī)數(shù)，此處采用隨機(jī)數(shù)

<div class="form-group input-group">            
  <span class="input-group-addon" style="padding: 0px;">
  <img alt="驗(yàn)證碼" src="<%=basePath %>code/verifyCode" title="看不清可點(diǎn)擊刷新驗(yàn)證碼" style="cursor:pointer;"
   onclick="this.src='<%=basePath %>code/verifyCode?d='+Math.random();"></span>
  <input type="number" class="form-control" id="code"
  placeholder="輸入驗(yàn)證碼" onblur="validateCode(this.value)"/>
</div>

5、來(lái)個(gè)綜合的代碼吧

<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("請(qǐng)輸入用戶名");
    $('#username').focus();
    return false;
  }else if(pwd==null || pwd==""){
    $('#codeInfo').html("請(qǐng)輸入密碼");
    $('#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="驗(yàn)證碼" src="獲取驗(yàn)證碼的URL" title="看不清可點(diǎn)擊刷新驗(yàn)證碼" style="cursor:pointer;"
         onclick="this.src='獲取驗(yàn)證碼的URL?d='+Math.random();"></span>
    <input type="number" class="form-control" id="code" placeholder="輸入驗(yàn)證碼" 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表單提交驗(yàn)證、input（type=number）去三角刷新驗(yàn)證碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: