一、知识大纲
二、表单验证
1.form 表单
2.添加提交事件 id.οnsubmit=()=>{}
3.阻止表单的提交 需要返回 false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: #A52A2A;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 为什么需要使用正则 ！！！！表单验证-->
<!-- 第一种方式 <form action="" onsubmit="return check()"> -->
<form action="" id="myform">
<p>账号：<input type="text" id="username"><span id="l1"></span></p>
<p>密码：<input type="text" id="userpwd"><span id="l2"></span></p>
<p>邮箱：<input type="text" id="useremail"><span id="l3"></span></p>
<p><button>登录</button></p>
</form>
<script>
//添加提交事件(会具备返回值)
myform.onsubmit=()=>{
var s1=username.value
var s2=userpwd.value
var s3=useremail.value
var f=true
if(s1.length==0){
l1.textContent="请输入用户名"
f=false
}
if(s2.length==0){
l2.textContent="请输入密码"
f=false
}
if(s3.length==0){
l3.textContent="请输入邮箱"
f=false
}
//阻止表单的提交 需要返回false
return f
}
</script>
</body>
</html>
效果
三、表单验证进阶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: #A52A2A;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 为什么需要使用正则 ！！！！表单验证-->
<!-- 第一种方式 <form action="" onsubmit="return check()"> -->
<form action="" id="myform"><!-- onkeydown按下 onkeypress按一次 onkeyup松开-->
<p>账号：<input type="text" id="username" onkeyup="checklabel(this)"><span id="l1"></span></p>
<p>密码：<input type="text" id="userpwd" onkeyup="checklabel(this)"><span id="l2"></span></p>
<p>邮箱：<input type="text" id="useremail" onkeyup="checklabel(this)"><span id="l3"></span></p>
<p><button>登录</button></p>
</form>
<script>
//用来检查账号是否和规
function checklabel(obj){
var lenght=obj.value.length
var label=obj.nextElementSibling
if(lenght>0){//里面有内容
//名字的大小应该在3-6之间
if(lenght>=3&&lenght<=6){
label.textContent="笑脸"
return true
}
//不在区间之内
label.textContent="长度必须在3-6之间"
return false
}
//里面没有内容
label.textContent="长度必须大于零"
return false
}
//添加提交事件(会具备返回值)
myform.onsubmit=()=>{
var s1=username.value
var s2=userpwd.value
var s3=useremail.value
var f=true
if(s1.length==0){
l1.textContent="请输入用户名"
f=false
}
if(s2.length==0){
l2.textContent="请输入密码"
f=false
}
if(s3.length==0){
l3.textContent="请输入邮箱"
f=false
}
//阻止表单的提交 需要返回false
//return checkname()&&checkpwd()&&checkEmail()
var f1=checkname()
var f1=checkpwd()
var f1=checkemail()
return f1&&f2&&f3
}
</script>
</body>
</html>
四、正则
密码安全等级正则案例
<!DOCTYPE html>
<html lang="zwx">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="m1">
<span id="l1"></span>
<p>
密码等级<span id="l2"></span>
</p>
<script>
m1.onkeyup=function (){
//长度必须在6-10之间
var str=m1.value
if(str!=""){
//定义正则
var r1=/^\w{6,10}$/
// 数字 英文（小写 大写） .
var r2=/^.*[a-z].*$/
var r3=/^.*[A-Z].*$/
var r4=/^.*\d.*$/
//密码等级
var dj=""
//开始正则验证
if(r1.test(str)){
l1.textContent="O(∩_∩)O😄"
if(r2.test(str))dj+="☆"
if(r3.test(str))dj+="☆"
if(r4.test(str))dj+="☆"
l2.textContent=dj
return
}
//不满足
l1.textContent="不符合格式"
return
}
l1.textContent="不能为空"
}
</script>
</body>
</html>
五、省市联动（二级联动）
<!DOCTYPE html>
<html lang="zwx">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>
<script>
//数组怎么写?
//类型不限制
//长度不限制
//数组可以是字符串
var provinces=[]
//城市
provinces["四川省"]=["成都","汶川","乐山"]
provinces["湖南省"]=["长沙","怀化","永州"]
provinces["广东省"]=["深圳","广州","东莞"]
//省份怎么来
// for of 相当于foreach 遍历元素
// for in 遍历下标
for(let i in provinces){
//往省份的下拉框中添加选项
//<option value="i">i</option>
province.appendChild(new Option(i,i))
}
//城市里面放谁?
function setCity(name) {
for(let i of provinces[name]){
cities.appendChild(new Option(i,i))
}
}
setCity(province.value)
function myChange() {
//清空原来的选项
cities.innerHTML=""
//输入框 和 下拉框
setCity(province.value)
}
</script>
</body>
</html>
今天的分享到此为止，感谢大家的观看，路过大神评论区指点一下不足，需要跟多案例私信我哦，全程免费
3613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
