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> 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>
性別
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <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>