前端開發---登陸註冊頁面優化

1.本次用到錯誤提示文字的顏色

http://v3.bootcss.com/css/#forms

jquery 教程：

http://www.w3school.com.cn/jquery/index.asp

2.工程地址：https://github.com/digitalClass/web_page

網站發佈地址： http://115.28.30.25:8029/

3. 主要工作

優化登陸註冊頁面顯示

因為業務需要， 登陸註冊頁面被後端給改了， 顯示效果如下：

可以看到表單全部亂掉了。打開後端給出的html 文件， 徹底凌亂了

        <form action="." method="post" accept-charset="utf-8">             
              {% if form.errors  %}
              {% include "users/partials/errors.html" %}
              {% endif %}
              {% csrf_token %}
              {% for field in form %}
              <div class="form-group" textalign="left">
                  {% include "users/partials/field.html" %}
              </div>
              {% endfor %}
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>        

　　而 field.html文件又是這樣的

{% load form_tags %}

{% if field.is_hidden %}
    {{ field }}
{% elif field|is_honeypot %}
    {% include "users/partials/honeypot.html" %}
{% else %}
    <div class="field-wrapper {{ field|input_class }} {{ field.css_classes }}{% if field|is_checkbox %} checkbox{% endif %}">
        {% if field.errors %}
            <label class="errorlist control-label">
                {{ field.errors|unordered_list }}
            </label><br>
        {% endif %}

        {% if field|is_checkbox %}
            {{ field }}
        {% endif %}

        <label for="{{ field.id_for_label }}"{% if field.field.required %} class="required"{% endif %}>
                {{ field.label }}{% if field.field.required %}<span class="asterisk">*</span>{% endif %}
        </label>

        {% if not field|is_checkbox %}
            {{ field }}
        {% endif %}

        {% if field.help_text %}
            <div class="help_text">{{ field.help_text|safe }}</div>
        {% endif %}
    </div>
{% endif %}

完全看不懂好不好， 可是還是要改， 沒辦法硬著頭皮去改

可是， 這段<li> 壓根找不到對應好不好。。。。。改個蛋啊！！！！

後來實在沒辦法， 硬著頭皮上 javascript

/**
 * Created by ThinkPad User on 2016/7/11 0011.
 */

$(function(){
    var text1 = $(".errorlist li").first().text()
    $(".errorlist").html(text1);
    $(".errorlist").css("color", "#3c763d")
})

動態修改代碼， 自己都被自己的機智給嚇到了。。。

4. 最終效果：