JS中表單提交驗證的示例分析

這篇文章將為大家詳細講解有關JS中表單提交驗證的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在進行表單提交時，需要對輸入框和文本域等的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" >
  <img alt="驗證碼" src="<%=basePath %>code/verifyCode" title="看不清可點擊刷新驗證碼" 
   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 />
  <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="驗證碼" src="獲取驗證碼的URL" title="看不清可點擊刷新驗證碼" 
         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" ></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中表單提交驗證的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。