前几天在做提交表单验证的时候,就发现自己的表单提交没有效果,
onsubmit根本调用不到check()函数,将函数换个名称或者调用其他的都可以实现
一脸懵逼的情况下,发现了设置的name属性值的其中一个和我们的函数名重复了
我们学习js的时候,明确的讲过,函数是js中的一等公民,所有当函数和变量名重复的时候,变量会被覆盖
但是这和我们的name属性值又有什么关系呢?
在网上找了一些资料,才大致有些许了解,但是还不是很通透
当我们的onsubmit = "return check()" 的时候,浏览器不能识别该check是我们的name属性值,还是全局里面的一个函数,也就是作用域的问题,浏览器不知道自己访问的是谁的check,所以要告诉浏览器,我们访问的是全局里面的check函数
也就是 onsubmit = "return window.check()" 这样就会调用我们的全局里面的check()
全部代码如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="css01.css">
</head>
<body>
<div id="load_div">
<form action="#" method="post" οnsubmit="return window.check();">
<table>
<tr>
<td colspan="3">
<font>会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td colspan="2"><input type="text" name="username" placeholder="请输入用户名" id="usernameid"></td>
</tr>
<tr>
<td>密码</td>
<td colspan="2"><input type="password" name="password" placeholder="请输入密码" id="passwordid"></td>
</tr>
<tr>
<td>确认密码</td>
<td colspan="2"><input type="password" name="repassword" placeholder="请输确认密码" id="repasswordid"></td>
</tr>
<tr>
<td>Email</td>
<td colspan="2"><input type="text" name="email" placeholder="请输入邮箱" id="emailid"></td>
</tr>
<tr>
<td>姓名</td>
<td colspan="2"><input type="text" name="realname" placeholder="请输入用姓名" id="realnameid"></td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td>出生日期</td>
<td colspan="2"><input type="date" name="birthday"></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="check" id="testid"></td>
<td><img src="img/checkcode.jpg" alt=""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册" class="btn"></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
// debugger;
// var btn = document.querySelector('.btn')
// btn.onclick = function(){
// check()
// }
function check(){
// alert(1);
var uesername = document.getElementById('usernameid').value;
if (uesername == '') {
alert("用户名不能为空");
return false;
}
var password = document.getElementById('passwordid').value;
if (password == '') {
alert("密码不能为空");
return false;
}
var repassword = document.getElementById('repasswordid').value;
if (repassword !== password) {
alert("两次输入密码不一致，请重新输入");
return false;
}
var email = document.getElementById('emailid').value;
if (email == "") {
alert("邮箱不能为空");
return false;
}
var realname = document.getElementById('realnameid').value;
if (realname == '') {
alert("姓名不能为空");
return false;
}
var test = document.getElementById('testid').value;
if (test == '') {
alert("验证码不能为空");
return false;
}
}
</script>
</form>
</div>
</body>
</html>