jquery表單提交帶錯誤信息提示效果

更新時間：2017年03月09日 09:44:59 作者：IT白菜哥

本篇文章主要介紹了jquery表單提交帶錯誤信息提示效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

html代碼：

    <form action="" method="" name="form2">
      <div class="m_t30 error_div2">
        <div>
          我是
          <select name="identity" id="ko" class="form-control">
<option></option>
<option value="investor">投資者</option>
<option value="developer">地產(chǎn)開發(fā)商</option>
          </select>
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10 error_div2">
        <div>
          <input type="text" class="form-control" name="name" placeholder="用戶名">
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10 error_div2">
        <div>
          <input type="email" class="form-control" name="email" placeholder="電子郵箱">
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10 error_div2">
        <div>
          <input type="tel" class="form-control" name="phone" placeholder="手機(jī)">
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
<div class="m_t10 error_div2">
        <div>
          <select name="country" class="form-control">
<option></option>
<option>國家或地區(qū)</option>
<option value="1">中國</option>
<option value="2">美國</option>
          </select>
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10 error_div2">
        <div>
          <select name="province" class="form-control">
<option></option>
<option>州/省</option>
<option value="1">廣東</option>
<option value="2">加州</option>
          </select>
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10 error_div2">
        <div>
          <input type="password" class="form-control" name="pwd" placeholder="密碼">
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10 error_div2">
        <div>
          <input type="password" class="form-control" name="pwd2" placeholder="再次確認(rèn)密碼">
        </div>
        <div>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
        </div>
      </div>
      <div class="m_t10">
        <div>
          <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button>
        </div>
      </div>
    </form>

css代碼：

<style>
  .m_t10 {
    margin-top: 20px;
  }
  .error_p2 {
    background-color: #FF6900;
    color: white;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    display: none;
  }
  .error_p2 i {
    margin-right: 5px;
  }
</style>

js代碼

