使用form 组件写一个用户注册，并用 bootstrap渲染
需求：使用form组件，写一个用户注册系统，包含用户名， 密码， 确认密码，手机号，性别，爱好，注册。并用bootsrap渲染，成果如下：
首先创建一个django 项目。然后在连接pymysql数据库。
配置好后，可以开始：
在app01 中添加一个forms.py ：
from django import forms
from django.core.validators import RegexValidator
from django.core.exceptions import ValidationError class RegForm(forms.Form):
username = forms.CharField(
min_length= ,
label="用户名",
error_messages={
"required":"不能为空",
"min_length":"用户名最少6位"
},
widget=forms.widgets.TextInput(attrs={"class":"form-control","placeholder":"用户名"})
)
pwd = forms.CharField(
min_length=,
label="密码",
error_messages={
"required":"不能为空",
"min_length":"密码最少3位"
},
widget=forms.widgets.PasswordInput(
attrs={"class":"form-control","plaaceholder":"密码"},
render_value=True
)
)
re_pwd = forms.CharField(
min_length=,
label="确认密码",
error_messages={
"required":"不能为空",
"min_length":"密码最少3位"
},
widget=forms.widgets.PasswordInput(
attrs={"class":"form-control","placeholder":"确认密码"},
render_value=True
)
)
phone = forms.CharField(
label="手机号",
min_length=,
max_length=,
error_messages={
"required": "手机号不能为空",
"min_length": "手机号应该是11位",
"max_length": "手机号应该是11位",
},
validators=[RegexValidator(r'^1[356789][0-9]{9}$', "手机格式不正确"), ],
widget=forms.widgets.TextInput(attrs={"class": "form-control", "placeholder": "手机号"})
)
gender = forms.fields.ChoiceField(
choices=((,"男"),(,"女"),(,"保密")),
label="性别",
initial=,
widget=forms.widgets.RadioSelect
)
hobby = forms.fields.MultipleChoiceField(
choices=((, "篮球"), (, "足球"), (, "双色球"),),
label="爱好",
required=False,
widget=forms.widgets.CheckboxSelectMultiple
) def clean_username(self):
value = self.cleaned_data.get("username")
if "红楼梦" in value:
raise ValidationError("不符合社会主义核心价值观")
else:
return value def clean(self):
pwd = self.cleaned_data.get("pwd")
re_pwd = self.cleaned_data.get("re_pwd") if pwd !=re_pwd:
self.add_error("re_pwd","两次输入的密码不一致！")
raise ValidationError("两次输入的密码不一致")
else:
return self.cleaned_data
forms.py
在url 中写入与浏览器交互关系：
views中：
from django.shortcuts import render,HttpResponse
from app01 import forms # Create your views here. def reg(request):
from_obj = forms.RegForm()
if request.method == "POST":
from_obj = forms.RegForm(request.POST)
if from_obj.is_valid():
return HttpResponse("OK") return render(request, "reg.html", {"obj": from_obj})
views.py
reg.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body> <div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal" autocomplete="off" novalidate action="/reg/" method="post">
{% csrf_token %}
<div class="form-group">
<label for="{{ obj.username.id_for_label }}" class="col-md-2 control-label">{{ obj.username.label }}</label>
<div class="col-md-10">
{{ obj.username }}
<span class="help-block">{{ obj.username.errors. }}</span>
</div>
</div> <div class="form-group">
<label for="{{ obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ obj.pwd.label }}</label>
<div class="col-md-10">
{{ obj.pwd }}
<span class="help-block">{{ obj.pwd.errors. }}</span>
</div>
</div>
<div class="form-group">
<label for="{{ obj.re_pwd.id_for_label }}" class="col-md-2 control-label">{{ obj.re_pwd.label }}</label>
<div class="col-md-10">
{{ obj.re_pwd }}
<span class="help-block">{{ obj.re_pwd.errors. }}</span>
</div>
</div>
<div class="form-group">
<label for="{{ obj.phone.id_for_label }}" class="col-md-2 control-label">{{ obj.phone.label }}</label>
<div class="col-md-10">
{{ obj.phone }}
<span class="help-block">{{ obj.phone.errors. }}</span>
</div>
</div>
<div class="form-group">
<label for="{{ obj.gender.id_for_label }}" class="col-md-2 control-label">{{ obj.gender.label }}</label>
<div class="col-md-10">
{{ obj.gender }}
<span class="help-block">{{ obj.gender.errors. }}</span>
</div>
</div>
<div class="form-group">
<label for="{{ obj.hoppy.id_for_label }}" class="col-md-2 control-label">{{ obj.hoppy.label }}</label>
<div class="col-md-10">
{{ obj.hoppy }}
<span class="help-block">{{ obj.hoppy.errors. }}</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">注册</button>
</div>
</div>
</form>
</div>
</div>
</div> </body>
</html>
reg.html
其中static 中的文件：
使用form 组件写一个用户注册，并用 bootstrap渲染的更多相关文章
- 第二篇 -- Django写一个接口并用Jmeter进行测试
第一节学习了Jmeter的下载和安装,那么第二节就来看看具体怎么使用. 本篇介绍的是使用Jmeter进行http接口测试,那么接口程序使用Django开发的一个小接口. 一.Django编写接口 这一 ...
- 用php怎么写一个用户注册登录的页面呢？
想写就会尽快去写.如果用php写了就一定要用nodejs写出来啊,不写是小狗啊! 补充一下,想要实现的功能: 1.用户名重复检测 2.检测信息填写是否完整 3.邮箱是否已经被注册 4.实现ajax无刷 ...
- 【Django】Form组件
目录 Form组件介绍 常用字段与插件 Form组件中所有内置字段 从数据库中获取数据 校验示例 检验手机号是否合法 方式一(基本操作) 方式二(自定义验证规则) 方式三(利用钩子) 验证密码一致性 ...
- Python - Django - form 组件基本用法
普通 form 表单的处理: reg.html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Angular写一个Form组件-TagInput
前端开发少不了和表单打交道; Angular中, 提供了强大的表单的支持, 响应式表单(Reactive Form) 和 模板驱动的表单(Template-driven Form) 的双向数据流给我们 ...
- 从 0 到 1 到完美，写一个 js 库、node 库、前端组件库
之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonj ...
- [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??
0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
随机推荐
- 如何在 Eclipse 中使用命令行
虽然我们已经有了像 Eclipse 这样高级的 IDE,但是我们有时候也是需要在开发的时候使用 Windows 的命令行,来运行一些独立的程序.在两个程序中切换来切换去是很麻烦的.所以 Eclipse ...
- Exception in thread "main" java.io.IOException: Mkdirs failed to create /var/folders/q0/1wg8sw1x0dg08cmm5m59sy8r0000gn/T/hadoop-unjar6090005653875084137/META-INF/license at org.apache.hadoop.util.Run
在使用hadoop运行jar时出现. 解决方法 zip -d Test.jar LICENSE zip -d Test.jar META-INF/LICENSE 完美解决.
- zTree获取（子）节点
var ids=[]; ids=getChildren(ids, treeNode);//TreeNode是选中节点,ids是子节点id数组,格式:123,223,4,55 1.获取直接子节点的id ...
- Unity3D中Mathf数学运算函数总结
引入: 看到一个案例注意到函数Mathf.SmoothDamp的使用,游戏中用于做相机的缓冲跟踪和boss直升机跟踪士兵.该函数是Unity3D中Mathf数学运算函数中的一个.一些游戏使用了smoo ...
- Android基于socket的群聊程序
在网上看了好多,但是感觉不是太简单就是只能单独聊,所以就自己写了个可以群聊的,直接上代码了 一.服务器端 这里用的MyEclipse作为服务器端 MyServerScoket.java package ...
- freeMarker（五）——模板开发指南补充知识
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 模板开发指南补充知识 1. 自定义指令 自定义指令可以使用 macro ...
- SLF4j+LOG4j
工作笔记:在myeclipse 中创建一个java project 创建一个 TestSlf4J 类 import org.slf4j.Logger; import org.slf4j.LoggerF ...
- [转]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方 ...
- Sublime Text 全程指南（转载）
摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Sublime Text中文教程. 更新记录 2014/09/27:完成初稿 2014/09/28: 更正打开控 ...
- hdu 5616 Jam's balance 正反背包+转换
http://acm.hdu.edu.cn/showproblem.php?pid=5616 思路 题目中蕴含着两种需要计算的重量 1. 从所有的砝码中挑出任意种2.(转换的思想)在天平的两端都挑出这 ...