基于Ajax和forms组件实现注册功能（含有代码）-js教程-PHP中文网

首页

web前端

js教程

基于Ajax和forms组件实现注册功能（含有代码）

亚连

May 21, 2018 pm 04:14 PM

ajax 实现

本文通过实例代码给大家分享了基于Ajax和forms组件实现注册功能,需要的朋友可以参考下

前端HTML

<!DOCTYPE html>
{% load static %}
{% get_static_prefix as getstatic %}
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="https://www.jd.com/favicon.ico">
  <link href="{{ getstatic }}plugins/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <title>注册页面</title>
  <style>
    .title-top {
      padding: 0;
      font-size: 21px;
      margin-top: 40px;
    }
    .form-padding {
      padding-right: 65px;
    }
    .has-feedback .country-code {
      width: 53px;
      text-align: right;
      padding-right: 5px;
    }
    .mobile-control-wrap {
      display: flex;
    }
    .mobile-num {
      margin-left: 10px;
    }
    .form-horizontal .form-group {
      margin-right: -15px;
      margin-left: -15px;
    }
    .body-box {
      margin-top: 70px;
      height: 567px;
      width: 68%;
    }
    .cnblogs-btn-blue {
      color: white;
      padding: 6px 14px;
      letter-spacing: 1em;
      padding-left: 2em;
      background-color: RGB(70, 136, 214);
      text-align: center;
    }
    .cnblogs-btn-blue :hover {
      color: white;
    }
    .navbar {
      background-color: RGB(40, 62, 92);
    }
    .side-img-box {
      height: 300px;
      position: relative;
      padding-left: 0;
      margin-top: 168px;
    }
    .side-img-box img {
      position: relative;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 8px;
    }
    .text-danger {
      float: right;
    }
    .img-thumbnail {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      margin-top: -10px;
    }
    #avatr_img {
      margin-left: 237px;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <p class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <p class="navbar-header">
      <img src="{{ getstatic }}img/TIM截图20180205110238.png">
    </p>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">首页</a></li>
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">帮助</a></li>
      </ul>
    </p><!-- /.navbar-collapse -->
  </p><!-- /.container-fluid -->
</nav>
<p class="container body-box" style="height: 567px;">
  <p class="center-block body-content">
    <!--头部提示-->
    <p class="hidden-xs title-top col-sm-12">
      注册新用户
      <hr class="head-hr">
    </p>
    <p class="form-wrap">
      <form class="form-horizontal col-sm-8 form-padding" role="form" id="registerForm" method="post"
         novalidate="novalidate">
        <!--每一行-->
        <p id="avatr_img" class="form-group">
          <label for="avatar">
            <img id="avatar_img" class="img-thumbnail" src="{{ getstatic }}img/registersideimg.png" alt="用户头像">
            头像
          </label>  
          <input type="file" style="display: none;" id="avatar">
        </p>
        <p class="form-group">
          <p class="col-sm-2 control-label">
            <label class="w4-2" for="Email">邮       箱</label>
          </p>
          <p class="col-sm-10 has-feedback">
            {{ register_form.email }}
            <span class="text-danger"></span>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-2 control-label">
            <label class="w4-4" for="DisplayName">昵称</label>
          </p>
          <p class="col-sm-10 has-feedback">
            {{ register_form.nik_name }}
            <span class="text-danger field-validation-error"><span id="DisplayName-error"></span></span>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-2 control-label">
            <label class="w4-2" for="Password">密       码</label>
          </p>
          <p class="col-sm-10 has-feedback">
            {{ register_form.password }}
            <span class="text-danger field-validation-error"></span>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-2 control-label">
            <label class="w4-4" for="ConfirmPassword">确认密码</label>
          </p>
          <p class="col-sm-10 has-feedback">
            {{ register_form.repeta_pwd }}
            <span class="text-danger field-validation-error"><span id="mobile-error"></span></span>
          </p>
        </p>
        <!--注册按钮-->
        <p class="form-group">
          <p class="col-sm-offset-2 col-sm-10">
            <span class="col-sm-12 ajax-error"></span>
            <input id="submitBtn" onclick="regesite()" type="button"
                class="btn ladda-button center-block cnblogs-btn-blue" value="登录">
          </p>
        </p>
        <!--协议提示-->
        <p class="col-sm-offset-2 register-sign">
          <span class="asterisk">*</span> “注册” 按钮，即表示您同意并愿意遵守 <a class="look-agreeon" target="_blank"
                                      href="//passport.cnblogs.com/agreement.html">用户协议</a>。
        </p>
        <!--hidden-->
        {% csrf_token %}
      </form>
      <p class="hidden-xs col-sm-4 side-img-box">
        <p class="side-line">
          <p></p>
        </p>
        <img src="{{ getstatic }}img/registersideimg.png">
      </p>
    </p>
  </p>
