使用JQuery对表单进行动态提示

表单进行动态提示"/>

使用JQuery对表单进行动态提示

使用JQuery对表单进行动态提示

• html部分代码

<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript" src="js/regist.js" ></script>
<link rel="stylesheet" href="css/regist.css" /><form action="#"><table><tr><td><span class="formContentSpan">终于等到你！</span></td></tr><tr><td><input type="text" id="userName" class="userName" onchange="onchangeEvent1()" onmouseover="onmouseoverEvent1()" onmouseout="onmouseoutEvent1()" placeholder="用户名" /></td></tr><tr><td><label id="userNameLable" class="lable"></label></td></tr><tr><td><input type="password" class="password" id="password" onchange="onchangeEvent2()" onmouseover="onmouseoverEvent2()" onmouseout="onmouseoutEvent2()" placeholder="密码" /></td></tr><tr><td><label id="passwordLable" class="lable"></label></td></tr><tr><td><input type="password" id="rePassword" class="rePassword" onchange="onchangeEvent3()" onmouseover="onmouseoverEvent3()" onmouseout="onmouseoutEvent3()" placeholder="确认密码" /></td></tr><tr><td><label id="rePasswordLable" class="lable"></label></td></tr><tr><td><input type="text" id="email" class="email" onchange="onchangeEvent4()" onmouseover="onmouseoverEvent4()" onmouseout="onmouseoutEvent4()" placeholder="邮箱" /></td></tr><tr><td><label id="emailLable" class="lable"></label></td></tr><tr><td><input type="text" id="phone" class="phone" onchange="onchangeEvent5()" onmouseover="onmouseoverEvent5()" onmouseout="onmouseoutEvent5()" placeholder="手机号" /></td></tr><tr><td><label id="phoneLable" class="lable"></label></td></tr><tr><td><input class="checkbox" type="checkbox" />我已阅读并同意网站条款</td></tr><tr><td><input class="tdButton" type="submit" id="submit" value="注册"/><input class="tdButton" type="reset" id="reset" value="重置" /></td></tr></table></form>

• JS部分代码

 /*** 用户名*/
function onchangeEvent1(){var str = $("#userName").val();if(str.length<8||str.length>12){$("#userNameLable").html("*用户名长度必须在8-12位之间");}else{$("#userNameLable").html("");}
}
/*鼠标滑过*/
function onmouseoverEvent1(){$("#userNameLable").html("*用户名由英文字母和数字组成");
}
/*鼠标滑出*/
function onmouseoutEvent1(){$("#userNameLable").html("");
}
/*** 密码*/
function onchangeEvent2(){var pwd = $("#password").val();if(pwd.length<6||pwd.length>12){$("#passwordLable").html("*密码长度不符合要求");}else{$("#passwordLable").html("*密码长度符合要求");}
}
/*鼠标滑过*/
function onmouseoverEvent2(){$("#passwordLable").html("*密码长度要在6-12位之间");
}
/*鼠标滑出*/
function onmouseoutEvent2(){$("#passwordLable").html("");
}
/*** 确认密码*/
function onchangeEvent3(){var pwd = $("#password").val();var rePwd = $("#rePassword").val();if(pwd!=rePwd){$("#rePasswordLable").html("*两次密码输入不一致");}else{$("#rePasswordLable").html("*两次密码输入一致");}
}
/*鼠标滑过*/
function onmouseoverEvent3(){$("#rePasswordLable").html("*密码长度要在6-12位之间");
}
/*鼠标滑出*/
function onmouseoutEvent3(){$("#rePasswordLable").html("");
}
/*** 邮箱*/
function onchangeEvent4(){var email = $("#email").val();if(email.indexOf('@')!=-1&&email.indexOf('.')!=-1&&email.indexOf('@')<email.indexOf('.')){　　$("#emailLable").html("*邮箱格式正确");}else{　　$("#emailLable").html("*邮箱格式不正确");}
}
/*鼠标滑过*/
function onmouseoverEvent4(){$("#emailLable").html("*请输入正确的邮箱");
}
/*鼠标滑出*/
function onmouseoutEvent4(){$("#emailLable").html("");
}
/*** 手机号*/
function onchangeEvent5(){var phone = $("#phone").val();if(phone.length!=11){　　$("#phoneLable").html("*手机号码必须是11位");}else{　　$("#phoneLable").html("手机号输入正确");}
}
/*鼠标滑过*/
function onmouseoverEvent5(){$("#phoneLable").html("*请输入11位的手机号码");
}
/*鼠标滑出*/
function onmouseoutEvent5(){$("#phoneLable").html("");
}

• 效果