1.1html

在input標籤後面使用<span>標籤顯示校驗資訊，使用onfocus（聚焦）和onblur（離焦）事件實現動態顯示提示資訊。

<form action="#" method="get" onsubmit="return checkForm()">
					<table border="1" align="center" width="700px" height="400"
						cellspacing="0px" cellpadding="0px" bgcolor="white">
						<tr height="40px">
							<td colspan="2"><font size="4">會員註冊</font>&nbsp;&nbsp;USER
								REGISTER</td>
						</tr>
						<tr height="40px">
							<td>使用者名稱</td>
							<td><input type="text" name="name" size="34px" id="name" class="check"
								onfocus="showTips('name','使用者名稱必填')" onblur="check('name','使用者名稱不能為空')" />
								<span id="namespan"></span>
								</td>
						</tr>
						<tr height="40px">
							<td>密碼</td>
							<td><input type="password" name="password" size="34px" class="check"
								id="password" onfocus="showTips('password','密碼必填')" onblur="check('password','密碼不能為空')" />
								<span id="passwordspan"></span>
								</td>
						</tr>
						<tr height="40px">
							<td>確認密碼</td>
							<td><input type="password" name="repassword" size="34px" class="check"
								id="repassword" onfocus="showTips('repassword','密碼必填')" onblur="check('repassword','密碼不能為空')"/>
								<span id="repasswordspan"></span>
								</td>
						</tr>
						<tr height="40px">
							<td>Email</td>
							<td><input type="text" name="email" size="34px" id="email" /></td>
						</tr>
						<tr height="40px">
							<td>姓名</td>
							<td><input type="text" name="username" size="34px" /></td>
						</tr>
						<tr height="40px">
							<td>性別</td>
							<td><input type="radio" value="0" name="sex" />女 <input
								type="radio" value="1" name="sex" />男</td>
						</tr>
						<tr height="40px">
							<td>出生日期</td>
							<td><input type="text" name="birthday" size="34px" /></td>
						</tr>
						<tr height="40px">
							<td>驗證碼</td>
							<td><input type="text" name="code" size="22px" /> <img
								alt="" src="../img/yanzhengma.png"></td>
						</tr>
						<tr height="40px">
							<td colspan="2"><input type="submit" value="註冊"></td>
						</tr>
					</table>
				</form>
 

1.2js部分 

<script type="text/javascript">
    function checkForm() {
    	var state=true;
        var inputs=document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            if(inputs[i].className=="check"){
            var input=inputs[i].id;
            if(check(input,"請完成註冊")==false){
                state=false;
            }
            }
        }
        if(!state){
        	return false;
        }
	}
	function showTips(id,info) {
        document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
	}
	function check(id,info) {
		var nValue = document.getElementById(id).value;
		var state=true;
		if(nValue==""){
			document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
			state=false;
		}else{
        document.getElementById(id+"span").innerHTML="";
		}
		return state;
	}
</script>
 

1.3JQuery部分

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!--引入validate外掛js檔案-->
		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
		<!--引入國際化js檔案-->
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			$(function(){
				$("#registForm").validate({
					rules:{
						user:{
							required:true,
							minlength:3
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						},
						repassword:{
							required:true,
							digits:true,
							minlength:6,
							equalTo:"[name='password']"
						},
						email:{
							required:true,
							email:true
						},
						username:{
							required:true,
							minlength:2
						},
						sex:{
							required:true
						}                        
					},
					messages:{
						user:{
						required:"使用者名稱必填",
						minlength:"使用者名稱不得小於3位"
						},
						password:{
							required:"密碼不能為空",
							digits:"密碼必須為整數",
							minlength:"密碼不得小於6位"
						},
						repassword:{
							required:"確認密碼不能為空!",
							digits:"密碼必須是數字!",
							minlength:"密碼長度不得低於6位!",
							equalTo:"兩次密碼不一致!"
						},
						email:{
							required:"郵箱不能為空!",
							email:"郵箱格式不正確!"
						},
						username:{
							required:"姓名不能為空!",
							minlength:"姓名不得少於2個字元!"
						},
						sex:{
							required:"性別必須勾選!"
						}						
					},
					errorElement: "label", //用來建立錯誤提示資訊標籤
					success: function(label) { //驗證成功後的執行的回撥函式
						//label指向上面那個錯誤提示資訊標籤label
						label.text(" ") //清空錯誤提示訊息
							.addClass("success"); //加上自定義的success類
					}
				})
			})
		</script>
 

注意：<input type="radio" >時要在後面加上label標籤，否則提示資訊會顯示在第一個<input>標籤後面

<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										性別
									</td>
									<td>
										<span style="margin-right: 155px;">
											<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男
											<input type="radio" name="sex" value="女"/>女<em></em>
											<label for="sex" class="error" style="display: none;"></label>
										</span>
										
									</td>

1.4validate api