摘要:jquery表單驗證
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript" >
$(document).ready(function() {
$(function(){
/* 定義 boolean 變數，記錄是否驗證成功 */
var flag = false;
/* 加入 input 類型為 text, password 元件的聚焦事件 */
$(":text, :password").focus(function(){
/* 將這些物件聚焦時的 css 設為 1 像素的黑色邊框，底色為淡黃色 */
$(this).css({border: "1px solid #000", background: "#ffea45"});
});
/* 加入 input 類型為 text, password 元件的失焦事件 */
$(":text, :password").blur(function(){
/* 將這些物件失焦時的 css 設為 1 像素的灰色邊框，底色為白色 */
$(this).css({border: "1px solid #ccc", background: "#fff"});
});
/* 表單送出事件加入 submit 按鈕停用 */
$("form").submit(function(){
/* 驗證表單內命名為 uname 的元件是否有值，若無則顯示提示文字。
※這邊使用了 jQuery 的串接特色
※find 為尋找元素的函式 */
if($(this).find("input[@name=uname]").val() == ""){
$("#name_msg").html("請輸入姓名").css("color", "#f00").fadeIn();
flag = false;
}else{
$("#name_msg").hide();
flag = true;
}
/* 驗證表單內命名為 pwd 的元件是否有值，若無則顯示提示文字 */
if($(this).find("input[@name=pwd]").val() == ""){
$("#pwd_msg").html("請輸入密碼").css("color", "#f00").fadeIn();
flag = false;
}else{
$("#pwd_msg").hide();
flag = true;
}
/* 若驗證通過則停用 submit 按鈕，反之則取消送出 */
if(flag)
$(":submit").attr("disabled", "true");
else
return false;
});
/* 選擇第一個 input 元件，並加入聚焦（focus）事件 */
$("input:first").focus();
})
});
</script>
</head>
<body>
<form action="index-1-a.php" id="form1">
<div>
<label for="uname">姓名：</label>
<input type="text" name="uname" id="uname" class="input" />
<span id="name_msg" class="msg"></span>
</div>
<div>
<label for="pwd">密碼：</label>
<input type="password" name="pwd" id="pwd" class="input" />
<span id="pwd_msg" class="msg"></span>
</div>
<p><input type="submit" /></p>
</form>
</body>
</html>