前端html
<div class="agile-row"> <h3>注册</h3> {# 注册的开始#} <div class="login-agileits-top"> <div class=row> <form class="form-horizontal col-md-8 form-padding" role=form id=registerForm method=post onsubmit="return false"> {% csrf_token %} <div class="form-space-top d-none d-sm-block"></div> <div class="form-group form-row"> <div class="col-sm-2 control-label"><label class=w4-2 for=Email></label></div> <div class="col-sm-10 has-feedback"><input class=form-control placeholder=邮箱：可通过邮箱找回密码 type=email data-val=true data-val-checkemailpostfix=不支持该邮箱后缀 data-val-email=邮箱格式错误 data-val-length=邮箱地址不能超过120个字符 data-val-length-max=120 data-val-regex=邮箱地址错误或不支持 data-val-regex-pattern="[\w!#\$%&'\*\+\-\/=\^_`{\|}~.]+@([\w-]+\.)+(com|net|cn|org|me|cc|biz)$" data-val-remote="'邮箱' is invalid." data-val-remote-additionalfields=*.Email data-val-remote-url=/Account/CheckEmail data-val-required=请输入邮箱地址 id=Email name=member_email> <span class="text-danger field-validation-valid" data-valmsg-for=Email data-valmsg-replace=true></span></div> </div> <div class="form-group form-row"> <div class="col-sm-2 control-label"><label class=w4-4 for=PhoneNum>手机号码</label></div> <div class="col-sm-10 has-feedback"> <div class=mobile-control-wrap><input style="display: none;" class="form-control country-code" type=text data-val=true data-val-maxlength=国家代码格式错误 data-val-maxlength-max=4 data-val-regex=国家代码格式错误 data-val-regex-pattern=^\+\d{1,3}$ data-val-required=请输入国家代码 id=CountryCode name=CountryCode value=+86> <input class="form-control mobile-num" placeholder=绑定你的手机号 type=text data-val=true data-val-regex=手机号码有误 data-val-regex-pattern=^\d{4,13}$ data-val-remote="'手机号码' is invalid." data-val-remote-additionalfields=*.PhoneNum data-val-remote-url=/Account/CheckPhoneNum data-val-required=请输入手机号码 id=PhoneNum name=member_tel></div> <span class="text-danger field-validation-valid" data-valmsg-for=CountryCode data-valmsg-replace=true></span> <span class="text-danger field-validation-valid" data-valmsg-for=PhoneNum data-valmsg-replace=true></span></div> </div> <div class="form-group form-row"> <div class="col-sm-2 control-label"><label class=w4-4 for=LoginName>登录名称</label></div> <div class="col-sm-10 has-feedback"><input class=form-control placeholder=登录用户名，不少于4个字符 type=text data-val=true data-val-length=不合要求，至少2个字符，最多30个字符 data-val-length-max=30 data-val-length-min=2 data-val-nospace=登录用户名不能包含空格 data-val-remote="'登录名称' is invalid." data-val-remote-additionalfields=*.LoginName data-val-remote-url=/Account/CheckLoginName data-val-required=请输入登录用户名 id=LoginName name=member_name> <span class="text-danger field-validation-valid" data-valmsg-for=LoginName data-valmsg-replace=true></span></div> </div> <div class="form-group form-row"> <div class="col-sm-2 control-label"><label class=w4-4 for=DisplayName>显示名称</label></div> <div class="col-sm-10 has-feedback"><input class=form-control placeholder=即昵称，不少于2个字符 type=text data-val=true data-val-length=不合要求，至少2个字符，最多20个字符 data-val-length-max=20 data-val-length-min=2 data-val-regex=不能包含空格、@、:和，不能以._结尾 data-val-regex-pattern=^(?!.*[@:：\s]).*[^._]$ data-val-remote="'显示名称' is invalid." data-val-remote-additionalfields=*.DisplayName data-val-remote-url=/Account/CheckDisplayName data-val-required=请输入显示名称 id=DisplayName name=member_nickname> <span class="text-danger field-validation-valid" data-valmsg-for=DisplayName data-valmsg-replace=true></span></div> </div> <div class="form-group form-row"> <div class="col-sm-2 control-label"><label class=w4-2 for=Password>密码</label></div> <div class="col-sm-10 has-feedback"><input class=form-control placeholder=至少8位，必须包含字母、数字、特殊字符 type=password data-val=true data-val-length=不合要求，密码长度要求8-30位 data-val-length-max=30 data-val-length-min=8 data-val-nospace=密码不能包含空格 data-val-regex=密码必须包含字母、数字和特殊字符的组合 data-val-regex-pattern="^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])[-0-9a-zA-Z~!@#$%^&*`_=+\]\[{}:;\\|:;"'/?>.<,\(\)]{8,30}$" data-val-required=请输入密码 id=Password name=member_pwd> <span class="text-danger field-validation-valid" data-valmsg-for=Password data-valmsg-replace=true></span></div> </div> <div class="form-group form-row"> <div class="col-sm-2 control-label"><label class=w4-4 for=ConfirmPassword>确认密码</label> </div> <div class="col-sm-10 has-feedback"><input class=form-control placeholder=请输入确认密码 type=password data-val=true data-val-equalto=确认密码错误 data-val-equalto-other=*.Password id=ConfirmPassword name=r_pwd> <span class="text-danger field-validation-valid" data-valmsg-for=ConfirmPassword data-valmsg-replace=true></span></div> </div> <div class="form-group form-row"> </div> <div class="form-group form-row"> <div class="offset-sm-2 col-sm-10"><span class="col-sm-12 ajax-error"></span> <button id=submitBtn type=submit class="btn ladda-button mx-auto d-block cnblogs-btn-blue" data-style=zoom-in><span class=ladda-label>注册</span></button> </div> </div> <div class="offset-sm-2 register-sign"><span class=asterisk>*</span> 点击 “注册” 按钮，即表示您同意并愿意遵守 <a class=look-agreeon target=_blank href=//passport.cnblogs.com/agreement.html>用户协议</a>。 </div> </form> </div> </div> {#注册的表单结束#} </div>
前端jquery
{#注册的jquery#}
$(document).ready(function () {
//当点击注册按钮时候，把form表单里的内容提交到后台
$("#submitBtn").click(function () {
$.post("/blog/regist/", $('#registerForm').serialize(), function (data) {
if (data.status == 0) {
arr = {
'member_name': '登录名称',
'member_nickname': '显示名称',
'member_pwd': '密码',
'r_pwd': '确认密码',
'member_email': '邮箱',
'member_tel': '手机号码',
'__all__': ''
};
$.each(data['info'], function (key, value) { //遍历键值对
console.log(key);
console.log(value[0]);
layer.msg(arr[key] + value[0]);
return false;
layer.msg(arr[key] + data['info'][key]);
return false;
});
} else if (data.status == 1) {
layer.msg(data['info'], function () {
location.href = "{% url 'index' %}";
});
} else {
layer.msg(data['info']);
}
}, 'json');
});
});
{#注册的jquery结束#}
后台路由
# 注册 path('regist/', login.regist,name='regist'),
写钩子验证：项目目录下创建my_forms.py文件
from django import forms #自动验证 # forms组件 from django.forms import widgets from django.core.exceptions import ValidationError from django.core.validators import RegexValidator from blog.models import Member class UserForm(forms.Form): wid_01 = widgets.TextInput(attrs={"class": "form-control"})#<input type='text' class="form-control"> wid_02 = widgets.PasswordInput(attrs={"class": "form-control"})#<input type='password' class="form-control"> member_name=forms.CharField(max_length=60,min_length=4,label="用户名",widget=wid_01,error_messages={"required":"该字段必填"}) member_nickname = forms.CharField(max_length=60, min_length=2, label="显示名称", widget=wid_01, error_messages={"required": "该字段必填"}) member_pwd=forms.CharField(max_length=30,min_length=8,label="密码",widget=wid_02,validators=[RegexValidator('\d+','只能是数字') ],error_messages={'required': '密码不能为空','min_length': '密码长度不能小于8','max_length': '密码长度不能大于18','invalid': '密码格式错误',}) r_pwd=forms.CharField(max_length=30,min_length=8,label="确认密码",widget=wid_02,validators=[RegexValidator('\d+','只能是数字') ],error_messages={'required': '密码不能为空','min_length': '密码长度不能小于8','max_length': '密码长度不能大于18','invalid': '密码格式错误',}) #/(?=.*[a-z])(?=.*\d)(?=.*[#@!~%^&*])[a-z\d#@!~%^&*]{8,16}/i member_email = forms.EmailField(label="邮箱",widget=wid_01,error_messages={"required":"该字段必填","invalid":"格式不正确"}) member_tel = forms.CharField(max_length=11, widget=wid_01,label="电话号码",) # 局部钩子 def clean_member_name(self): val = self.cleaned_data.get("member_name") res = Member.objects.filter(member_name=val) if not res: return val else: raise ValidationError("用户名已存在!") # 全局钩子 def clean(self): member_pwd=self.cleaned_data.get("member_pwd") r_pwd=self.cleaned_data.get("r_pwd") if member_pwd and r_pwd: if member_pwd==r_pwd: # print(self.cleaned_data) return self.cleaned_data else: raise ValidationError('两次密码不一致!') else: return self.cleaned_data
后台方法
from blog.my_forms import * # 注册页 def regist(request): res = {'status': None, 'info': None} if request.method == "POST": form = UserForm(request.POST) if not form.is_valid(): res['status'] = 0 res['info'] = form.errors return HttpResponse(json.dumps(res)) # 把这个结果告诉给前台，ajax member_name = request.POST.get("member_name") member_nickname = request.POST.get("member_nickname") member_pwd = make_password(request.POST.get("member_pwd")) member_email = request.POST.get("member_email") member_tel = request.POST.get("member_tel") old_member_obj = Member.objects.filter(member_tel=member_tel) if old_member_obj: res['status'] = 3 res['info'] = '手机号已注册' return HttpResponse(json.dumps(res)) member_obj = Member.objects.create(member_name=member_name, member_nickname=member_nickname, member_pwd=member_pwd, member_email=member_email, member_tel=member_tel) if member_obj: # res = {'status': 1, 'info': '登录成功'} res['status'] = 1 res['info'] = '注册成功，即将跳转至首页' else: res['status'] = 2 res['info'] = '发生了一个意料之外的错误，注册失败' response_new = HttpResponse(json.dumps(res)) # 把这个结果告诉给前台，ajax # response_new.set_cookie("member_id",member_obj.member_id)#设置cookie # response_new.set_cookie("member_name", member_obj.member_name) # session request.session['member_id'] = member_obj.member_id request.session['member_name'] = member_obj.member_name # response_new.set_cookie("member_id", member_obj.member_id, expires = 60 * 60 * 24 * 7) return response_new return render(request, 'blog/regist.html')
页面效果
done。
1806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
