JavaScript学习记录《二》
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>初次网</title>
</head>
<body>
<table>
<!--第一行-->
<tr>
<td>姓名：</td>
<td>诗栋</td>
</tr>
<!--第二行-->
<tr>
<td rowspan="2">喜欢水果：</td>
<td>苹果</td>
</tr>
<!--第三行-->
<tr>
<td>香蕉</td>
</tr>
</table>
<img id="Light" scr="时钟光影.jpg" width="450" height="450" /> <br />
<div class="cls">传统教育</div> <br />
<div class="cls">诗栋无敌</div> <br />
<input type="checkbox" name="hobby" />电影
<input type="checkbox" name="hobby" />旅游
<input type="checkbox" name="hobby" />游戏
<br />
<script>
//Location:地址栏对象；属性：href
/*
alert("要跳转了！")
// location.href = "http://www.baidu.com";
document.write("3秒跳转到首页。。。");
setTimeout(
function () {
location.href = "http://www.baidu.com";
}, 3000
)
*/
//DOM:文档对象模型：将标记语言的各个组成部分封装成对象
/*
* document:
* Element:
* Attribute:
* Text:文本对象
* Comment：注释对象
* */
/*
javaScript通过DOm，就能够对HTML进行操作了
.改变HTML元素的内容
.改变html元素的样式（CSS）
.对HTML DOM事件作出反应
.添加和删除HTML元素
*/
/*
* DOM:
*
1 .获取Element对象
2 .常见HTML Element对象的使用
*/
// 1.获取Element对象; Element:元素对象
/*
.getElementById() 根据id属性值获取，返回一个Element对象
.getElementsByTagName() 根据标签名称获取，返回Element对象数组
.getElementsByName() 根据name属性值获取，返回Element对象数组
.getElementsByClassName() 根据class属性值获取，返回Element对象数组
*/
// var img = document.getElementById("img");
//alert(img);
var img = document.getElementById("Light");
img.src = "周传雄.jpg";
var divs = document.getElementsByTagName("div");
/*
* style:设置元素CSS样式
* InnerHTML:设置元素内容
* */
for (let i = 0; i < divs.length; i++) {
// divs[i].style.color = "red";
divs[i].innerHTML = "hahahha"
divs[i].style.color = "red";
}
//alert(divs.length);
/*
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);//[object HTMLDivElement]
}
*/
var hobbys = document.getElementsByName("hobby");
/*
for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);//[object HTMLInputElement]
}
*/
var clss = document.getElementsByClassName("cls");
/*
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);//[object HTMLDivElement]
}
*/
// 2.常见HTML Element对象的使用
//1-src 2-cheched设置或返回checkbox是否应被选中：checkboxObject.check=true|false;
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
//alert(hobbys[i]);//[object HTMLInputElement]
hobbys[i].checked = true;//全选中
}
</script>
</body>
</html>2022-10-11
2022-10-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>
欢迎注册
</h1>
<span>已有账号？</span> <a href="#">登陆</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>
用户名
</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display:none">
用户名不太受欢迎
</span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="ree_msg" style="display: none">
密码格式有误
</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">
手机号码格式错误
</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注册" type="submit" id="reg_bin">
</div>
<br class="clear">
</form>
</div>
<script>
//1.验证用户名是否符合规则
//1-1:获取用户名的输入框：
var usernameInput=document.getElementById("username");
//1-2:绑定onblur事件 失去焦点
usernameInput.onblur=checkUsername;
function checkUsername(){
//1-3:获取用户输入的用户名
var username=usernameInput.value.trim();//实现错误啊？
//alert(username);
var flag=username.length>=6&&username.length<=12;
//1-4:判断用户名是否符合规则：长度：6-12
if(flag){
//符合规则
document.getElementById("username_err").style.display='none';
}else{
//不符合规则
document.getElementById("username_err").style.display='';
}
return flag;
}
//1.验证密码是否符合规则
//1-1:获取密码的输入框：
var passwordInput=document.getElementById("password");
//1-2:绑定onblur事件 失去焦点
passwordInput.onblur=checkPassword;
function checkPassword(){
//1-3:获取用户输入的密码
var password=passwordInput.value.trim();//实现错误啊？
// alert(password);
var flag=password.length>=6&&password.length<=12;
//1-4:判断密码是否符合规则：长度：6-12
if(flag){
//符合规则
document.getElementById("password_err").style.display='none';
}else{
//不符合规则
document.getElementById("password_err").style.display='';
}
return flag;
}
//1.验证手机号是否符合规则
//1-1:获取手机号的输入框：
var telInput=document.getElementById("tel");
//1-2:绑定onblur事件 失去焦点
telInput.onblur=checkTel;
function checkTel(){
//1-3:获取用户输入的手机号
var tel=telInput.value.trim();//实现错误啊？
//alert(tel);
var flag=tel.length==11;
//1-4:判断手机号是否符合规则：长度：6-12
if(flag){
//符合规则
document.getElementById("tel_err").style.display='none';
}else{
//不符合规则
document.getElementById("tel_err").style.display='';
}
return flag;
}
//1.获取表单对象
var regForm=document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsubmit=function(){
//挨个判断每一个表单项是否符合要求，如果有一个不符合，则返回false
var flag=checkUsername()&&checkPassword()&&checkTel();
return flag;
}
//运行后提交表单后：
//file:///E:/VSCode/VS%E4%BB%A3%E7%A0%81/Untitled-1.html?
//username=sghsghd&password=gsghdha&tel=13146789136#
</script>
</body>
</html>
运用正则表达式后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>
欢迎注册
</h1>
<span>已有账号？</span> <a href="#">登陆</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>
用户名
</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display:none">
用户名不太受欢迎
</span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="ree_msg" style="display: none">
密码格式有误
</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">
手机号码格式错误
</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注册" type="submit" id="reg_bin">
</div>
<br class="clear">
</form>
</div>
<script>
//1.验证用户名是否符合规则
//1-1:获取用户名的输入框：
var usernameInput=document.getElementById("username");
//1-2:绑定onblur事件 失去焦点
usernameInput.onblur=checkUsername;
function checkUsername(){
//1-3:获取用户输入的用户名
var username=usernameInput.value.trim();//实现错误啊？
//alert(username);
//var flag=username.length>=6&&username.length<=12;
//1-4:判断用户名是否符合规则：长度：6-12,单词字符组成（正则表达式）
var reg=/^\w{6,12}$/;
reg.test(username);
var flag= reg.test(username);
if(flag){
//符合规则
document.getElementById("username_err").style.display='none';
}else{
//不符合规则
document.getElementById("username_err").style.display='';
}
return flag;
}
//1.验证密码是否符合规则
//1-1:获取密码的输入框：
var passwordInput=document.getElementById("password");
//1-2:绑定onblur事件 失去焦点
passwordInput.onblur=checkPassword;
function checkPassword(){
//1-3:获取用户输入的密码
var password=passwordInput.value.trim();//实现错误啊？
// alert(password);
//var flag=password.length>=6&&password.length<=12;
//1-4:判断密码是否符合规则：长度：6-12
var reg=/^\w{6,12}$/;
reg.test(password);
var flag= reg.test(password);
if(flag){
//符合规则
document.getElementById("password_err").style.display='none';
}else{
//不符合规则
document.getElementById("password_err").style.display='';
}
return flag;
}
//1.验证手机号是否符合规则
//1-1:获取手机号的输入框：
var telInput=document.getElementById("tel");
//1-2:绑定onblur事件 失去焦点
telInput.onblur=checkTel;
function checkTel(){
//1-3:获取用户输入的手机号
var tel=telInput.value.trim();//实现错误啊？
//alert(tel);
//var flag=tel.length==11;
//1-4:判断手机号是否符合规则：长度：6-12,数字组成，第一位是1
var reg=/^[1]\d{10}$/;
var flag=reg.test(tel);
if(flag){
//符合规则
document.getElementById("tel_err").style.display='none';
}else{
//不符合规则
document.getElementById("tel_err").style.display='';
}
return flag;
}
//1.获取表单对象
var regForm=document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsubmit=function(){
//挨个判断每一个表单项是否符合要求，如果有一个不符合，则返回false
var flag=checkUsername()&&checkPassword()&&checkTel();
return flag;
}
//运行后提交表单后：
//file:///E:/VSCode/VS%E4%BB%A3%E7%A0%81/Untitled-1.html?
//username=sghsghd&password=gsghdha&tel=13146789136#
</script>
</body>
</html>
扫一扫
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
