2017年6月19号课堂笔记
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>
七、老师辛苦了！
