zoukankan      html  css  js  c++  java
  • form表单渲染和验证

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    </head>
    <body>
    <h1>这是添加页面</h1>
    {#{{ form_obj.as_p }}将所有的字段都渲染出来#}
    <div class="container">
    <div class="row">
    <div class="col-md-10 col-md-offset-1">
    <form action="{% url 'index' %}" method="post" novalidate>{# novalidate是告诉浏览器不需要做验证#}
    {% csrf_token %}
    {% for field in form_obj %}
    {# <div class="form-group has-error">{# has-error判断错误信息使得框变红 #}
    <div class="form-group {% if field.errors.0 %} has-error {% endif %}">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {{ field }}
    {# {{ field.errors.0 }}#}
    <span class="text-danger
    ">{{ field.errors.0 }}</span>{# 错误信息变红 #}
    </div>

    {% endfor %}
    <input type="submit" class="btn btn-success pull-right" value="保存">
    </form>
    {# <div class="form-group ">#}
    {# <label for="{{ form_obj.title.id_for_label }}">{{ form_obj.title.label }}</label>#}
    {# {{ form_obj.title }}{# field s生成input标签 #}
    {# </div>#}
    {# <div class="form-group">#}
    {##}
    {# <label for="{{ form_obj.price.id_for_label }}">{{ form_obj.price.label }}</label>#}
    {# {{ form_obj.price }}#}
    {# </div>#}
    {# <div class="form-group">#}
    {# <label for="{{ form_obj.date.id_for_label }}">{{ form_obj.date.label }}</label>#}
    {# {{ form_obj.date }}#}
    {# </div>#}
    {# <div class="form-group">#}
    {# <label for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label>#}
    {# {{ form_obj.password }}#}
    {# </div>#}
    {# <div class="form-group">#}
    {# <label for="{{ form_obj.sex.id_for_label }}">{{ form_obj.sex.label }}</label>#}
    {# {{ form_obj.sex }}#}
    {# </div>#}
    {# <div class="form-group">#}
    {# <label for="{{ form_obj.publish.id_for_label }}">{{ form_obj.publish.label }}</label>#}
    {# {{ form_obj.publish }}#}
    {# </div>#}
    {# <div class="form-group">#}
    {# <label for="{{ form_obj.author.id_for_label }}">{{ form_obj.author.label }}</label>#}
    {# {{ form_obj.author }}#}
    {# </div>#}
    </div>
    </div>
    </div>


    <script src="{% static 'jquery-3.4.1.js' %}"></script>
    <script src="{% static 'jquery.cookie.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.7-dist/js/jquery.min.js' %}"></script>
    </body>
    </html>
  • 相关阅读:
    有关token
    JQuery自定义resize事件代码解析
    vue--为网页添加动态响应背景
    如何查询数据库中所有表格,或者查询是否存在某个表格-mysql和oracle
    Foxmail: 错误信息::ssl连接错误, errorCode: 5,各种解决方案的大杂烩。
    [转] Hadoop入门系列(一)Window环境下搭建hadoop和hdfs的基本操作
    java连数据库和数据库连接池踩坑日记(二)-------数据库连接池c3p0
    java实现将汉字转为拼音
    Sublime 如何修改默认编码格式
    JSP 表单处理
  • 原文地址:https://www.cnblogs.com/Zhao159461/p/11000895.html
Copyright © 2011-2022 走看看