目录
用JS实现简单验证
想实现表单验证,首先我们得需要表单
<form action="" onsubmit="return check()"> //在提交时会返回一个参数
<p>名字:<input type="text" id="uname"/> //名字输入框
<span><i class="error"></i></span></p> //名字提示信息
<p>密码:<input type="text" id="upwd"/> //密码输入框(type应该为password,此处为了方便显示所以也使用text)
<span><i class="error"></i></span></p> //密码提示信息
<p>邮箱:<input type="text" id="uemail"/> //邮箱输入框
<span><i class="error"></i></span></p> //邮箱提示信息
<p><button type="button">登录</button></p> //表单中的按钮会默认识别为提交按钮
//当点击此按钮会返回一个boolean类型,成功为true,失败为false
</form>
做简单验证实质就是每次输入内容时调用某个函数做到验证,我们有以下几个事件可以使用:
onkeydowm 当键盘按下时
onkeyup 当键盘弹回时
onkeypress 当键盘完成一次敲击时
完成表单验证时,我们最好使用onkeyup当键盘按下时文本内容刚增加,此时还检测不到输入框是否给到值,只有弹回时,才检测得到输入框的内容,当键盘完成一次敲击同理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<body>
<form id="myForm">
<p>名字:<input type="text" id="uname" onkeyup="checkin(this)"/>
<span><i class="error"></i></span></p>
<p>密码:<input type="text" id="upwd" onkeyup="checkin(this)"/>
<span><i class="error"></i></span></p>
<p>邮箱:<input type="text" id="uemail" onkeyup="checkin(this)"/>
<span><i class="error"></i></span></p>
<p><button type="button">登录</button></p>
</form>
<script type="text/javascript">
function checkin(obj){
var length=obj.value.length //得到input标签值的长度
var label =obj.parentElement.getElementsByClassName("error")[0] //通过input标签父类得到error标签
if(length>0){ //判断input标签是否有内容
if(length>=3&&length<=6){ //判断input标签值得长度是否满足3到6
label.textContent="√" //如果满足条件则让error标签显示√
return true
}
label.textContent="长度必须在3-6之间" //如果不在区间内,则输出这句话,并且返回false
return false
}
label.textContent="长度必须大于0" //如果input标签无内容
return false
}
myForm.onsubmit=()=>{
//如果需要阻止表单提交则要返回false
var f1=checkin('uname')
var f2=checkin('upwd')
var f3=checkin('uemail')
return f1&&f2&&f3
}
</script>
</body>
</html>
这样就可以实现表格的简单判断
正则验证
正则表达式规则:
内容方面:
- \d 数字[0-9]
- \D 非数字 ^[0-9]
- \w 数字+英文+下划线 [0-9a-zA-Z]
- \W 非数字+英文+下划线 ^[0-9a-zA-Z]
- . 任意字符
次数方面:
- ? 0-1次
- + 至少一次
- * 0-任意次
- \d{5} 五个数字
- \d{5,10} 最少五次,最多10次
正则表达式注意事项:
规则必须以/^开头
规则必须以$/结尾
规则只需要\d,而不是\\d
定义正则对象:var rex=/^\d{5}$/
使用正则对象:rex.test("321")
正则的运用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!--
为什么需要使用正则!!!! 表单验证
-->
<!--<form action="" onsubmit="return check()">-->
<form action="" id="myForm">
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查名字是否合规
function checkLabel(obj,rex,tip) {
var length = obj.value.length
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//内容在正则匹配之间
if (rex.test(obj.value)) {
label.textContent = "😊"
return true
}
//不在区间之内
label.textContent = tip
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName)
var f2 = checkLabel(userEmail)
var f3 = checkLabel(userPwd)
return f1 && f2 && f3
}
</script>
</body>
</html>
实现二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>
<script>
//JS数组特点:
//类型不限制
//长度不限制
//数组可以是字符串
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>
你要尽全力保护你的梦想。那些嘲笑你梦想的人,他们注定失败,他们想把你变成和他们一样。我坚信,只要心中有梦想,我就会与众不同。你也是。