【javaweb】JQ實現簡單的註冊頁面資料校驗（究極版）
阿新 • • 發佈：2018-12-10
需求：前面寫了一個簡單的表單檢驗，需要使用者提交資訊後才會對錶單資訊進行檢驗，下面我們增加對使用者的提供友好提示，即輸入時就為表單資訊進行檢驗，並提供提示資訊。
步驟分析：1. 匯入JQ的檔案
2. 文件載入事件: 在必填項後天加一個小紅點
3. 表單校驗確定事件: blur focus keyup
4. 提交表單 submit
原始碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../css/style.css" /> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> $(function(){ //預設做一些頁面初始化 //動態在必填項後面新增小紅點 $(".bitian").after("<font class='high'>*</font>"); //給必填項繫結事件 $(".bitian").blur(function(){ //首先獲取使用者當前輸入的值 var value = this.value; //123 //清空上一次提示的資訊 $(this).parent().find(".formtips").remove(); //判斷當前的值是哪一項輸入的值 if($(this).is("#username")){ //判斷是否是使用者名稱輸入項 if(value.length < 6){ $(this).parent().append("<span class='formtips onError'>使用者名稱太短了</span>"); }else{ $(this).parent().append("<span class='formtips onSuccess'>使用者名稱夠用</span>"); } } if($(this).is("#password")){ //判斷是否是密碼輸入項 if(value.length < 6){ $(this).parent().append("<span class='formtips onError'>,密碼太短了</span>"); }else{ $(this).parent().append("<span class='formtips onSuccess'>密碼夠用</span>"); } } }).focus(function(){ $(this).triggerHandler("blur"); }).keyup(function(){ $(this).triggerHandler("blur"); }) //給表單提交繫結事件 $("form").submit(function(){ //觸發所有必填項的校驗 $(".bitian").trigger("focus"); //找到錯誤資訊的個數 if($(".onError").length > 0){ return false; } return true; }); }); /* $(function(){ // 在所有必填項後天加一個小紅點 * $(".bitian").after("<font class='high'>*</font>"); //事件繫結 $(".bitian").blur(function(){ // var value = this.value; var value = $(this).val(); //清空當前必填項後面的span // $(".formtips").remove(); $(this).parent().find(".formtips").remove(); //獲得當前事件是誰的 if($(this).is("#username")){ //校驗使用者名稱 if(value.length < 6){ $(this).parent().append("<span class='formtips onError'>使用者名稱太短了</span>"); }else{ $(this).parent().append("<span class='formtips onSuccess'>使用者名稱夠用</span>"); } } if($(this).is("#password")){ //校驗密碼 if(value.length < 3){ $(this).parent().append("<span class='formtips onError'>密碼太短了</span>"); }else{ $(this).parent().append("<span class='formtips onSuccess'>密碼夠用</span>"); } } }).focus(function(){ $(this).triggerHandler("blur"); }).keyup(function(){ $(this).triggerHandler("blur"); }); // $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){}) //給表單繫結提交事件 $("form").submit(function(){ //觸發必填項的校驗邏輯 $(".bitian").trigger("focus"); var length = $(".onError").length if(length > 0){ return false; } return true; }); });*/ </script> </head> <body> <form action="../index.html"> <div> 使用者名稱:<input type="text" class="bitian" id="username" /> </div> <div> 密碼:<input type="password" class="bitian" id="password" /> </div> <div> 手機號:<input type="tel" /> </div> <div> <input type="submit" /> </div> </form> </body> </html>
示例：
