JS中表單提交驗(yàn)證的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)JS中表單提交驗(yàn)證的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在進(jìn)行表單提交時(shí)，需要對(duì)輸入框和文本域等的value的合理性進(jìn)行驗(yàn)證，可以編寫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事件的正確寫法是：<form action="" method="post" onsubmit="return checkFrom();">注意寫上 return ，不寫沒(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，省去了我們寫JavaScript正則表達(dá)式來(lái)限定輸入值的類型的時(shí)間，比如，number，email，tel等等，表示需要輸入合法的數(shù)字，郵箱，電話號(hào)碼等。但是我發(fā)現(xiàn)將type設(shè)置為number之后，讓它只接受數(shù)字的輸入，會(huì)出現(xiàn)兩個(gè)三角形，用于調(diào)整數(shù)字的大?。?減1），

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

<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" >
  <img alt="驗(yàn)證碼" src="<%=basePath %>code/verifyCode" title="看不清可點(diǎn)擊刷新驗(yàn)證碼" 
   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 />
  <h6>Enter Details to Login</h6>
  <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" >
        <img alt="驗(yàn)證碼" src="獲取驗(yàn)證碼的URL" title="看不清可點(diǎn)擊刷新驗(yàn)證碼" 
         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" ></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>

關(guān)于“JS中表單提交驗(yàn)證的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。