首页 > 代码库 > 2017年6月19号课堂笔记

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="http://www.mamicode.com/女" name="sex">女
<input type="radio" value="http://www.mamicode.com/男" name="sex">男</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="http://www.mamicode.com/普通按钮" onclick="disA()">
<input type="submit" value="http://www.mamicode.com/登录">
<input type="reset" value="http://www.mamicode.com/重置" onclick="resetA()">
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/登录"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/登录"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/登录"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://www.mamicode.com/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>

七、老师辛苦了!

技术分享

 

2017年6月19号课堂笔记