jquery表單提交帶錯誤資訊提示效果，jquery表單

jquery表單提交帶錯誤資訊提示效果，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">地產開發商</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="手機">        </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>國家或地區</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="再次確認密碼">        </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>  //定義要提交的所有資料為一個數組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;    }  })  //判斷手機  $('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>' + "請輸入手機號";      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>' + "請填寫郵箱";      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;    }  })  //判斷再次確認密碼    $('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>' + "確認密碼不可為空";      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>' + "確認密碼與密碼不一致";      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的話就全部執行一次表單元素的失去焦時間點事件，從而提示錯誤資訊  //isOK值為true的話才提交表單。    //因為有些頁面可能不止一個需要提交的表單或者有些表單元素的name重複，所以根據form name=".. "，來區分元素失去事件，這裡是form2就是對應的<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) {      //。。。執行提交事件      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>

簡要說明：

  //執行對應表單元素的失去焦時間點事件$('input[name=XX]',formX).blur()  //定義對應的參數來擷取值，如:var pwd=$(this).val();  //定義參數擷取對應錯誤提示資訊的標籤元素對象，這裡的是var span = $(this).parents('.error_div2').find('.error_p2');  //簡要說明.parents('')方法擷取的是祖先元素為（'.error_div2'），看清楚有帶"s"，簡單來說如果.error_div2是當前元素的上三級$('this').parent().parent().parent()，而用$('this').parents('.error_div2')能一步到位擷取到該元素對象，而find('')方法剛好相反，一步到位的擷取對應後輩元素對象  //然後就是根據條件判斷，判斷的Regex我就不一 一舉例了（因為我也記不住那麼多= =、），是否符合返回對應的數組元素true、false值，實現隱藏錯誤提示，並且給數組validate2的值賦值。  //最後提交表單時，再次執行判斷isOK是否為true  //isOK值為false的話就全部執行一次表單元素的失去焦時間點事件，從而提示錯誤資訊  //isOK值為true的話才提交表單。  //ps:表單裡的button元素如果不是提交按鈕，記得將type=“button”，否則預設是type=“submit”，點擊就會提交;

寫在最後的話：

樣式和布局沒怎麼設定好，頁面效果欠佳，深感抱歉

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！