目录
前言：
对HTML感兴趣的一定知道<form>这个标签代表什么，没错，它就是表单，本期文章小阿飞来教大家一些常用的表单验证叭
正文内容：
一. 简单表单验证
简单的表单验证常用的有：
用户名，密码，邮箱的验证
表单提交需要满足的所有条件
给出未填写提示
长度限制
补充知识：
onsubmit：提交事件
标签的id.value：通过标签的id获取标签的值
返回假return false：阻止表单提交
return true： 提交表单标签的id.textContent：设置标签的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
span{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<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添加提交事件
// 提交事件具备返回值
myForm.onsubmit=()=>{
// 得到名字输入框的值
var name1=userName.value
var pwd1=userPwd.value
var email1=userEmail.value
// 1.阻止表单提交 返回假return false
// 2.return true 提交表单
var f=true
if(name1.length==0){
l1.textContent='请输入用户名'设置标签的内容
f=false//为空则不提交
}
if(pwd1.length==0){
l2.textContent='请输入密码'
f=false
}
if(email1.length==0){
l3.textContent='请输入邮箱'
f=false
}
// 最后记得返回f
return f
}
</script>
</body>
</html>
上面这个表单验证功能还不是很强大，那么想要增强它的功能，可以增加输入框内容和类型的验证，也可以使用正则进行表单验证
二. 使用正则进行表单验证
1.对输入框内容的长度和类型进行验证
补充知识：
键盘监听事件：
onkeyup：当键盘松开后执行
onkeydown：当按下一个按键时执行
onkeypress：用户按下键盘按钮时执行
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<form id='myForm'>
<p>名字: <input type="text" id="uname" onkeyup="checkLable(this)"/>
<span><i class='error'></i></span></p>
<p>密码: <input type="text" id="upwd" onkeyup="checkLable(this)"/>
<span><i class='error'></i></span></p>
<p>邮箱: <input type="text" id="uemail" onkeyup="checkLable(this)"/>
<span><i class='error'></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//对三个输入框进行验证的函数
function checkLable(obj){//传入对象input
var length=obj.value.length
//拿到i标签
// obj.parentElement.getElementsByTagName('error')是一个集合
//每调用一次判断一个i标签
var label=obj.parentElement.getElementsByClassName('error')[0]
// length是数字类型,可以做boolean判断
if(length){//=if(length>0)
//输入框有内容
// 名字在3-6个字
if(length>=3&&length<=6){
label.textContent='笑脸'
return true//只有进入这里才能提交表单
}
//不在3-6个字之间 省略else
label.textContent='字数只能在3-6个字之间'
return false//如果进入这里了就中断代码不让它运行到下面去
}
//输入框没有内容 length<0 省略else
label.textContent='不能为空'
return false//不能提交表单
}
// 给myForm添加提交事件
// 提交事件具备返回值
myForm.onsubmit=()=>{
// 1.阻止表单提交 返回假return false
// 2.return true 提交表单
//a, 运用短路概念判断表单是否提交:&&中有一个为假就会返回false:
//点击一次登录就判断一次是否为空 return checkName()&&checkPwd()&&checkEmail()
//b,点击一次登录一次性判断所有输入框是否为空:详见运行效果:
var f1=checkLable(uname)
var f1=checkLable(upwd)
var f1=checkLable(uemail)
return f1&&f2&&f3
}
</script>
</body>
</html>
运行效果如下：
注：只有当三个输入框的提示全为“笑脸”,表单才可以提交成功，才会清空输入框数据！
2.使用正则进行表单验证
这里先补充一些正则的基本知识：
正则的注意事项：
必须以/^开头，必须以$/结尾
只需要\d,而不是\\d
定义正则对象: var rex=/^\d{5}$/
使用正则对象：rex.test('要匹配正则的对象')
使用正则表达式来对数据格式进行判断：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录最终版本</title>
<style type="text/css">
span{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form id='myForm'>
<!-- 在输入框后再放一个span标签 -->
<!-- onkeydown没有onkeyup准确 -->
<p>名字: <input type="text" id="uname" onkeyup="checkLable(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6且只能是字母')"/>
<span><i class='error'></i></span></p>
<p>密码: <input type="text" id="upwd" onkeyup="checkLable(this,/^\w{6,10}$/,'密码的长度在6-10且只能是数字')"/>
<span><i class='error'></i></span></p>
<p>邮箱: <input type="text" id="uemail" onkeyup="checkLable(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱格式不准确')"/>
<span><i class='error'></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
function checkLable(obj,rex,tip){//传入对象和正则
var length=obj.value.length
//拿到i标签
// obj.parentElement.getElementsByTagName('error')是一个集合
var label=obj.parentElement.getElementsByClassName('error')[0]
// length是数字类型,可以做boolean判断
if(length){//=if(length>0)
// 输入框内容在正则匹配之间
if(rex.test(obj.value)){//根据obj输入框的值匹配正则
label.textContent='输入正确'
return true//只有进入这里才能提交表单
}
//不在正则匹配之间 省略else
label.textContent=tip
return false//如果进入这里了就中断代码不让它运行到下面去
}
//输入框没有内容 length<0 省略else
label.textContent='不能为空'
return false//不能提交表单
}
// 给myForm添加提交事件
// 提交事件具备返回值
myForm.onsubmit=()=>{
// 1.阻止表单提交 返回假return false
// 2.return true 提交表单
//a, 运用短路概念判断表单是否提交:&&中有一个为假就会返回false:
//点击一次登录就判断一次是否为空 return checkName()&&checkPwd()&&checkEmail()
//b,点击一次登录一次性判断所有输入框是否为空:详见运行效果:
var f1=checkLable(uname,/^[a-zA-Z]{3,6}$/)
var f1=checkLable(upwd,/^\w{6,10}$/)
var f1=checkLable(uemail,/^\w+[.]\w+@\w+[.]\w+$/)
return f1&&f2&&f3
}
</script>
</body>
</html>
运行如下(表单提交不了的情况)：
表单能够正确提交的情况：
3. 省市连动
省市连动主要是针对需要用户填写地址的表单的验证
补充知识：
<select> </select>：下拉框
onchange：给标签添加改变事件
<option> </option>：拉框的选项
var 数组名=[]：定义数组，数组类型不限制，长度不限制
ps['xxx']：xxx是数组的下标，xxx可以是字符串类型
for(let i in 数组名)：相当于foreach 遍历数组中的元素
for(let i in 数组名[传入下标 i ])：遍历数组中的下标
标签的id.value：通过标签的id获取标签的值
试例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市联动</title>
<!-- <select>下拉框</select> -->
</head>
<body>
<!-- 给下拉框添加改变事件：onchange -->
<select id='pr' onchange="mychange()">
<!-- option:拉框的选项 -->
</select>
<select id='ct'>
</select>
<!-- pr: 省份下拉框id
ct:城市下拉框
ps: 省份数组-->
<script type="text/javascript">
//定义数组，类型不限制，长度不限制
var ps=[]//省份数组
//省份数组下标可以是字符串
//省下面的城市
ps['湖南省']=['长沙','湘潭']
ps['湖北省']=['武汉','恩施']
ps['广东省']=['广州','深圳']
// 1给省份赋值
// for of 相当于foreach 遍历元素
// for in 遍历下标
for(let i in ps){//i是provinces数组的下标
//往省份的下拉框中添加选项Option
// <option value ="i">i</option>
pr.appendChild(new Option(i,i))
}
// 2给省份对应的城市下拉框的选项赋值
function setcity(pn){
for(let i of ps[pn]){
ct.appendChild(new Option(i,i))
}
}
// 在网页打开时就赋值
setcity(pr.value)
// 改变事件触发时调用的函数：
function mychange(){// 每次省份下拉框改变时调用的韩式
// 省份下拉框每次改变都要清空原来城市下拉框的值
ct.innerHTML=''
// 输入框和下拉框才有value
// console.log(provinces.value)
// provinces[湖南省]=['长沙','湘潭']
// 2给省份对应的城市下拉框的选项重新赋值
setcity(pr.value)
}
</script>
</body>
</html>
运行结果如下：
本期文章到这里就结束了，对大家有帮助的话就点个赞叭^_^
感 谢 阅 读
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
