今儿继续做项目,学习了Django的forms生成前端的代码。

forms.py

class SignupForm(forms.Form):
username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True,
max_length=30, min_length=5,
error_messages={'required': '用户名不能为空', 'max_length': '用户名至少5位',
'min_length': '用户名最多30位'})
password = forms.CharField(min_length=6, max_length=50, required=True,
error_messages={'required': '密码不能为空',
'invalid': '密码格式错误',
'min_length': '密码不能少于6位',
'max_length': '密码最多50位'})
classInfo = forms.ModelChoiceField(queryset=ClassInfo.objects.all(), required=True, empty_label=None, initial="预设值")#这里加的是班级名字
email = forms.EmailField(validators=[email_unique_validate, ], required=True,
error_messages={'required': '邮箱不能为空', 'invalid': '邮箱格式错误'})
mobile = forms.CharField(validators=[mobile_validate, ], required=True,
error_messages={'required': '手机号不能为空'})

然后views通过get方法获得表单的form

class SignupView(View):
def get(self, request):
obj = SignupForm()
return render(request, 'user/signup.html', locals())

这里可以打印出来obj,可以看到表单类已经帮我们生成了前端代码

<tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" value="123123" minlength="5" maxlength="30" required id="id_username"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="text" name="password" value="213123" minlength="6" maxlength="50" required id="id_password"></td></tr>
<tr><th><label for="id_classInfo">Classinfo:</label></th><td>
<select name="classInfo" id="id_classInfo">
<option value="1" selected>15医药软件</option>
<option value="2">15医药信息</option>
</select></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" value="123123231@qq.com" required id="id_email"></td></tr>
<tr><th><label for="id_mobile">Mobile:</label></th><td><input type="text" name="mobile" value="13328768123" required id="id_mobile"></td></tr>

其中select下拉框里的内容是从数据库中取出来的,利用ModelChoiceField,设置queryset来取出数据,这样实现动态存取select中的值。

而前端代码可以直接使用这个表单变量obj

<form method="post" action="{% url 'signup' %}">
...
{% for field in obj %}
{{ field }}
{% end for %}
...
</form>

但是我这里没有设置label值,就没有直接这样偷懒,而是自己写了一个

<form method="post" action="{% url 'signup' %}>
....
<tr>
<td width="120" align="right" valign="top">用户名(学号)</td>
<td width="auto" align="left"><input type="text" name="username" class="sls"> </td>
</tr>
<tr>
<td width="120" align="right">密码</td>
<td width="auto" align="left"><input type="password" name="password" class="sls"></td>
</tr>
<tr>
<td width="120" align="right" valign="top">电子邮件</td>
<td width="auto" align="left"><input type="text" name="email" class="sls"></td>
</tr>
<tr>
<td width="120" align="right">班级</td>
<td width="auto" align="left">
{{ obj.classInfo }}
</td>
</tr>
<tr>
<td width="120" align="right" valign="top">手机号</td>
<td width="auto" align="left"><input type="text" class="sls" name="mobile"></td>
</tr>
....

前期我一直在用select标签来写,然后传值到option里,但是我发现通过再用obj.classInfo取里面的值时出现空白值

就类似于原本数据库存着两个选项,然后前端显示-------;选项一;空白;选项二;空白。

经过一番查找,出现-----这个选项是因为没有设置初始值,然后设置了initial

出现两个变量就是因为粗心大意,obj.classInfo本身就是个select标签,里面就有两个选项。

之后就是post提交验证,然后就是存值render操作了

    def post(self, request):
has_error = True
obj = SignupForm(request.POST)
#print(obj)
if obj.is_valid():
has_error = False
username = obj.cleaned_data['username']
password = obj.cleaned_data['password']
class_name = obj.cleaned_data['classInfo']
email = obj.cleaned_data['email']
mobile = obj.cleaned_data['mobile']
......

Django forms表单 select下拉框的传值的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  2. form表单传递下拉框的Value和Text值,不适用Jquery传递

    同时获取下拉框的Value和Text值的解决办法:添加一个<input type="text" >文本框,用户选中一项后就将该项的value值给他 然后接受页面获取该文 ...

  3. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  4. easyui form load 数据表单有下拉框

    (function () { $('#text1').combobox({ url: 'http://localhost:5463/test/getComboJson' }) $('#text2'). ...

  5. php简易表单及下拉框动态渲染

    <?php//1.连接数据库$link = mysqli_connect('127.0.0.1','root','root','1906');//2.设置字符集mysqli_set_charse ...

  6. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  7. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  8. 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  9. select 下拉框 disabled 则 Form 获取不到值

    select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...

随机推荐

  1. flex布局-css

    1.html <div id="parent"> <div id="child1"></div>  <div id=& ...

  2. spring Date格式问题

    起因: 在数据库设计中,日期时间等类型字段一般设置为Datetime格式,所以有时在接口请求实体bean中,对应的接口字段的数据类型可能会被设置为Date类型. 而在java常用场景中的时间格式一般有 ...

  3. ssh登录locale报错:cannot change locale (zh_CN.UTF-8): No such file or directory

    一.登录ssh报错: Last :: from 172.28.146.109 -bash: warning: setlocale: LC_ALL: cannot change locale (en_C ...

  4. svn仓库迁移

    注意事项 1.仅迁移代码.日志.版本信息,(用户.权限.配置即conf目录需要手动移动或重新配置) 2.新仓库需无代码,即新建仓库后不要进行上传操作,否则迁移可能造成冲突,导致迁移失败 操作步骤 1. ...

  5. docker学习-lnmp+redis之搭建mysql容器服务

    一. 前期准备工作,创建配置文件目录,log文件目录,数据库DATA和WEB站点目录[root@T1 ~]# mkdir -p /lnmp/conf/{mysql,nginx,php} /lnmp/l ...

  6. gson 入门使用

    参考文章:https://www.cnblogs.com/majay/p/6336918.html Java 对象与 Json 之间的互相转换,用的比较多大是 Jackson 与 Gson 第一步:添 ...

  7. PhoenixFD插件流体模拟——UI布局【Gird】详解

    流体网格 本文主要讲解Grid折叠栏中的内容 主要内容 Overview 综述 Parameters 参数 General 普通参数 Example: Scene Scale Example: Gri ...

  8. Docker容器的基本了解和命令

    一.docker和虚拟机的对比 特性 容器 虚拟机 启动 秒级 分钟级 硬盘使用 一般为MB 一般为GB 性能 接近原生 弱于 系统支持量 单机支持上千个容器 一般几十个 更高效的利用系统资源 更快速 ...

  9. Servlet第二篇(介绍、ServletConfig;ServletContext)

    什么是Serlvet? Servlet其实就是一个遵循Servlet开发的java类.Serlvet是由服务器调用的,运行在服务器端. 为什么要用到Serlvet? 我们编写java程序想要在网上实现 ...

  10. pwnable.kr-input-witeup

    查看代码,有5个stage,一一解决掉就能愉快看到flag了. 第一个stage: 解决方案: 第二个stage: 解决方案: 使用了os.pipe()函数功能,os.pipe()用于创建一个管道,返 ...