家人们，时隔几天我又带着新的知识来啦，最近工作比较忙，难得闲下来，翻开自己以前读书时期做的笔记，不知道还在上学的一些家人们，会不会有喜欢做笔记的习惯，如果没有的话，要养成噢，做笔记其实也在整理我们学习的知识，也方便当我们遗忘一些知识点的时候，翻开笔记去查阅，大家也要每天认真敲代码噢，敲几编和敲十几遍肯定会有区别的噢，好啦今天带大家学习表单验证，让我们进入知识的海洋中去，还是老样子,有不懂的在下方评论或者私信我噢，看到一定会回复给大家解答的噢。
一.课前温习
我们先来温习一下我们以前学的知识点，也是今天用的上的知识点
表单:<form></form>
下拉框:<select></select>
选项: <option><option>
<select>
<!-- option选项 value:后台的值 中间的湖南是显示出来的-->
<option value="湖南省">湖南省</option>
</select>
正则:
- 正则格式：/^ $/ 中间放内容 写法： /^\d$/
- 正则规则:
内容:
\d ：数字[0-9]
\D ：非数字
\w： 数字+英文+下划线[0-9a-zA-Z_ ]
\W: 非数字+英文+下划线
. : 任意字符
次数：
？：0-1次
+ ：至少一次
* ：0-任意次数
\d{5} :数个数字
\d{5-10}:最少五个最多十个
二.表单验证
当我们在一些网页上面登录或者注册时，用户名或者密码都会有限制的，只有我们符合条件才能注册成功，下方的代码有详细的讲解，这只是一个很简单的一个表单验证。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置提示字体的颜色 */
span{
color:red;
/* 加粗字体 */
font-weight:bold;
}
</style>
</head>
<body>
<!-- form表单 -->
<!--onsubmit提交事件 -->
<!--<form onsubmit="return check()"> -->
<form action="" id="myForm">
<!-- required 必须填写 -->
<!-- 表单验证 -->
<!-- onkeydown:按下 onkeyup:松开 onkeypress:按一次-->
<!-- 如果对文字进行判断使用松开-->
<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 len=obj.value.length;
// 拿到他的父类，通过class名拿到该标签，需要给span标签设置class名
// var i = obj.parentElement.getElementsByClassName("error")[0]
// 拿到他下一个相邻的标签，span标签
var i=obj.nextElementSibling;
if(len>0){
if(len>=3&&len<=6){
i.textContent="嘻嘻";
return true;
}
i.textContent="在3-6区间"
return false;
}
i.textContent="不能为空";
return false;
}
// 表单的提交事件
// 当返回的值为假时无法提交成功
// 当符合条件为真时提交成功
myForm.onsubmit=()=>{
var d1=checkLabel(userName);
var d2=checkLabel(userPwd);
var d3=checkLabel(userEmail);
return d1&&d2&&d3;
}
</script>
</body>
</html>
三.表单验证匹配正则
我们很多东西是有一些规范的，列如用户名我们只允许为数字或者只能为字母，和长度限制，这个时候使用我们的正则更加方便，大家看下方代码，文字无法表达我所表达的东西，那就使用代码给大家表达如何使
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
i{
/* 设置字体颜色 */
color:red;
/* 加粗字体 */
font-weight:bold;
}
</style>
</head>
<body>
<!-- 使用正则 -->
<!-- JS中的正则格式: /^ &/ -->
<form id="myForm" >
<p>用户名:<input id="userName" type="text" onkeyup="fn1(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="ii"></i></span></p>
<p>密码:<input id="userPwd" type="text" onkeyup="fn1(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="ii"></i></span></p>
<p>邮箱:<input id="userMe" type="text" onkeyup="fn1(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="ii"></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//判断是否符合条件
// obj:谁调用就是谁 rex:正则 text:提示语句
function fn1(obj,rex,text){
// 拿到该输入框的值的长度
var len=obj.value.length;
var i= obj.parentElement.getElementsByClassName("ii")[0]
if(len>0){
//判断是否满足正则的匹配
// 正则.test.字符串 开始匹配
if(rex.test(obj.value)){
i.textContent="嘻嘻";
return true;
}
i.textContent=text;
return false;
}
i.textContent="不能为空";
return false;
}
</script>
</body>
</html>
我们的密码会划分等级，当输入密码时只有数字时为一颗星，当有数字和字母两颗星，当数字字母还有下划线为三颗星。
该题目也是使用我们的正则来进行匹配，让大家更加牢记我们的正则如何使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input id="i"><span id="l1"></span>
<p >密码等级<span id="m1"></span></p>
</form>
<script>
// 当输入密码时只有数字时为一颗星，当有数字和字母两颗星，当数字字母还有下划线为三颗星
i.onkeyup=()=>{
// 拿到输入框里面的值
var str=i.value;
if(str!=""){
// 密码等级
var dj="";
// 正则
var s=/^\w{6,9}$/;
var d1=/^.*\d.*$/;
var d2=/^.*[a-z].*$/;
var d3=/^.*[A-Z].*$/;
if(s.test(str)){
l1.textContent="嘻嘻";
// 要满足字符长度有6-9是数字或者英文才可以进入
if(d1.test(str))dj+="☆";
if(d2.test(str))dj+="☆";
if(d3.test(str))dj+="☆";
m1.textContent=dj;
return;
}
l1.textContent="格式不符合"
}
l1.textContent="不能为空"
}
</script>
</body>
</html>
四.省市联动
省市联动：当点击该下拉框选中省份时，另外一个下拉框出现该省份的城市，就是我们的省市联动，省市联动在我们以后很多地方都是会使用到的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- select:下拉框 -->
<!-- option选项 value:后台的值 中间的湖南是显示出来的-->
<!-- onchange :改变事件 -->
<select id="province" onchange="myChange()">
</select>
<select id="cities"></select>
<script>
// 数组:
// 1.类型不限制
// 2.长度不限制
// 3.下标可以是字符串
var provinces=[]
// 城市
// 给该下标赋值
provinces ["湖南省"]=["长沙","郴州","湘潭"]
provinces ["湖北省"]=["武汉","襄阳","宜昌"]
provinces ["浙江省"]=["杭州","温州","台州"]
// foreach循环
// for of 相当于foreache 遍历元素
// for in遍历下标
for(let i in provinces){
// 往省份下拉框添加值
// 第一个i是value i是显示的值
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=""
// province.value 拿到下拉框里的值
setCity(province.value)
}
</script>
</body>
</html>
家人们今天的学习就到这里了哦，不定期更新噢，大家有不懂的评论或者私信，大家好好看代码去理解代码噢。
1771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
