从0开始搭建flask web 程序（2）

最新推荐文章于 2023-11-30 19:47:00 发布

此处无声胜有声

最新推荐文章于 2023-11-30 19:47:00 发布

阅读量544

点赞数 1

CC 4.0 BY-SA版权

分类专栏： python flask 文章标签： flask python web

本文链接：https://blog.youkuaiyun.com/qq_24074149/article/details/81199168

python 同时被 2 个专栏收录

19 篇文章

订阅专栏

flask

4 篇文章

订阅专栏

本博客介绍了一个名为PoleStar的博客系统的设计与实现细节，包括前端页面布局、响应式导航栏、文章发布与编辑功能、分页显示等特性。系统采用Flask作为后端框架，支持用户注册登录、撰写文章、评论互动等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

templates/base.html

<!DOCTYPE html>
<html>
<head>
{% block head %}
	<meta charset="utf-8">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/polestar.ico') }}" type="image/x-icon">
	<link rel="stylesheet" href="{{url_for('static',filename='main/lib/css/bootstrap3.3.7.min.css')}}">
    <link rel="stylesheet" href="{{ url_for('static', filename='editormd/css/editormd.css') }}"/>
    <link rel="stylesheet" href="{{url_for('static', filename='main/css/style.css')}}">


{% endblock %}
</head>

<title>
{% block title %}PoleStar {% endblock %}
</title>

<body>
{% block navbar %}

<nav class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
        <a class="navbar-brand" href="{{url_for('main.index')}}"> <strong>PoleStar</strong></a>
	</div>
    <ul class="nav navbar-nav navbar-left">
      <li><a href="#"> 博客 </a></li>
      <li><a href="#"> 德 </a></li>
      <li><a href="#"> 智 </a></li>
      <li><a href="#"> 体 </a></li>
      <li><a href="#"> 美 </a></li>
      <li><a href="#"> 劳 </a></li>
      <li><a href="#"> 均 </a></li>
      <li><a href="#"> 衡 </a></li>
      <li><a href="#"> 发 </a></li>
      <li><a href="#"> 展 </a></li>
    </ul>
	<form class="navbar-form navbar-left" method="get" action="details" target="_blank">
		<div class="form-group">
            <input type="text" name="blogid" class="form-control" placeholder="文章搜索" >
		</div>
		<button type="submit" class="btn btn-default">搜索</button>
	</form>

    <ul class="nav navbar-nav navbar-right">
        <li><a href="{{url_for('main.create')}}"> 写博客</a></li>
        {% if current_user.is_authenticated %}
            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img class="img-circle" alt="30x30" style="width: 30px;height: 30px;" src="/static/images/head.jpg">
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">我的博客</a></li>
                        <li><a href="#">消息</a></li>
                        <li><a href="#">账号设置</a></li>
                        <li><a href="#">反馈</a></li>
                        <li><a href="#">帮助</a></li>
                        <li><a href="{{ url_for('auth.logout') }}">退出</a></li>
                    </ul>
            </li>
        {% else %}
      <li><a href="{{url_for('auth.register')}}"> 注册</a></li>
      <li><a href=" {{ url_for('auth.login') }} "> 登录</a></li>
        {% endif %}
    </ul>
	</div>
</nav>
{% endblock %}

{% block content %}

<div class="container">
    {% for message in get_flashed_messages() %}
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ message }}
    </div>
    {% endfor %}

    {% block page_content %}{% endblock %}
</div>
{% endblock %}

{% block scripts %}
    <script src="{{url_for('static', filename='main/lib/js/jquery1.11.2.min.js')}}"></script>
    <script src="{{ url_for('static', filename='editormd/editormd.min.js') }}"></script>
    <script src="{{url_for('static', filename='main/lib/js/bootstrap3.3.7.min.js')}}"></script>
{% endblock %}
</body>

</html>

宏模板templates/_macros.html (分页)