</p>
<script src="{{ getstatic }}js/jquery-3.2.1.min.js"></script>
<script src="{{ getstatic }}plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

登录后复制

上面的代码只是HTML ，而JavaScript在下面实例中

<script>
   $("#avatar").change(function () {
    var chooice_file = $(this)[0].files[0];
    var reader = new FileReader();// 注意这里，预览本地文件
    reader.readAsDataURL(chooice_file);
    reader.onload=function () {
      $("#avatar_img").attr("src",this.result)
    }
  })
  function regesite() {
    var formdata = new FormData(); //z注意这里 涉及文件上传
    formdata.append("email",$("#id_email").val());
    formdata.append("nik_name",$("#id_nik_name").val());
    formdata.append("password",$("#id_password").val());
    formdata.append("repeta_pwd",$("#id_repeta_pwd").val());
    formdata.append("valid_img",$("#avatar")[0].files[0]);
    formdata.append("csrfmiddlewaretoken",$("[name=&#39;csrfmiddlewaretoken&#39;]").val());
    $.ajax({
      url: "{% url "regeste" %}",
      type: "POST",
      data:formdata,
      contentType:false,
      processData:false,
      success: function (data) {
        response_data = JSON.parse(data)
        if(response_data.user){
          location.href="{% url " rel="external nofollow" login" %}"
        }else {
          // 清空上次错误信息
          $("form span").html("")
          $(".has-feedback").removeClass("has-error")
          $.each(response_data.error_msg,function (fiel, error_info) {
            // 显示错误信息
            $("#id_"+fiel).parent().addClass("has-error");
            $("#id_"+fiel).next().html(error_info[0]);//显示全局错误 // 注意这里
            if(fiel=="__all__"){
              $("#id_repeta_pwd").next().html(error_info[0]).css("color","red")
            }
          })
        }
      }
    })
  }
</script>

登录后复制

FileReader

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

设计RegisterForm组件

from django import forms
from . import models
from django.forms import widgets
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
class RegisterForm(forms.Form):
  nik_name = forms.CharField(max_length=32,
                widget=widgets.TextInput(attrs={"class":"form-control"}),
                error_messages={"required":"用户不能为空"})
  email = forms.EmailField(widget=widgets.EmailInput(attrs={"class":"form-control"}),
               error_messages={"required":"邮箱不能为空", "invalid":"邮箱格式错误"})
  password = forms.CharField(min_length=5, widget=widgets.PasswordInput(attrs={"class":"form-control"}),
                error_messages={"required": "密码不能为空",
                        "min_length":"最小长度5位",
                        }
                )
  repeta_pwd = forms.CharField(widget=widgets.PasswordInput(attrs={"class":"form-control"}),
                 error_messages={"required": "密码不能为空"})
  def clean_nik_name(self):
    name = self.cleaned_data.get("nik_name")
    users = models.UserInfo.objects.filter(nik_name=name)
    if not users:
      return name
    else:
      raise ValidationError("用户已存在")
  def clean(self): //全局钩子
    pwd = self.cleaned_data.get("password")
    repeta_pwd = self.cleaned_data.get("repeta_pwd")
    if pwd and repeta_pwd:
      if pwd == repeta_pwd:
        return self.cleaned_data
      else:
        raise ValidationError("两次密码不一致")
    else:
      return self.cleaned_data

登录后复制

服务器

def post(self,request):
    reg_response = {"user": None,"error_msg":""}
    register_form = RegisterForm(request.POST)
    if register_form.is_valid():
      email = request.POST.get("email")
      nik_name = request.POST.get("nik_name")
      password = request.POST.get("password")
      repeta_pwd = request.POST.get("repeta_pwd")
      valid = request.FILES.get("valid_img") #注意这里使用的request.FILES.get("")
      if not valid:
        valid = "avatardir/TIM图片20171209211626.gif"
      check_user = models.UserInfo.objects.create_user(username=nik_name,nik_name=nik_name, email=email,
                                password=password,
                                avatar=valid
                              ) # 注意这里保存导数据库中的是图片路径，并不是图片
      reg_response = {"user": "user", "error_msg": ""}
      return HttpResponse(json.dumps(reg_response))
    else:
      reg_response["error_msg"]=register_form.errors
      return HttpResponse(json.dumps(reg_response))

