1. js_表单验证的内容
表单验证概念
表单验证是javascript中高级选项之一
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证
被 JavaScript验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法
用户是否在输入框中输入了文本
如下图所示:
名字:
密码:
邮箱:
登录
2.表单验证方法
<!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>
————————————————
版权声明:本文为CSDN博主「Champion_me」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Champion_me/article/details/123329703
1. js_表单验证的内容
3.密码安全
<!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>
————————————————
版权声明:本文为CSDN博主「Champion_me」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Champion_me/article/details/123329703
4.联动
<!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>
————————————————
版权声明:本文为CSDN博主「Champion_me」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Champion_me/article/details/123329703