{% macro pagination_widget(pagination, endpoint, fragment='') %}
<ul class="pagination">
    <li {% if not pagination.has_prev %} class="disabled"{% endif %}>
        <a href="{% if pagination.has_prev %}{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}">
            &laquo;
        </a>
    </li>
    {% for p in pagination.iter_pages() %}
        {% if p %}
            {% if p == pagination.page %}
            <li class="active">
                <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a>
            </li>
            {% else %}
            <li>
                <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ p }}</a>
            </li>
            {% endif %}
        {% else %}
        <li class="disabled"><a href="#">&hellip;</a></li>
        {% endif %}
    {% endfor %}
    <li {% if not pagination.has_next %} class="disabled"{% endif %}>
        <a href="{% if pagination.has_next %}{{ url_for(endpoint, page=pagination.next_num, **kwargs) }}{{ fragment }}{% else %}#{% endif %}">
            &raquo;
        </a>
    </li>
</ul>
{% endmacro %}

templates/main/index.html

{% extends "base.html" %}
{% import "_macros.html" as macros %}

{% block title %}PoleStar - 首页{% endblock %}

{% block page_content %}

<div class="container">

    <h2>{{ g.user.username }}的博客</h2><br>

<div class="row">
		<div class="col-md-3 column">
            <div class="panel panel-default">
	            <div class="panel-heading">
		                个人资料
	            </div>
	            <div class="panel-body">
                    <div >
                        <img alt="60x60" style="width: 60px;height: 60px;" src="/static/images/head.jpg" class="img-circle" />
                        <strong>&nbsp;&nbsp;&nbsp;{{g.user.nickname}}</strong>
                    </div><hr>
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                                <tr class="text-center">
                                    <td style="border:none;">原创</td>
			                        <td style="border:none;">粉丝</td>
                                    <td style="border:none;">喜欢</td>
                                    <td style="border:none;">评论</td>
                                </tr>
                                <tr class="text-center">
                                    <td style="border:none;"><strong>{{g.user.original}}</strong></td>
			                        <td style="border:none;"><strong>{{g.user['fans']}}</strong></td>
                                    <td style="border:none;"><strong>{{g.user['like']}}</strong></td>
                                    <td style="border:none;"><strong>{{g.user['comment']}}</strong></td>
                                </tr>

                            </tbody>
                        </table>
                    </div><hr>
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                                <tr class="text-center">
                                    <td style="border:none;">等级:  {{g.user['level']}}</td>
			                        <td style="border:none;">访问量： {{g.user['visitor_volume']}}</td>
                                </tr>
                                <tr class="text-center">
                                    <td style="border:none;">积分: {{g.user['integral']}}</td>
			                        <td style="border:none;">排名: {{g.user['ranking']}}万+</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

	            </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    文章分类
                </div>
                <div class="panel-body">
                    <ul>{% for bc in g.blogcategory %}
                        <a class="btn btn-link" href="#" role="button"><strong>&nbsp;&nbsp;&nbsp;{{ bc.category }}</strong></a>
                            ({{ bc.total}})
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    文章存档
                </div>
                <div class="panel-body">
                        <ul>
                        <a class="btn btn-link" href="#"><strong>2018年&nbsp;&nbsp;&nbsp;</strong></a>(10)
                        <a class="btn btn-link" href="#"><strong>2017年&nbsp;&nbsp;&nbsp;</strong></a>(13)
                        <a class="btn btn-link" href="#"><strong>2016年&nbsp;&nbsp;&nbsp;</strong></a>(12)
                        <a class="btn btn-link" href="#"><strong>2015年&nbsp;&nbsp;&nbsp;</strong></a>(20)
                        </ul>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    阅读排行
                </div>
                <div class="panel-body">

                        <a class="btn btn-link" href="#"><p>linux开源邮箱服务器搭建</p></a>(108)
                        <a class="btn btn-link" href="#"><p>python正则表达式（二）</p></a>(67)
                        <a class="btn btn-link" href="#"><p>基于python的open-falcon...</p></a>(61)
                        <a class="btn btn-link" href="#"><p>flask sqlalchemy数据库操作</p></a>(49)

                </div>
            </div>



		</div>

		<div class="col-md-9 column">
            <div class="panel panel-info">
   	            <div class="panel-heading">
		            &nbsp;
	            </div>
	            <div class="panel-body">
                    <div class="showAndHide_list_box" >
                        {% if blogs%}
                            {% for blog in blogs %}
                            <div class="bloglist">
                                <a class='btn' style="color:black;" href="{{url_for('main.details')}}?blogid={{ blog.id }}"><h3><strong>{{blog.title}}</strong></h3></a>
                                <p >{{blog.contents}}</p>
                                <p style="position: absolute; left: 5%;">{{blog.published_time}}</p>
                                <p style="position: absolute; right: 5%;">
                                    <span style="display: none;">
                                        {% if blog.istop%}
                                            <a id="istop" class="top" style="color: chocolate;" href="javascript:void(0)"  onClick="productsLabel.setHot(this,{{blog.id}})">取消顶置 |</a>
                                        {%else%}
                                            <a id="istop" class="top" style="color: chocolate;" href="javascript:void(0)"  onClick="productsLabel.setHot(this,{{blog.id}})">顶置 |</a>
                                        {% endif %}
                                        <a style="color: green;" href="{{url_for('main.edit')}}?blogid={{ blog.id }}">编辑 |</a>
                                        <a style="color: red;" href="{{url_for('main.delete')}}?blogid={{ blog.id }}">删除</a>
                                    </span>
                                </p>
                                <p style="position: absolute; left: 22%;">阅读({{blog.read}})</p>
                                <p style="position: absolute; left: 30%;">评论({{blog.comment}})</p>
                                <br>
                                <hr class="hr0" />

                            </div>
                            {% endfor %}

                            {% if pagination %}
                            <div class="pagination">
                                {{ macros.pagination_widget(pagination, '.index') }}
                            </div>
                            {% endif %}
                        {% else %}
                            <p>博主很懒什么也没有~</p>
                        {% endif %}

                    </div>
	            </div>

            </div>

		</div>
</div>

</div>

{% endblock %}

{% block scripts %}
{{ super() }}
  <script>
    $(function(){
        $(".bloglist").hover(function(){
            $(this).find("span").show();
        },function(){
            $(this).find("span").hide();
        });
    });

    var productsLabel = {
	//设置置顶
	setHot: function(t,id){
		var bar = 'bloglist';
		var obj = $(t).parents('.'+bar).clone(true);
		$(t).parents('.'+bar).remove();
		$(".showAndHide_list_box").prepend(obj);

        var y = document.getElementById("istop");
        y.innerHTML = "取消顶置 |";
        var url = "{{url_for('main.index')}}";
        var blogid = {"blogid" : id };

		$.ajax(
		    {
                url: url,
                type: "POST",
                async: true,
                data: blogid,
                //dataType: "json",

                success: function(result){

                   if(result.istop == 1){
                     x.innerHTML="取消顶置 |"
                   }
                   else{
                    x.innerHTML="顶置 |"
                   }
		        },
                error: function(result){
                    alert('error!');
                }
		    });

	    }
	}

  </script>
{% endblock%}

main/403.html

{% extends "base.html" %}

{% block title %}PoleStar - Forbidden{% endblock %}

{% block page_content %}
<div class="container">
    <div class="page-header">
        <h1>Forbidden</h1>
    </div>
</div>
{% endblock %}

main/404.html

{% extends "base.html" %}

{% block title %}PoleStar - Page Not Found{% endblock %}


{% block page_content %}
<div class="container">
    <div class="page-header">
        <h1>Not Found</h1>
    </div>
</div>
{% endblock %}

写博客templates/main/Create_blog.html

{% extends "base.html" %}
{% block title %}PoleStar - 写博客{% endblock %}

{% block head %}
    {{super()}}
    <link rel="stylesheet" href="/static/main/lib/css/green.css" >
{% endblock %}