<!--注冊錯誤判斷form2-->
<script>
  //定義要提交的所有數(shù)據(jù)為一個數(shù)組validate2，并且全部賦值為false
  var validate2 = {
    identity: false,
    name: false,
    phone: false,
    email: false,
    country: false,
    province: false,
    mail: false,
    pwd: false,
    pwd2: false
  };
  var msg = ""; //定義提示信息
  //判斷角色  
  $('select[name=identity]', form2).blur(function() {
    var identity = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(identity == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入您的身份";
      span.html(msg);
      span.css('display', 'inline');
      validate2.identity = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.identity = true;
      return;
    }
  })
  //      //判斷用戶名  
  $('input[name=name]', form2).blur(function() {
    var name = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(name == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入用戶名";
      span.html(msg);
      span.css('display', 'inline');
      validate2.name = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.name = true;
      return;
    }
  })
  //判斷手機(jī)
  $('input[name=phone]', form2).blur(function() {
    var phone = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(phone == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入手機(jī)號";
      span.html(msg);
      span.css('display', 'inline');
      validate2.phone = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.phone = true;
      return;
    }
  })
  //判斷國家
  $('select[name=country]', form2).blur(function() {
    var country = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(country == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入國家";
      span.html(msg);
      span.css('display', 'inline');
      validate2.country = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.country = true;
      return;
    }
  })
  //判斷省份
  $('select[name=province]', form2).blur(function() {
    var province = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(province == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入省或州";
      span.html(msg);
      span.css('display', 'inline');
      validate2.province = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.province = true;
      return;
    }
  })
  //判斷郵政編碼
  $('input[name=mail]', form2).blur(function() {
    var mail = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(mail == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸郵政編碼";
      span.html(msg);
      span.css('display', 'inline');
      validate2.mail = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.mail = true;
      return;
    }
  })
  //判斷email
  $('input[name=email]', form2).blur(function() {
    var email = $(this).val();
    var reg = /\w+[@]{1}\w+[.]\w+/;
    var span = $(this).parents('.error_div2').find('.error_p2');
    if(email == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請?zhí)顚戉]箱";
      span.html(msg);
      span.css('display', 'inline');
      validate2.eamil = false;
      return;
    } else if(reg.test(email) == false) {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "郵箱格式不正確";
      span.html(msg);
      span.css('display', 'inline');
      validate2.email = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');

      validate2.email = true;
      return;
    }
  })
  //判斷密碼  
  $('input[name=pwd]', form2).blur(function() {
    var pwd = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(pwd == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "密碼不能為空";
      span.html(msg);
      span.css('display', 'inline');
      validate2.pwd = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.pwd = true;
      return;
    }
  })
  //判斷再次確認(rèn)密碼  
  $('input[name=pwd2]', form2).blur(function() {
    var pwd2 = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判斷用戶名是否為空
    if(pwd2 == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "確認(rèn)密碼不能為空";
      span.html(msg);
      span.css('display', 'inline');
      validate2.pwd2 = false;
      return;
    } else if(pwd2 != $('input[name=pwd]', form2).val()) {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "確認(rèn)密碼與密碼不一致";
      span.html(msg);
      span.css('display', 'inline');
      validate2.pwd2 = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.pwd2 = true;
      return;
    }
  })
  //提交表單，isOK的值是所有提交信息的true，false判斷，
  //只要有一個為false，isOK的值就是false，
  //isOK值為false的話就全部執(zhí)行一次表單元素的失去焦點(diǎn)事件，從而提示錯誤信息
  //isOK值為true的話才提交表單。  
  //因為有些頁面可能不止一個需要提交的表單或者有些表單元素的name重復(fù)，所以根據(jù)form name=".. "，來區(qū)分元素失去事件，這里是form2就是對應(yīng)的<form name>
  function btn_register() {
    var isOK = validate2.identity && validate2.name && validate2.phone && validate2.email && validate2.mail && validate2.country && validate2.province && validate2.pwd && validate2.pwd2;
    var form2 = $('form[name=form2]');
    if(isOK) {
      //。。。執(zhí)行提交事件
      form2.submit();
    } else {
      $('select[name=identity]', form2).trigger('blur');
      $('input[name=name]', form2).trigger('blur');
      $('input[name=phone]', form2).trigger('blur');
      $('input[name=email]', form2).trigger('blur');
      $('input[name=mail]', form2).trigger('blur');
      $('select[name=country]', form2).trigger('blur');
      $('select[name=province]', form2).trigger('blur');
      $('input[name=pwd]', form2).trigger('blur');
      $('input[name=pwd2]', form2).trigger('blur');
    }
  }
</script>

簡要說明：

  //執(zhí)行對應(yīng)表單元素的失去焦點(diǎn)事件$('input[name=XX]',formX).blur()
  //定義對應(yīng)的參數(shù)來獲取值，如:var pwd=$(this).val();
  //定義參數(shù)獲取對應(yīng)錯誤提示信息的標(biāo)簽元素對象，這里的是var span = $(this).parents('.error_div2').find('.error_p2');
  //簡要說明.parents('')方法獲取的是祖先元素為（'.error_div2'），看清楚有帶"s"，簡單來說如果.error_div2是當(dāng)前元素的上三級$('this').parent().parent().parent()，而用$('this').parents('.error_div2')能一步到位獲取到該元素對象，而find('')方法剛好相反，一步到位的獲取對應(yīng)后輩元素對象
  //然后就是根據(jù)條件判斷，判斷的正則表達(dá)式我就不一 一舉例了（因為我也記不住那么多= =、），是否符合返回對應(yīng)的數(shù)組元素true、false值，實現(xiàn)隱藏錯誤提示，并且給數(shù)組validate2的值賦值。
  //最后提交表單時，再次執(zhí)行判斷isOK是否為true
  //isOK值為false的話就全部執(zhí)行一次表單元素的失去焦點(diǎn)事件，從而提示錯誤信息
  //isOK值為true的話才提交表單。
  //ps:表單里的button元素如果不是提交按鈕，記得將type=“button”，否則默認(rèn)是type=“submit”，點(diǎn)擊就會提交;

寫在最后的話：

樣式和布局沒怎么設(shè)置好，頁面效果欠佳，深感抱歉

還是那句話，寫jq先想好要獲取哪些對象，執(zhí)行什么事件，最后什么元素對象達(dá)到怎樣的效果，parents和find方法和省事，不過使用時注意嵌套好div達(dá)到整體性效果

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: