<h6>以前很少用到 form 表单的一些属性用它也只是关心样式如何,最近的项目中需要传值的,觉得 form 比 Ajax 方便一点就用的 form ,熟悉了之后才发现,
form 还是很的强大</h6>
<form class="form-horizontal" role="form" method="POST" action="Login">
<div class="form-group ">
<div class="col-sm-4">
<input type="text" class="form-control" id="phoneNumber"
onBlur="checkPhone()">
</div>
<label id="loginNamewarn">
<span class="warn">
![](error.png)
</span>
</label>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control" id="loginPassword"
onBlur="checkPassword()">
</div>
<label id="loginPasswarn">
<span class="warn">
![](error.png)
</span>
</label>
</div>
<button type="submit" class="loginSure">登录</button>
</form>
这是我项目中登录的代码,在填写了手机号失焦之后会触发 checkPhone 判断填写是否正确,如果不对就在后面提示。
<h5>页面显示</h5>
login.png<h5>判断后显示</h5>
error.png那么问题来了,今天打开发现填写的信息错误时,页面虽然会提示错误但是如果点击登录还是会把数据返回到后台,而这不是我想要的效果,查了一些问文档,然后找到了解决方法,其实只需要在提交那里添加一个判断即可。下面是我写的一个小栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action='test.html' method="post" name="Form">
<input type="submit" id='btn' value="提交">
</form>
</body>
</html>
运行时,网页上的URL显示:
1.png点击按钮后页面URL:
1.png可以发现点击提交,页面发生了跳转,但是如果加上判断:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action='test.html' method="post" name="Form">
<input type="submit" id='btn' value="提交" onclick="return check()">
</form>
<script>
function check() {
return false;
}
</script>
</body>
</html>
可以发现,不管怎么点击它的URL都是不会发生变化的:
1.png
网友评论