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>