1 $('.input_check').keyup(function(){ //input發生改變就會觸發事件 2 var $test1 = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/; // 弱：純數字，純字母，純特殊字符 3 var $test2 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/; //中：字母+數字，字母+特殊字符，數字+特殊字符 4 var $test3 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/; //強：字母+數字+特殊字符 5 if($test1.test($('.input_check').val())){ //必須先要滿足第一個if才能進行下一個if 滿足 弱 條件表示為紅色 6 console.log($('.input_check').val()); 7 if($test2.test($('.input_check').val())){ //必須先要滿足 弱 條件 才能進行這個if 滿足 中 條件表示為黃色 8 $('.password_border1').css('border','2px solid #ccc'); 9 $('.password_border2').css('border','2px solid yellow'); 10 if($test3.test($('.input_check').val())){ //必須先要滿足 中 條件才能進行這個if 滿足 強 條件表示為綠色 11 $('.password_border1').css('border','2px solid #ccc') 12 $('.password_border2').css('border','2px solid #ccc') 13 $('.password_border3').css('border','2px solid green') 14 }else{ //沒滿足 強 條件 但滿足了 中條件 就顯示 黃色 15 $('.password_border1').css('border','2px solid #ccc') 16 $('.password_border2').css('border','2px solid yellow') 17 $('.password_border3').css('border','2px solid #ccc') 18 }; 19 }else{//沒滿足 中 條件就依舊顯示紅色 20 $('.password_border1').css('border','2px solid red') 21 $('.password_border2').css('border','2px solid #ccc') 22 $('.password_border3').css('border','2px solid #ccc') 23 }; 24 }else{//沒滿足 弱 條件就依舊顯示紅色 25 $('.password_border1').css('border','2px solid red') 26 $('.password_border2').css('border','2px solid #ccc') 27 $('.password_border3').css('border','2px solid #ccc') 28 } 29 })
