效果圖:
html代碼:
<form action="" method="" name="form2"> <p class="m_t30 error_p2"> <p> 我是 <select name="identity" id="ko" class="form-control"> <option></option> <option value="investor">投資者</option> <option value="developer">地產開發商</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="text" class="form-control" name="name" placeholder="用戶名"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="email" class="form-control" name="email" placeholder="電子郵箱"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="tel" class="form-control" name="phone" placeholder="手機"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <select name="country" class="form-control"> <option></option> <option>國家或地區</option> <option value="1">中國</option> <option value="2">美國</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <select name="province" class="form-control"> <option></option> <option>州/省</option> <option value="1">廣東</option> <option value="2">加州</option> </select> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="password" class="form-control" name="pwd" placeholder="密碼"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10 error_p2"> <p> <input type="password" class="form-control" name="pwd2" placeholder="再次確認密碼"> </p> <p> <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p> </p> </p> <p class="m_t10"> <p> <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button> </p> </p> </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代碼
簡要說明:
//執行對應表單元素的失去焦點事件$('input[name=XX]',formX).blur() //定義對應的參數來獲取值,如:var pwd=$(this).val(); //定義參數獲取對應錯誤提示信息的標簽元素對象,這里的是var span = $(this).parents('.error_p2').find('.error_p2'); //簡要說明.parents('')方法獲取的是祖先元素為('.error_p2'),看清楚有帶"s",簡單來說如果.error_p2是當前元素的上三級$('this').parent().parent().parent(),而用$('this').parents('.error_p2')能一步到位獲取到該元素對象,而find('')方法剛好相反,一步到位的獲取對應后輩元素對象 //然后就是根據條件判斷,判斷的正則表達式我就不一 一舉例了(因為我也記不住那么多= =、),是否符合返回對應的數組元素true、false值,實現隱藏錯誤提示,并且給數組validate2的值賦值。 //最后提交表單時,再次執行判斷isOK是否為true //isOK值為false的話就全部執行一次表單元素的失去焦點事件,從而提示錯誤信息 //isOK值為true的話才提交表單。 //ps:表單里的button元素如果不是提交按鈕,記得將type=“button”,否則默認是type=“submit”,點擊就會提交;
寫在最后的話:
樣式和布局沒怎么設置好,頁面效果欠佳,深感抱歉
還是那句話,寫jq先想好要獲取哪些對象,執行什么事件,最后什么元素對象達到怎樣的效果,parents和find方法和省事,不過使用時注意嵌套好p達到整體性效果。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com