2017年6月19号 星期一 晴转多云 空气质量：轻度污染~良
内容：表单验证
01表单选择器；02String对象实现表单验证；03登录成功页面；
04验证错误信息的显示；05正则验证年龄；06Html5validaty
备注：老师归来第一节课，大家都很开心，学习的感觉又回来了~
一、表单选择器
老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>表单选择器</title></head><body><form method="post" id="myform">
<table> <tr> <td>用户名：</td> <td><input type="text"></td> </tr> <tr> <td>密码：</td> <td><input type="password"></td> </tr> <tr> <td>性别：</td> <td><input type="radio" value="女" name="sex">女 <input type="radio" value="男" name="sex">男</td> </tr> <tr> <td></td> <td><input type="button" value="普通按钮" onclick="disA()"> <input type="submit" value="登录"> <input type="reset" value="重置" onclick="resetA()"> </td> </tr> </table></form><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> //01.当用户名失去焦点的时候 submit按钮的value属性变成 注册 $(":text").blur(function(){ $(":submit").val("注册"); }) //02.当密码框获取焦点的时候 密码框增加背景色 $(":password").focus(function(){ $(this).css("background","red"); }) //03.当点击重置按钮的时候 让重置按钮消失 function resetA(){ $(":reset").css("display","none"); } //04.当点击登录按钮的时候 让按钮禁用 function disA(){ $(":button").attr("disabled","true"); } //05.点击单选按钮的时候 让所有隐藏的元素显示 $(":radio").click(function(){ $(":hidden").show(); }) /** * 属性过滤选择器 * :hidden 匹配所有隐藏的元素 * :disabled 匹配所有不可用的元素 * :enabled 匹配所有可用的元素 * :checked 匹配所有选中的元素 单选 多选 下拉框 * :selected 匹配下拉框选中的元素 */</script>
</body></html>
二、String对象实现表单验证
老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>String对象实现表单验证</title></head><body><form method="post" action="03登录成功页面.html"> <table> <tr> <td>用户名：</td> <td><input type="text" name="userName"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd"></td> </tr> <tr> <td>email：</td> <td><input type="email" name="email" required></td> </tr> <tr> <td></td> <td> <input type="submit" value="登录"></td> </tr> </table></form><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> /** * 两种方式可以实现对表单的验证 * 01.点击登录按钮的时候 登录按钮.click * 02.表单的提交事件 form表单.submit * * 验证的步骤 * 01.获取用户的输入 * 02.进行比对 * 03.返回结果 */ $("form").submit(function(){ //01.用户名不能为空 var userName= $("[name=userName]").val(); if(userName==""){ alert("用户名不能为空！"); return false; //表单不会提交 }
//02.密码的长度不能少于6位 var pwd= $("[name=pwd]").val(); if(pwd.length<6){ alert("密码长度不能小于6位！"); return false; //表单不会提交 }
/*03.邮箱必须包含@ 和 . var email= $("[name=email]").val(); if(email.indexOf("@")==-1||email.indexOf(".")==-1){ alert("邮箱格式不正确"); return false; //表单不会提交 }*/
//04.用户名不能包含数字 for(var i=0;i<userName.length;i++){ //不是数组 需要一个一个截取 var j= userName.substring(i,i+1); if(isNaN(j)==false){ alert("用户名中不能包含数字 "); return false; } } })
</script>
</body></html>
三、登录成功页面
老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> 恭喜您！ 登录成功！</body></html>
四、验证错误信息的显示
老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>错误信息的提示</title> <style type="text/css"> .errorName{ color: red; } .successName{ color: green; }
</style></head><body><form method="post" action="03登录成功页面.html"> <table> <tr> <td>用户名：</td> <td><input type="text" name="userName" required></td> <td id="errorName"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd"></td> </tr> <tr> <td>email：</td> <td><input type="email" name="email" required></td> </tr> <tr> <td></td> <td> <input type="submit" value="登录"></td> </tr> </table></form><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> //01.用户名不能为空 失去焦点事件 $("[name=userName]").blur(function(){ var userName= $("[name=userName]").val(); if(userName==""){ //获取空标签 $("#errorName").html("用户名不能为空！").addClass("errorName"); }else{ $("#errorName").html("用户名可用！").addClass("successName"); } })
</script>
</body></html>
五、正则验证年龄
老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>验证年龄</title></head><body><form> 年龄：<input type="text" name="age" pattern="/^12|13$/" required> <button type="submit">登录</button></form> </body></html>
六、Html5validaty
老师代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><form method="post" action="03登录成功页面.html"> <table> <tr> <td>用户名：</td> <td><input type="text" name="userName"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd"></td> </tr> <tr> <td>email：</td> <td><input type="email" name="email" id="email" required pattern="/^12|13$/"></td> </tr> <tr> <td></td> <td> <input type="submit" value="登录"></td> </tr> </table></form><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> //点击登录按钮的事件 $("[type=submit]").click(function(){ var eamil= document.getElementById("email"); //必填项 不能为空 if(eamil.validity.valueMissing==true){ //更改提示信息 eamil.setCustomValidity("email不能为空"); }else if(eamil.validity.patternMismatch==true){ eamil.setCustomValidity("email格式不正确"); }else{ eamil.setCustomValidity(""); } })
</script></body></html>
七、老师辛苦了！
时间： 2024-10-12 15:33:24