共计 2396 个字符，预计需要花费 6 分钟才能阅读完成。
form 表单提交时 onsubmit 返回调用的函数名和 name 属性值重复时不能调用的的问题前几天在解决问题发现，做提交表单验证的时候, 就发现自己的表单提交没有效果,
onsubmit 根本调用不到 check()函数, 将函数换个名称或者调用其他的都可以实现
一脸懵逼的情况下, 发现了设置的 name 属性值的其中一个和我们的函数名重复了
我们学习 js 的时候, 明确的讲过, 函数是 js 中的一等公民, 所有当函数和变量名重复的时候, 变量会被覆盖
但是这和我们的 name 属性值又有什么关系呢?
在网上找了一些资料, 才大致有些许了解, 但是还不是很通透
当我们的 onsubmit = “return check()” 的时候, 浏览器不能识别该 check 是我们的 name 属性值, 还是全局里面的一个函数, 也就是作用域的问题, 浏览器不知道自己访问的是谁的 check, 所以要告诉浏览器, 我们访问的是全局里面的 check 函数
也就是 这样就会调用我们的全局里面的 check()
全部代码如下;
[JavaScript] 纯文本查看 复制代码
?
<!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">
<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>
正文完
发表至： java
2019-10-31
