2017年6月19號課堂筆記
阿新 • • 發佈：2017-06-21
ddc class ted inpu indexof dcl 成功 require nan
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>
七、老師辛苦了！
2017年6月19號課堂筆記