前言:
一开始学HTML时,不会就经常百度、谷歌,这次的遇到的表单验证及提交问题我也搜过了,各路大神各显神通,答案各异,试过很多种方法,各种问题也层出不穷……现在我想写点我的想法,希望能给有需要的人一些帮助。
现在进入主题:如何验证表单?验证成功与否、是否提交?先声明,这里我把重点放在后面那个问题上,前面就简单验证。
废话不多说,直接上代码:(注:这个代码是可以运行的,可以自己试试,把重点放在js和表单里面!)
<!DOCTYPE html>
<html>
<head>
<title>表单验证之submit提交.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
form{
width: 340px; /*设置宽度,方便使其居中*/
margin: 40px auto auto auto; /*上右下左*/
font-size: 35px;
}
input{
margin-top: 5px;
height: 30px;
width: 12em;
margin-bottom: 5px;
}
#login{
font-family: 微软雅黑;
font-size: 40px;
text-align: center;
margin-top: 200px;
}
input[type="submit"],input[type="reset"] {
height: 25px;
width: 5em;
margin-left: 7px;
}
</style>
<script type="text/javascript">
function isSubmit(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//简单判断,如果账号密码都不为空串,返回true
//并添加console.log(),在控制台查看if里面判断语句的返回结果
if (username!="" && password!="") {
console.log(username!="" && password!="");
return true;
}else{
console.log(username!="" && password!="");
confirm("账号或密码为空,请填写完整");
return false;
}
}
</script>
</head>
<body >
<p id="login">用户登录:</p>
<form action="http://www.w3school.com.cn/" method="post" onsubmit="">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="username" name="username" onblur=""/></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" id="password" name="password" onblur=""/></td>
</tr>
<tr><td></td>
<td>
<input type="submit" value="登录" onclick="return isSubmit()"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
我这里只是验证账号密码是否有填写,如果都有填写返回true,反之返回false并给出提示。中间还用了一个小技巧,使用了console.log()方法,该方法输出的数据可在按F12后的控制台那里看到,方便分析。其它就不详解。
接下来我们来分析下:
情况1:(可行的)
<input type="submit" value="登录" onclick="return isSubmit()"/>
submit 这里的 οnclick="return isSubmit()" ,即点击时,执行方法isSubmit(),并带回返回值true或者false,如果是true则执行默认操作(即提交表单),如果返回false则禁止默认操作(即不提交表单)。
情况2:(不可行的)(注:没见过的可以自己改代码试试)
<input type="submit" value="登录" onclick="isSubmit()"/>
如果你仅仅是这样用:即不加return,那么就会出意外了,F12的控制台显示false,但是表单可以提交!!这是什么情况??我也不知道,不过好像很多初学者都会犯这个错误,我看到有位仁兄是这样说的:“return 表示从被调函数返回到主调函数继续执行,返回时可附带一个返回值, 如果返回是false则不继续执行”,我觉得说的挺好的(捂脸)……
情况3:(不可行的)
<input type="submit" value="登录" onsubmit="return isSubmit()"/>
这里是把js事件改为onsubmit事件,但是不起作用,因为这个事件是表单form都有的,而input的!(再看下面的,你就会明白。)
情况4:(可行的)
<form action="http://www.w3school.com.cn/" method="post" onsubmit="return isSubmit()">
把onsubmit事件放在form的标签里面,发现可以正常验证。
情况5:(不可行的)
<form action="http://www.w3school.com.cn/" method="post" onsubmit="isSubmit()">
去掉return后,测试发现,还是不行,果然还是得加上!
好了,就是这些了,这仅仅是个人拙见,如果发现有错,欢迎大家指正。