Mark's blog

Content

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

用途简介

通过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>
  • 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标签的值都不为空字符串, 才启用按钮.

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

 上一页

Python3 Linux Django Web

 评论