DjangoForm 提交验证
用户提交数据的验证
1.创建模版 -- class LoginForm(forms.Form):....
2.将请求交给模版，创建一个对象 -- obj = LoginForm(request.POST)
3.进行验证 -- obj.is_valid()
4.获取正确的信息 -- obj.clean()
5.获取错误的信息 -- obj.errors
Form 验证
创建一个项目 django_form 和一个应用 app01
创建一个 static 文件夹，放入 jquery.min.js
修改 settings.py 文件
注释下面语句
#'django.middleware.csrf.CsrfViewMiddleware',
在文件最后添加
STATICFILES_DIRS=[
os.path.join(BASE_DIR, "static"),
]
在 urls.py 内容如下
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('login.html', views.login),
]
在 views.py 中修改
class LoginForm(forms.Form):
# 定义元素，需要跟前端提交的名字一致，error_messages 自定义错误信息
user = forms.CharField(min_length=6, error_messages={"required": '用户名不能为空', 'min_length': '用户长度不能小于6'})
email = forms.EmailField(error_messages={"required": '邮箱不能为空', 'invalid': '邮箱格式错误'})
def login(request):
if request.method == 'GET':
# 自动生成 input 标签
obj = LoginForm()
return render(request, 'login.html', {'oo': obj})
elif request.method == 'POST':
# 获取 post 提交过来的所有值
obj = LoginForm(request.POST)
# 判断值是否正确
if obj.is_valid():
# 获取正确的值
value_dict = obj.clean()
print(value_dict)
else:
# 如果错误，错误信息通过 obj 返回前端
pass
return render(request, 'login.html', {'oo': obj})
在 templates 文件夹下添加 login.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Form提交数据</h1>
<form method="post" action="/login.html">
<p>
{{ oo.user }}
<!-- 通过 oo.errors.user.0 获取错误信息 -->
<span>{{ oo.errors.user.0 }}</span>
</p>
<p>
{{ oo.email }}
<span>{{ oo.errors.email.0 }}</span>
</p>
<p>
<input type="text" name="pwd" placeholder="密码">
</p>
<input type="submit" value="提交">
<input id="ajax_submit" type="button" value="Ajax提交">
</form>
<script src="/static/jquery.min.js"></script>
<script>
$(function () {
$('#ajax_submit').click(function () {
$.ajax({
url: "/login.html",
data: {user:'root', email: 'root@live.com', pwd: '123456'},
type: 'POST',
success:function (arg) {
console.log(arg)
}
})
})
})
</script>
</body>
</html>
当输入的邮箱不正确时，在高级浏览器下后显示如下结果
Ajax 验证
在 urls.py 上修改
path('login_ajax.html', views.login_ajax),
在 views.py 上修改
def login_ajax(request):
if request.method == 'GET':
return render(request, 'login_ajax.html')
elif request.method == 'POST':
ret = {'status': True, 'error': None, 'data': None}
obj = LoginForm(request.POST)
if obj.is_valid():
print(obj.clean())
else:
ret['status'] = False
ret['error'] = obj.errors.as_data() # {'email': [ValidationError(['邮箱格式错误'])], 'user': [ValidationError(['用户长度不能小于6'])]}
return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
# 邮箱格式和用户名长度都不正常时，返回给浏览器的是：{"error": {"email": [{"message": "\u90ae\u7bb1\u683c\u5f0f\u9519\u8bef", "code": "invalid"}], "user": [{"message": "\u7528\u6237\u957f\u5ea6\u4e0d\u80fd\u5c0f\u4e8e6", "code": "min_length"}]}, "data": null, "status": false}
# 定义编码类JsonCustomEncoder并重写实例的default函数，对特殊类型进行处理，其余类型继续使用父类的解析。
from django.core.validators import ValidationError
class JsonCustomEncoder(json.JSONEncoder):
def default(self, field):
# 使用 isinstance() 函数来判断 field 是否是 ValidationError 类型
if isinstance(field, ValidationError):
# field 为 ['邮箱格式错误'] 和 ['用户长度不能小于6']
# field.code 为 min_length 和 invalid
# field.message 为 邮箱格式错误 和 用户长度不能小于6
return {'code': field.code, 'message': field.message}
else:
return json.JSONEncoder.default(self, field)
添加 login_ajax.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error-msg{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<h1>Ajax提交数据</h1>
<form id="f1" >
<p>
<input id="u" type="text" name="user" placeholder="用户名">
</p>
<p>
<input id="e" type="text" name="email" placeholder="邮箱">
</p>
<p>
<input id="p" type="text" name="pwd" placeholder="密码">
</p>
<input id="ajax_submit" type="button" value="Ajax提交">
</form>
<script src="/static/jquery.min.js"></script>
<script>
$(function () {
$('#ajax_submit').click(function () {
$.ajax({
url: "/login_ajax.html",
data: $('#f1').serialize(), //将表单数据表单序列化（key1=value1&key2=value2…）后提交
type: 'POST',
success:function (arg) {
$('.error-msg').remove();
var v1 = JSON.parse(arg);
console.log(v1);
if(!v1.status){
var error_obj = v1.error;
$.each(error_obj, function (k,v) {
// k: user 或 email
// v: [{}{}{},]
var tag = document.createElement('span');
tag.className = 'error-msg';
tag.innerHTML = v[0].message;
$("input[name='"+ k +"']").after(tag);
})
}else {
location.href = "/index.html"
}
}
})
})
})
</script>
</body>
</html>
DjangoForm 提交验证的更多相关文章
- AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- 框架----Django之Form提交验证（一）
一.Form提交验证与Ajax提交验证的运用实例 Form表单提交时会刷新页面,输入失败时,输入框内内容也会随之刷新不能保留:而Ajax提交是在后台偷偷提交,不会刷新页面,因此也就可以保留页面输入框内 ...
- 框架----Django之Form提交验证（二）
一.Form提交验证之(学生表.老师表.班级表)的添加和编辑实现案例 1. 浏览器访问 http://127.0.0.1:8000/student_list/ http://127.0.0.1:800 ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- easyui required 提交验证
使用easyui时,对于提交验证,不不过在标签属性中加入data-options=required:true这句话这么来的.还须要另外加上才写东西能够把验证完整实现 1.设置from的属性 <f ...
- amazeUI表单提交验证--input框required
效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- js 验证表单 js提交验证类
附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i< ...
随机推荐
- ckeditor4.7配置图片上传
ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐. 这里我们讲解下 ckeditor最新版本4.7的图片上传配置. https://ckeditor.com/ 官方 进入下载 https ...
- 日志类shell脚本
Apache日志文件切割 #!/bin/bash year=`date -d '-1 day' +%Y` month=`date -d '-1 day' +%m` day=`date -d '-1 d ...
- 远程控制服务（SSH）之Windows远程登陆Linux主机
本篇blog同样介绍两种方式进行. 首先进行准备工作: 1.所用到的工具如下: (1) 装有Linux系统的VMware虚拟机*1 (2) 终端连接工具Xshell 6 2.将Wind ...
- if选择结构
if的语法规则: if(布尔表达式){java语句} //只有一个java语句的时候可以省略大括号不建议这么写但是别人写的代码能看懂 if的写法有4种: if(){} if(){}else{} if( ...
- 关于使用LocalDateTime进行存储，时间相差比较多的问题。
可以在设置数据库中的连接, characterEncoding=UTF8&useSSL=false&serverTimezone=GMT%2b8
- verilog 常见单元描述
半加器: //行为级建模 module half_adder2(a, b, sum, c_out); input a, b; output sum, c_out; assign {c_out, sum ...
- git相关2
初学备忘: git安装好后,目录右键 => Git Bash here _________________________ 初始化仓库 git init 仓库名 配置仓库 git config ...
- Hbulder 调试安卓app
目前开发app有原生开发和web开发两种方式,各有各的优势和劣势,利用web技术开发app可以只用写一套代码,即可以在Android和ios同时应用,比较方便和快捷,有很多中不同的开发方式,例如cor ...
- Class的使用，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字，类的继承
s6新增了一种定义对象实例的方法,Class(类)这个概念,作为对象的模板.class可以看作只是一个语法糖,通过class关键字,可以定义类.让对象原型的写法更加清晰.更像面向对象编程的语法. 一. ...
- CF-1132 C.Painting the Fence
题目大意:现在有n个栅栏板,p个工人,每个工人可以涂一段区间的栅栏板,问如果雇佣p-2个工人,最多可以涂多少块栅栏板. 做法:先求出q个工人能涂得最多木板数,并统计每个木板被涂的次数.求被涂一次的木板 ...