一.简单验证
如何使用JS完成一个简单验证？
有一个可以完成表单验证的功能，但是很丑 （required）
在实现简单验之前，有几个 事件 大家跟我一起来认识一下吧：
onkeydown 当键盘被按下时
onkeyup 当键盘被松开时
onkeypress 当键盘被按下时(但是不识别功能键)
1.先创建一个表单
2.在script标签中写函数
3.调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<body>
<form id="myForm">
<p>名字:<input type="text" id="uname" οnkeyup="checkin(this)"/>
<span><i class="error"></i></span></p >
<p>密码:<input type="text" id="upwd" οnkeyup="checkin(this)"/>
<span><i class="error"></i></span></p >
<p>邮箱:<input type="text" id="uemail" οnkeyup="checkin(this)"/>
<span><i class="error"></i></span></p >
<p><button type="button">登录</button></p >
</form>
<script>
function checkin(obj){
var length=obj.value.length
var label =obj.parentElement.getElementsByClassName("error")[0];
if(length>0){ //判断是否有内容
if(length>=3&&length<=6){ //判断长度是否满足3~6
label.textContent="*U*" //如果满足条件则让error标签显示*U*
return true;
}
//如果长度不满足条件，那就输出这句话,并且返回false
label.textContent="长度必须在3-6之间";
return false;
}
//没有内容
label.textContent="长度必须大于0"
return false;
}
myForm.οnsubmit=()=>{
//如果条件不满足，需要阻止提交，需要返回一个false
var f1=checkin('uname')
var f2=checkin('upwd')
var f3=checkin('uemail')
return f1&&f2&&f3;
}
</script>
</body>
</html>
