Django实战之搭建个人博客(表单js判空篇)

 

Content



该系列文章源码来自: 博主第一次手撸博客(Django)
温馨提示: 该系列教程不提供前端布局和美化方面的内容, 博主本行是后端, 在我的项目中前端部分采用的框架是 Materialize, 是谷歌 Material Design 设计风格的前端框架, 欲知详情请点击上方提供的仓库地址, 也可以 clone 下来看看实际效果, 如想使用修改我的项目源码, 请遵循 GPL v3 开源许可证


用途简介

通过Ajax或者其他方式向后端API发送数据后, 后端API可能要执行较多的SQL操作, 我们知道, 为了不让服务器的身体被掏空(即CPU和I/O不堪重负), 我们要尽可能的保证向服务器发送的是有效的数据, 避免服务器资源 白给 (wdnmd真就茄化了呗), 我们需要前端去做表单验证, 以免麻烦服务器多做一些不必要的后端验证导致SQL操作增加抢占服务器运算资源. 那么, 这篇教程带来的是 使用js对表单数据判断是否为空


开发环境

  • 操作系统: Manjaro Linux 18
  • Python版本: Python3

    提示: Manjaro把Python3作为默认的Python版本, 其他发行版可能默认版本是Python2, 如果默认为Python2, 以下出现的Python和pip命令请使用python3和pip3

  • Django版本: v2.1.5
  • jQuery版本: v3.3.1

HTML部分

1
2
3
4
5
6
7
8
9
10
<form class="col s-12" id="login-form">
<input type="text" id="username" maxlength="8" required onchange="isEmpty()">
<label for="username">用户名</label>

<input type="password" id="password" maxlength="16" required onchange="isEmpty()">
<label for="password">密码</label>

<button type="button" id="login-button" disabled>登录</button>
<button type="reset" disabled>重置</button>
</form>

注意在form表单的头部或者尾部添加 csrf_token (由于csrf_token字段会导致文章无法上传, 所以无奈删去): 官方资料: 跨站点请求伪造保护, 简单的说就是跨域访问是很发生危险的, 有时候不得不用, 所以需要跨域的时候, 加上这个会自动生成 接头暗号, 以保证一定的安全性

  • disabled 是禁用的意思, 如果用在按钮上, 这个按钮可能会变灰而且肯定会点下去无效的, 我们默认禁用按钮, 防止有人恶趣味(#手动滑稽)

onchang="isEmpty()" 是上一篇文章的彩蛋, 马上揭晓


js部分

1
2
3
4
5
6
7
8
9
10
11
function isEmpty() {
if ($('#username').val() !== "" && $('#password').val() !== "") {
$('#login-button').removeAttr('disabled');
$('#reset-button').removeAttr('disabled');
}
else {
// alert('不输入全就想登录? Naive!');
$('#login-button').attr({"disabled":"disabled"});
$('#reset-button').attr({"disabled":"disabled"});
}
}
  • $('#xxxx') 是jQuery的元素选择器, val() 方法是用来获取 <input> 标签中被输入的值
  • 简单科普一下这个奇怪的 !== 不等于号, 廖雪峰的js教程, 总的来说, 传统的 == 等于号 和 != 不等号存在设计缺陷, 为了避免一些不必要的问题, 等于号请全部使用 ===, 不等于号请全部使用 !==
  • removeAttr() 方法用来移除对应的HTML标签属性, attr() 方法用来添加对应的HTML标签属性.

简单说一下思路: 利用监听 change事件, change 事件是在输入发生了变化时触发, 可以多次触发, 所以我们在change事件上绑定自定义函数. 首先是判断是否为空字符串, 如果所有input标签的值都为空字符串, 让按钮不可用, 如果所有input标签的值都不为空字符串, 才启用按钮.


基本的实例讲完了, 相信大家很快就能举一反三