#password-clear { display: none; }底下是 jQuery 驗證部份:
$('#password-clear').show(); $('#password-password').hide(); $('#password-clear').focus(function() { $('#password-clear').hide(); $('#password-password').show(); $('#password-password').focus(); }); $('#password-password').blur(function() { if($('#password-password').val() == '') { $('#password-clear').show(); $('#password-password').hide(); } });作法大致上是,剛開始先顯示 #password-clear 欄位,把要輸入的 #password-password 欄位隱藏,當 focus 在 #password-clear 的時候,就把 #password-clear 欄位隱藏,顯示 #password-password,輸入密碼之後,按下 tab 跳到其他欄位的時候,開始檢查,當 #password-password 沒有資料的時候,又把 $(‘#password-clear’) show 出來,然後把 $(‘#password-password’) 隱藏,這樣你又會看到 $(‘#password-clear’) 的 value 值,不過這方法有點麻煩,太多欄位又會太多 jQuery 語法。 基本驗證表單:帳號只能是英文加上數字:
var id_check=/[^a-zA-Z0-9]/g; if ($("#username").val()==""){ alert("請輸入你的帳號名稱!!"); $("#username").focus(); } else if ($("#username").val().indexOf(' ')>=0){ alert("請不要在帳號中使用空格!!"); $("#username").focus(); } else if ($("#username").val().match(id_check)){ alert("請不要使用非英文字當做帳號名稱!!"); $("#username").focus(); }email 欄位
var mail_check= /.+@.+\..+/; if (!$("#user_email").val().match(mail_check)){ alert("輸入的e-Mail格式不對, 請再輸入"); $("#user_email").focus(); }或者是:
function isEmail(email){ if (email=="") return true; reEmail=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ return reEmail.test(email); }驗證 checkbox 是否有勾選超過一個:
var test = $("input:checkbox:checked[name=reg_check[]]").length; if(!test) { alert("請務必勾選一個"); }驗證 radio 是否有選取:
if(!$("input:radio[name=reg_sex]").is(":checked")){ alert("請選取你的性別名稱!!"); $("#reg_sex").focus(); $("#errormessage").html("取出選取的 radio 值:請選取你的性別名稱!!
"); }
reg_sex = $("input:radio:checked[name=reg_sex]").val();如何取得 select 的 value 跟 text
/* * * 取得 select value 值 */ $('#selectList').val();取得 text 值,可以利用 :selected 這個
/* * * 取得 select text 值 */ $('#selectList :selected').text();
Pingback: JQuery 表單驗證 | 張小捲的私生活()