要求:技术要求(html+css+jquery)图标题后有
1. 完成页面布局(页面布局合理、样式和图片一致、代码无误各)
2. 用jquery验证Email地址是否有效,要求Email地址中必须包含@符号,如果Email地址有效则显示”正确”的图标,并在图标后面提示用户可用,否则在Email注册框后面显示”错误”的图标,图标后面提示用户Email错误。
3. 在设置昵称框中要求用户输入的昵称必须大于四个字符(其他验证不做要求),当用户输入正确的昵称时在其输入框后面提示用户输入正确,否则提示用户输入信息错误。(代码无误,效果符合要求)
4. 在设置密码一栏中要求用户输入密码长度不能低于6位(其他不做要求),用户输入符合要求则提示用户密码可用,否则提示用户密码不可用。(代码无误,效果符合要求)
5. 在再次输入用户密码框中要求用户密码要和第一次输入的密码相同,两次密码输入一样提示用户密码输入正确,否则提示用户两次密码不一致。(代码无误、效果符合要求)
6. 当用户点击注册按钮时如果以上表单信息都符合要求,弹出提示框,告诉用户表单符合要求,否则提示用户表单有误。(代码正确、思路清晰、效果符合要求)
图标
源码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>周考二</title> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").hide(); var f1; var f2; var f3; var f4; $("input:eq(0)").blur(function(){ $("img:eq(0)").show(); var email = $("input:eq(0)").val(); var flag = email.indexOf("@")>-1; if(flag){ $("img:eq(0)").attr("src","图片3.png"); $("span:eq(0)").text("用户名可用"); f1 = true; }else{ $("img:eq(0)").attr("src","图片2.png"); $("span:eq(0)").text("用户名不可用"); f1 = false; } }); $("input:eq(1)").blur(function(){ $("img:eq(1)").show(); var name = $("input:eq(1)").val(); if(name.length>=4&&name.length<=20){ $("img:eq(1)").attr("src","图片3.png"); $("span:eq(1)").text("昵称可用"); f2 = true; }else{ $("img:eq(1)").attr("src","图片2.png"); $("span:eq(1)").text("昵称不可用"); f2 = false; } }); $("input:eq(2)").blur(function(){ $("img:eq(2)").show(); var psw = $("input:eq(2)").val(); if(psw.length>=6&&psw.length<=20){ $("img:eq(2)").attr("src","图片3.png"); $("span:eq(2)").text("密码可用"); f3 = true; }else{ $("img:eq(2)").attr("src","图片2.png"); $("span:eq(2)").text("密码不可用"); f3 = false; } }); $("input:eq(3)").blur(function(){ $("img:eq(3)").show(); var psw1 = $("input:eq(2)").val(); var psw2 = $("input:eq(3)").val(); if(psw1==psw2){ $("img:eq(3)").attr("src","图片3.png"); $("span:eq(3)").text("密码一致"); f4 = true; }else{ $("img:eq(3)").attr("src","图片2.png"); $("span:eq(3)").text("两次密码不一致"); f4 = false; } }); $("input:eq(4)").click(function(){ if(f1&&f2&&f3&&f4){ alert("表单符合要求"); }else{ alert("表单有误"); } }); }); </script> <style type="text/css"> .t1{ background: #b3d4fc; text-align: right; } .t2{ border-right: none; } .t3{ border-left: none; } input{ background: lightgreen; } img{ width: 20px; height: 20px; } </style> </head> <body> <table border="1px" cellpadding="5px" cellspacing="0" style="margin: 20px auto"> <tr> <td class="t1">请填写您的Email地址:</td> <td class="t2"> <input type="text"> </td> <td class="t3"> <p>请填写有效的Email地址,在下一步中您将用此邮箱接收验证邮件。</p> <div> <img><span></span> </div> </td> </tr> <tr> <td class="t1">设置您在当当网的昵称:</td> <td class="t2"> <input type="text"> </td> <td class="t3"> <p class="name">您的昵称可以由小写英文字母、中文、数字组成,<br>长度4-20个字符,一个汉字为两个字符</p> <div> <img><span></span> </div> </td> </tr> <tr> <td class="t1">设置密码:</td> <td class="t2"> <input type="password"> </td> <td class="t3"> <p>您的密码可以由大小写英文字母、数字组成,长度6-20位</p> <div> <img><span></span> </div> </td> </tr> <tr> <td class="t1">再次输入您设置的密码:</td> <td class="t2"> <input type="password"> </td> <td class="t3"> <div> <img><span></span> </div> </td> </tr> <tr> <td colspan="3" class="t2" style="text-align: center"> <input type="button" value="注册" style="background: lightgray"> </td> </tr> </table> </body> </html>