版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
登录界面提交数据的那些坑
简单提交数据的实现
- 简单的数据传递应该就是通过form表单提交input元素框中的内容，但是在提交之前应该对input中的数据进行判断，判断是否为空
判断用户输入信息是否为空，如果为空则不提交
- 这个还是比较简单的，只要通过js绑定input元素款，确定里面的val值是否为空即可，再在form表单元素的onsubmit上设置return ××（），设置一个函数如果为空返回false，如果不为空返回ture即可
显示错误提交信息
- 这个可以说是整个的精髓了，下面我做一个简易的登录界面，使用jq框架书写
html框架内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<!-- 导入jq框架 -->
<script src="js/jquery.min.js"></script>
<!-- 导入页面逻辑代码,必学先导入jq框架-->
<script src="js/blog.js"></script>
</head>
<body>
<form action="" onsubmit="return checkvalue();">
<!-- 新建一个外围最大的div元素 -->
<div id="log">
<!-- 将所有的元素和数据添加到div中 -->
<div class="title">
<h3>Login!</h3>
</div>
<div class="tip">
Login:
</div>
<div class="item">
<input type="text"
name="username"
id="username"
placeholder="UserName">
</div>
<div class="error" id="err1">用户名不能为空！</div>
<div class="item">
<input type="text"
name="password"
id="password"
placeholder="PassWord">
</div>
<div class="error" id="err2">密码不能为空</div>
<div class="btn">
<input type="submit" value="Login">
</div>
</div>
</form>
</body>
</html>
这里都没啥好说的，就是很简陋的登录系统呗
css代码
这里我的css代码就设置了一个，就是一开始对错误提示消息的隐藏。
#log>.error{
color: red;
display: none;
}
js代码
这里一个关键的点就是把获取input框内的信息和提交事件绑定在一起，否则你获得的只是你加载页面时的代码
// 获取元素对象并保存在变量中
var $form=$("form");
var $btn=$(".btn>input");
// 定义一个验证函数
function checkvalue(){
// 获取元素对象并保存在变量中
var $username=$("#username");
var $password=$("#password");
var $err1=$("#err1");
var $err2=$("#err2");
// 将错误显示都实在为不显示
$err1.hide();
$err2.hide();
// 当用户名和密码都不为空时
if($username.val()!=""&&$password.val()){
// 直接提交
return true;
}else{
// 如果用户名为空
if($(username).val()==""){
// 提示用户名称不为空的错误显示
$err1.show(250);
// 阻止提交
return false;
}else{
// 如果密码为空，提示密码的错误显示
$err2.show(250);
// 阻止提交
return false;
}
}
}