{% block page_content %}
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">

                <form method="post">
                    {{ form.hidden_tag() }}
                    <div class="form-group">
                        {% if form.title.errors %}
                            {% for e in form.title.errors %}
                                <p class="help-block">{{ e }}</p>
                            {% endfor %}
                        {% endif %}
                        {{ form.title(class_='form-control',placeholder="请输入文章标题",style="background-color: whitesmoke;")}}
                    </div>

                    <div class="form-group">

                        {% if form.text.errors %}
                            {% for e in form.text.errors %}
                                <p class="help-block">{{ e }}</p>
                            {% endfor %}
                        {% endif %}
                        <div id="editormd" class="form-control">
                            {{ form.text(style="display:none;") }}
                        </div>
                    </div>
                    <div>
                        <div class="panel panel-primary">
                            <div class="panel-body">
                                {{ form.categories }}
                                <p>文章分类:</p><a>添加新分类</a>
                                <label >python</label>
                                <input type="checkbox">
                                <label >oracle</label>
                                <input type="checkbox">
                                <label >java</label>
                                <input type="checkbox">
                            </div>
                        </div>

                        <div class="panel-body">
                        </div>
                    </div>

                    <input class="btn btn-primary" type="submit" value="发表">
                </form>

            </div>
            <div class="panel-body">
            </div>
        </div>

    </div>


{% endblock %}

{% block scripts %}
{{ super() }}
    <script src="{{ url_for('static',filename='main/lib/js/jquery1.11.2.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
    <script src="{{ url_for('static',filename='main/lib/js/icheck.js') }}"></script>


    <script>
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_minimal-green',
            radioClass: 'iradio_minimal-green',
            increaseArea: '20%' // optional
          });
        });
    </script>

    <script type="text/javascript">
        var testEditor;

        $(function () {
            testEditor = editormd("editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "{{ url_for('static',filename='editormd/lib/') }}",
                placeholder: "从这开始...",
                watch:false
            });
        });
    </script>

{% endblock %}

查看博客templates/main/Details_blog.html

{% extends "base.html" %}
{% import "main/comment_macros.html" as macros %}

{% block title %}{{blog.title}}{% endblock %}

{% block page_content %}

<div class="container">



<div class="row">


		<div class="col-md-12 column">
            <div class="panel panel-info">
   	            <div class="panel-heading">
		            &nbsp;
	            </div>
	            <div class="panel-body">
                    <div>
                        <h3 style="color:black;"><strong>{{blog.title}}</strong></h3>
                        <br>
                    </div>
                    <div>
                        <p style="position: absolute; lift: 25%;">{{blog.published_time}}</p>
                        <p style="position: absolute; right: 10%;">阅读:{{blog.read}}</p>
                        <br>
                    </div>
                    <div id="test-editormd-view">
                        <hr class="hr0" />

                        <textarea style="display:none;" name="test-editormd-markdown-doc">{{blog.details}}
                        </textarea>

                    </div>
                    <br>
                    <div>
                        {% if comments %}
                            {% for i in comments %}
                            <label >用户{{ i.username }}评论: </label>
                            <p>{{i.timestamp}}</p>
                            <pre style="white-space: pre-wrap;font-size: inherit;">{{i.content}}</pre>
                            {% endfor %}
                        {% endif %}

                        {% if pagination %}
                        <div class="pagination">
                            {{ macros.pagination_widget(pagination, '.details', blog.id) }}
                        </div>
                        {% endif %}
                    </div>

                    <div>
                        <form method="post">
                              <div >
                                  <textarea style="margin: 2px 0;width: 815px;height: 50px;" name="comment" id="comment" placeholder="对博主说点什么？"></textarea>
                              </div>
                              <div>
                                  <input type="submit" value="提交">
                              </div>
                          </form>
                    </div>

                </div>

	            </div>

            </div>

		</div>
</div>


{% endblock %}

{% block scripts %}
{{ super() }}

    <script src="{{ url_for('static',filename='main/lib/js/jquery1.11.2.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/marked.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/prettify.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/raphael.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/underscore.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/sequence-diagram.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/flowchart.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/lib/jquery.flowchart.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/editormd.js') }}"></script>
    <script type="text/javascript">
        testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
            htmlDecode      : "style,script,iframe",

            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    </script>
{% endblock%}

