用jQuery做一个简单的用户注册页面

作者：BerenCamlost

1 需求分析

1. 用户登录界面涉及到基本HTML的页面、CSS样式的设计、JS的渲染。但是最重要的是分析出哪个<input>没有输入，或者输入的有问题。
2. 基本配置
   • 软件：PyCharm
   • 语言：HTML、Python、CSS、Javascript、jQuery
   • 框架：Django

2 首先搭建一个比较看得过去的页面

• 首先我从网上找了一些模板，取精去糟，把各种模板组合在一起
• 页面的static文件夹链接：百度网盘链接
• 最终做出来的效果如下图所示：
  
• 这个背景居然是可以每2秒切换一次的，下载的模板太厉害了哈哈哈

3 言归正传

强烈建议将作者的static文件下载下来一起看，不然下面的各种类名可能让你抓狂

3.1

• 首先我们在点击注册的时候应该判断每个文本框内是不是写入了东西，如果啥都没写入就尴尬了。
  有如下两种方法

1. 在HTML中的<input>标签中规定minlength=‘1’

<input type="text" name="name" class="username" placeholder="姓名" value="{{ name|default:'' }}" maxlength="20" minlength='1'>

2. 使用jquery判断输入是否为空（这才是我们的重点）

3.2 思路

1. 从HTML中拿到数据（通过class名的形式）
2. 判断内容是不是空
3. 如果是空，则将文本框后边的叉叉显示出来
   
4. 将焦点定位在所判断的文本框内

3.3 代码：

• 【注意】：我设置的<div class="page-container " id="main">

jQuery(document).ready(function() {

    $('.page-container form').submit(function(){
        var username = $(this).find('.username').val();
        var password = $(this).find('.password').val();
        if(username == '') {
            $(this).find('.error').fadeOut('fast', function(){
                $(this).css('top', '27px');
            });
            $(this).find('.error').fadeIn('fast', function(){
                $(this).parent().find('.username').focus();
            });
            return false;
        }
        if(password == '') {
            $(this).find('.error').fadeOut('fast', function(){
                $(this).css('top', '96px');
            });
            $(this).find('.error').fadeIn('fast', function(){
                $(this).parent().find('.password').focus();
            });
            return false;
        }
    });

    $('.page-container form .username, .page-container form .password').keyup(function(){
        $(this).parent().find('.error').fadeOut('fast');
    });
}

4 进阶：判断两次输入的密码是否相同

1. 这首先需要拿到两次输入的密码
2. 然后进行判断是否相同
3. 如果不相同，则显示如下样式：
   
4. 将焦点定位在第一个密码输入框
5. 清空两个输入框中的内容，方便用户输入。

代码：

• 【注意】：这里我将标签div的类名改成了<div class="page-register" id="main">

    $('.page-register form').submit(function(){
        var username = $(this).find('.username').val();
        var student_ID = $(this).find('.student_ID').val();
        var password = $(this).find('.password').val();
        var password_check = $(this).find('.password_check').val();
        if(username === '') {
            $(this).find('.error').fadeOut('fast', function(){
                $(this).css('top', '27px');
            });
            $(this).find('.error').fadeIn('fast', function(){
                $(this).parent().find('.username').focus();
            });
            return false;
        }
        if(student_ID === '') {
            $(this).find('.error').fadeOut('fast', function(){
                $(this).css('top', '96px');
            });
            $(this).find('.error').fadeIn('fast', function(){
                $(this).parent().find('.student_ID').focus();
            });
            return false;
        }
        if(password === '') {
            $(this).find('.error').fadeOut('fast', function(){
                $(this).css('top', '165px');
            });
            $(this).find('.error').fadeIn('fast', function(){
                $(this).parent().find('.password').focus();
            });
            return false;
        }
        if(password_check !== password) {
            $(this).find('.error_check').fadeOut('fast', function(){
                $(this).css('top', '234px', );
            });
            $(this).find('.error_check').fadeIn('fast', function(){
                $(this).parent().find('.password').focus().val('');
                $(this).parent().find('.password_check').val('');
            });
            return false;
        }

    });

    $('.page-register form .username, .page-register form .student_ID, .page-register form .password， .page-register form .password_check').keyup(function(){
        $(this).parent().find('.error').fadeOut('fast');
        $(this).parent().find('.error_check').fadeOut('fast');
    });

5 验证码

• 为了保证网站的正常运作，防止无限注册用户，可以加入验证码进行验证。
• 有关使用Python生成验证码的方式，请参考作者的另一篇博客：用Python写一个自动生成简单验证码图片的程序