Java script 06-CFANZ编程社区

一.简单验证
如何使用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>