编辑博客templates/main/Edit_blog.html

{% extends "base.html" %}
{% block title %}PoleStar - 编辑博客{% endblock %}

{% block page_content %}
    <div class="row">
        <form method="post">
            {{ form.hidden_tag() }}
            <div class="form-group">
                标题
                {% if form.title.errors %}
                    {% for e in form.title.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.title(class_='form-control') }}
            </div>

            <div class="form-group">

                {% if form.text.errors %}
                    {% for e in form.text.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                <div id="editormd" class="form-control">
                    {{ form.text(style="display:none;") }}
                </div>
            </div>
            <input class="btn btn-primary" type="submit" value="保存">
        </form>
    </div>

{% endblock %}

{% block scripts %}
{{ super() }}
    <script src="{{ url_for('static',filename='main/lib/js/jquery1.11.2.min.js') }}"></script>
    <script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
    <script type="text/javascript">
        var testEditor;

        $(function () {
            testEditor = editormd("editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "{{ url_for('static',filename='editormd/lib/') }}"
                //启动本地图片上传功能
                //imageUpload:true,
                //imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                //imageUploadURL : "{{url_for('main.edit')}}"
            });
        });
    </script>

{% endblock %}

static/main/css/style.css

.navbar-default {
  background-color: #fdfdfd;
  border-color: #ffffff;
}
.navbar-default .navbar-brand {
  color: #101111;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #c70f11;
}
.navbar-default .navbar-text {
  color: #101111;
}
.navbar-default .navbar-nav > li > a {
  color: #101111;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #c70f11;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #fdfdfd;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #101111;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #c70f11;
  background-color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #c70f11;
  background-color: #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #c70f11;
  background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #c70f11;
  background-color: #ffffff;
}
.navbar-default .navbar-toggle {
  border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #101111;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #101111;
}
.navbar-default .navbar-link {
  color: #101111;
}
.navbar-default .navbar-link:hover {
  color: #c70f11;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #101111;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #c70f11;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #c70f11;
    background-color: #ffffff;
  }
}

body {
   background-image: url("/static/images/tree.jpg");
   background-repeat: repeat-y;
   background-attachment:fixed;
   background-size:100%;
 }

.navbar-form navbar-left {
 position: fixed;
 right: 20%;
 }