登录后复制

Model中 Userifor 的img

avatar = models.FileField(upload_to=&#39;avatar/&#39;, default="/avatar/default.gif", verbose_name="主键")

登录后复制

注意：

　　upload_to ：默认把文件夹创建至根目录下，如创建至指定位置，需要在setting中配置media。

如：希望用户上传的文件单独存储，在setting中配置，

MEDIA_ROOT= os.path.jion(BASE_DIR,"blog","media")
//此时，用户上传文件时，先创建并将文件保存至“putImg”文件夹中，“putImg”，然后将“putImg”放至对应的路径中。
# media 配置
url(r"^media/(?P<path>.*)",sever,{"document_root":setting.MEDIA_ROOT})

登录后复制

配置好上面的url 后，用户可以访media 文件夹下面的所有文件

注意：

 server ，是从django.views.static import server导入
　　　  from . import settings //url中的使用

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

Ajax使用步骤详解

Ajax实现跨域访问三种方法总结

jQuery使用ajax跨域获取数据步骤详解

以上是基于Ajax和forms组件实现注册功能（含有代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7564

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

101

显示更多

Related knowledge

华为手机如何实现双微信登录？ Mar 24, 2024 am 11:27 AM

华为手机如何实现双微信登录？随着社交媒体的兴起，微信已经成为人们日常生活中不可或缺的沟通工具之一。然而，许多人可能会遇到一个问题：在同一部手机上同时登录多个微信账号。对于华为手机用户来说，实现双微信登录并不困难，本文将介绍华为手机如何实现双微信登录的方法。首先，华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能，用户可以在手机上同

PHP编程指南：实现斐波那契数列的方法 Mar 20, 2024 pm 04:54 PM

编程语言PHP是一种用于Web开发的强大工具，能够支持多种不同的编程逻辑和算法。其中，实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中，将介绍如何使用PHP编程语言来实现斐波那契数列的方法，并附上具体的代码示例。斐波那契数列是一个数学上的序列，其定义如下：数列的第一个和第二个元素为1，从第三个元素开始，每个元素的值等于前两个元素的和。数列的前几个元

如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App

掌握Golang如何实现游戏开发的可能性 Mar 16, 2024 pm 12:57 PM

在当今的软件开发领域中，Golang（Go语言）作为一种高效、简洁、并发性强的编程语言，越来越受到开发者的青睐。其丰富的标准库和高效的并发特性使它成为游戏开发领域的一个备受关注的选择。本文将探讨如何利用Golang来实现游戏开发，并通过具体的代码示例来展示其强大的可能性。1.Golang在游戏开发中的优势作为一种静态类型语言，Golang在构建大型游戏系统

PHP游戏需求实现指南 Mar 11, 2024 am 08:45 AM

PHP游戏需求实现指南随着互联网的普及和发展，网页游戏的市场也越来越火爆。许多开发者希望利用PHP语言来开发自己的网页游戏，而实现游戏需求是其中一个关键步骤。本文将介绍如何利用PHP语言来实现常见的游戏需求，并提供具体的代码示例。1.创建游戏角色在网页游戏中，游戏角色是非常重要的元素。我们需要定义游戏角色的属性，比如姓名、等级、经验值等，并提供方法来操作这些

如何在Golang中实现精确除法运算 Feb 20, 2024 pm 10:51 PM

在Golang中实现精确除法运算是一个常见的需求，特别是在涉及金融计算或其它需要高精度计算的场景中。Golang的内置的除法运算符“/”是针对浮点数计算的，并且有时会出现精度丢失的问题。为了解决这个问题，我们可以借助第三方库或自定义函数来实现精确除法运算。一种常见的方法是使用math/big包中的Rat类型，它提供了分数的表示形式，可以用来实现精确的除法运算

PHP 与 Ajax：构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。

如何解决jQuery AJAX报错403的问题？ Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使

See all articles

基于Ajax和forms组件实现注册功能（含有代码）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题