前端开发---登陆注册页面优化

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. 最终效果：