.hr0{ height:2px;border:none;border-top:1px dashed #1E90FF;}

.edit{
    width: 100%;
    display: flex;
}
.edit>label{
    text-align: right;
    width: 5%;
    margin-right: 10px;
}
.edit>input,textarea,select{
    width: 80%;
    margin-bottom: 10px;
}
.edit>textarea{
    height: 600px;
}
.center{
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
.edit> input[type=button], input[type=reset], input[type=submit]{
    width: 80px;
}


@charset "utf-8";
	/* track base Css */
.container {
	margin-top:15px;
}
.red {
	color:red;
}
#ehong-code-input {
	width:42px;
	letter-spacing:2px;
	margin:0px 8px 0px 0px;
}
.ehong-idcode-val {
	position:relative;
	padding:1px 4px 1px 4px;
	top:0px;
	*top:-3px;
	letter-spacing:4px;
	display:inline;
	cursor:pointer;
	font-size:16px;
	font-family:"Courier New",Courier,monospace;
	text-decoration:none;
	font-weight:bold;
}
.ehong-idcode-val0 {
	border:solid 1px #A4CDED;
	background-color:#ECFAFB;
}
.ehong-idcode-val1 {
	border:solid 1px #A4CDED;
	background-color:#FCEFCF;
}
.ehong-idcode-val2 {
	border:solid 1px #6C9;
	background-color:#D0F0DF;
}
.ehong-idcode-val3 {
	border:solid 1px #6C9;
	background-color:#DCDDD8;
}
.ehong-idcode-val4 {
	border:solid 1px #6C9;
	background-color:#F1DEFF;
}
.ehong-idcode-val5 {
	border:solid 1px #6C9;
	background-color:#ACE1F1;
}
.ehong-code-val-tip {
	font-size:12px;
	color:#1098EC;
	top:0px;
	*top:-3px;
	position:relative;
	margin:0px 0px 0px 4px;
	cursor:pointer;
}

js static/main/lib/js/check_input.js

var settings = {
    e: 'idcode',
    codeType: {
        name: 'follow',
        len: 4
    }, //len是修改验证码长度的
    codeTip: '换个验证码?',
    inputID: 'idcode-btn' //验证元素的ID
};

var _set = {
    storeLable: 'codeval',
    store: '#ehong-code-input',
    codeval: '#ehong-code'
}

$.idcode = {
    getCode: function(option) {
        _commSetting(option);
        return _storeData(_set.storeLable, null);
    },
    setCode: function(option) {
        _commSetting(option);
        _setCodeStyle("#" + settings.e, settings.codeType.name, settings.codeType.len);

    },
    validateCode: function(option) {
        _commSetting(option);
        var inputV;
        if (settings.inputID) {
            inputV = $('#' + settings.inputID).val();

        } else {
            inputV = $(_set.store).val();
        }
        if (inputV.toUpperCase() == _storeData(_set.storeLable, null).toUpperCase()) { //修改的不区分大小写
            return true;
        } else {
            _setCodeStyle("#" + settings.e, settings.codeType.name, settings.codeType.len);
            return false;
        }
    }
};

function _commSetting(option) {
    $.extend(settings, option);
}

function _storeData(dataLabel, data) {
    var store = $(_set.codeval).get(0);
    if (data) {
        $.data(store, dataLabel, data);
    } else {
        return $.data(store, dataLabel);
    }
}

function _setCodeStyle(eid, codeType, codeLength) {
    var codeObj = _createCode(settings.codeType.name, settings.codeType.len);
    var randNum = Math.floor(Math.random() * 6);
    var htmlCode = ''
    if (!settings.inputID) {
        htmlCode = '<span><input id="ehong-code-input" type="text" maxlength="4" /></span>';
    }
    htmlCode += '<div id="ehong-code" class="ehong-idcode-val ehong-idcode-val';
    htmlCode += String(randNum);
    htmlCode += '" href="#" onblur="return false" onfocus="return false" oncontextmenu="return false" onclick="$.idcode.setCode()">' + _setStyle(codeObj) + '</div>' + '<span id="ehong-code-tip-ck" class="ehong-code-val-tip" onclick="$.idcode.setCode()">' + settings.codeTip + '</span>';
    $(eid).html(htmlCode);
    _storeData(_set.storeLable, codeObj);
}

function _setStyle(codeObj) {
    var fnCodeObj = new Array();
    var col = new Array('#BF0C43', '#E69A2A', '#707F02', '#18975F', '#BC3087', '#73C841', '#780320', '#90719B', '#1F72D8', '#D6A03C', '#6B486E', '#243F5F', '#16BDB5');
    var charIndex;
    for (var i = 0; i < codeObj.length; i++) {
        charIndex = Math.floor(Math.random() * col.length);
        fnCodeObj.push('<font color="' + col[charIndex] + '">' + codeObj.charAt(i) + '</font>');
    }
    return fnCodeObj.join('');
}

function _createCode(codeType, codeLength) {
    var codeObj;
    if (codeType == 'follow') {
        codeObj = _createCodeFollow(codeLength);
    } else if (codeType == 'calc') {
        codeObj = _createCodeCalc(codeLength);
    } else {
        codeObj = "";
    }
    return codeObj;
}

function _createCodeCalc(codeLength) {
    var code1, code2, codeResult;
    var selectChar = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
    var charIndex;
    for (var i = 0; i < codeLength; i++) {
        charIndex = Math.floor(Math.random() * selectChar.length);
        code1 += selectChar[charIndex];

        charIndex = Math.floor(Math.random() * selectChar.length);
        code2 += selectChar[charIndex];
    }
    return [parseInt(code1), parseInt(code2), parseInt(code1) + parseInt(code2)];
}

function _createCodeFollow(codeLength) {
    var code = "";
    var selectChar = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

    for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * selectChar.length);
        if (charIndex % 2 == 0) {
            code += selectChar[charIndex].toLowerCase();
        } else {
            code += selectChar[charIndex];
        }
    }
    return code;
}
var regUsername = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}$/;
var regPasswordSpecial = /[~!@#%&=;':",./<>_\}\]\-\$\(\)\*\+\.\[\?\\\^\{\|]/;
var regPasswordAlpha = /[a-zA-Z]/;
var regPasswordNum = /[0-9]/;
var password;
var check = [false, false, false, false, false, false];

//校验成功函数
function success(Obj, counter) {
    Obj.parent().parent().removeClass('has-error').addClass('has-success');
    $('.tips').eq(counter).hide();
    $('.glyphicon-ok').eq(counter).show();
    $('.glyphicon-remove').eq(counter).hide();
    check[counter] = true;

}

// 校验失败函数
function fail(Obj, counter, msg) {
    Obj.parent().parent().removeClass('has-success').addClass('has-error');
    $('.glyphicon-remove').eq(counter).show();
    $('.glyphicon-ok').eq(counter).hide();
    $('.tips').eq(counter).text(msg).show();
    check[counter] = false;
}

// 用户名匹配
$('.container').find('input').eq(0).change(function() {

     if ($(this).val().length < 5) {
        fail($(this), 0, '用户名太短，不能少于5个字符');
    }

});

// 昵称
$('.container').find('input').eq(1).change(function() {
    if ($(this).val().length < 20) {
        success($(this), 1);
    }
    else {
        fail($(this), 1, '昵称过长,不能超过20个字符!');
    }

});

// 邮箱
$('.container').find('input').eq(2).change(function() {

    var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

    if (myReg.test($(this).val())) {
        success($(this), 2);
    } else if ($(this).val().length < 5) {
        fail($(this), 2, '邮箱格式不对!');
    } else {
        fail($(this), 2, '邮箱格式不对!')
    }

});


// 密码匹配

// 匹配字母、数字、特殊字符至少两种的函数
function atLeastTwo(password) {
    var a = regPasswordSpecial.test(password) ? 1 : 0;
    var b = regPasswordAlpha.test(password) ? 1 : 0;
    var c = regPasswordNum.test(password) ? 1 : 0;
    return a + b + c;

}

$('.container').find('input').eq(3).change(function() {

    password = $(this).val();

    if ($(this).val().length < 8) {
        fail($(this), 3, '密码太短，不能少于8个字符');
    } else {


        if (atLeastTwo($(this).val()) < 2) {
            fail($(this), 3, '密码中至少包含字母、数字、特殊字符的两种')
        } else {
            success($(this), 3);
        }
    }
});


// 再次输入密码校验
$('.container').find('input').eq(4).change(function() {

    if ($(this).val() == password) {
        success($(this), 4);
    } else {

        fail($(this), 4, '两次输入的密码不一致');
    }

});


// 验证码
$.idcode.setCode();

$('.container').find('input').eq(5).change(function() {
    var IsBy = $.idcode.validateCode();
    if (IsBy) {
        success($(this), 5);
    } else {
        fail($(this), 5, '验证码输入错误');
    }
});

$('#submit').click(function(e) {
    if (!check.every(function(value) {
            return value == true
        })) {
        e.preventDefault();
        for (key in check) {
            if (!check[key]) {
                $('.container').find('input').eq(key).parent().parent().removeClass('has-success').addClass('has-error')
            }
        }
    }
});


$('#reset').click(function() {
    $('input').slice(0, 6).parent().parent().removeClass('has-error has-success');
    $('.tips').hide();
    $('.glyphicon-ok').hide();
    $('.glyphicon-remove').hide();
    check = [false, false, false, false, false, false, ];
});

引入editormd在线markdown编辑js 下载地址：http://pandao.github.io/editor.md/examples/