20181006：为什么要使用form表单而不是直接用html模板？校验表单是怎样处理的？

用户登录流程：在forms.py中自己定义定义loginform类（其中包含登陆的表单，比如账号、密码、提交按钮等）→ views.py中路由控制跳转到登陆页面模板（在其中传入form），用户输入了账号、密码后点击“提交”按钮后，前端、后端校验完成后，跳转到登陆成功后的页面。

为什么不直接用写好的html的登陆模板，而要通过loginform中转一下？

显然，如果用户访问登陆页面，直接就 return render_template(“admin/login.html”）也没问题，但是如果要在前端完成复杂一点的校验（比如长度控制、要求只能英文账号）就很困难，所以要引入forms.py，在里面定义表单类class loginform，然后在return render_template的时候，引入这个loginform类return render_template(“admin/login.html”, form=form)。这样，所有的前端校验控制，就可以在这个类里面来完成。

# 不使用form类的前端html模板如下：
<body>
        <form method="get" action='/login'>
            <label>用户名：<input type="text" name="user" value=""></label><br>
            <label>密码：<input type="password" name="password" value=""></label><br>
            <input type="submit" value="登录">
        </form>
    </body>

# 使用form类的前端html模板如下（仅列出了输入用户名的部分）：
<div class="form-group has-feedback">
	<!--这是原来的语句 <input name="user" type="text" class="form-control" placeholder="请输入账号！"> -->
	{{ form.account }}
	<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
	<!-- 这是原来的语句 <div class="col-md-12" id="input_account"></div> -->
	{% for err in form.account.errors %}
    	<div class="col-md-12">
			<font style="color:red">{{ err }}</font>
		</div>
	{% endfor %}
</div>

前后端登陆数据的校验在哪些地方、哪些过程中，怎样完成校验的？

登陆校验是在4个部分中来进行的（4个部分可以同时有也可以部分有）。1-3 部分是在form.py中的class loginform类中完成，4部分是在views.py视图模块中来完成。

网页模板中字段部分直接写上required参数，实现输入框不能为空的校验。当网页模板源码中嵌入了 required=“required” 参数，用户如果让输入框为全空（即0个字符，连空格都没有）则弹出“请填写此字段”或“必须填写该字段”提示（具体提示内容由浏览器控制而非我们的程序控制）。

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

直接定义字段时的校验，使用validators参数来控制。首先是直接定义字段时的校验，使用validators参数来控制。
在自定义验证器 - namefield验证器中来校验。只要在class loginform中添加def validate_XXXX(self,field)函数（其中XXX为字段对象，注意不是字段名称，而是字段对象，如第1点中account就是一个StringField字段对象）。
在views.py页面视图中的转发网址的路由装饰器下的函数中校验。一旦客户点击了页面中的“提交”按钮，系统会先完成以上2步的校验，检验通过后，才会到路由装饰器函数来。这时可以在函数中校验if form.validate_on_submit()的值，如果前面2步的校验都正确，这个值就=TRUE，然后可以在if 中写入需要校验的代码。

从以上总结看出，输入框校验流程按以下顺序优先级处理：

网页模板中：required参数 → 控制不能全空（有空格不算全空）
在 forms.py 模块，表单类（如class loginform）中：
输入框的 validators 参数 → 控制不能全空格、长度、合法性简单校验
自定义验证器validate_XXX → 进行程序控制复杂校验（如：校验账号是否存在等）
视图模块中validate_on_submit() 中 → 也可以用程序控制复杂校验

四个部分最终完成登录校验。下面再就相关细节说明如下：
1、所有检验，都是在用户点击了submit提交按钮之后才会处理。
2、系统会第一步检查，网页模板中直接嵌入的：required参数。如果有嵌入这个参数，当输入框为全空（即0个字符，空格也算字符），弹出“请填写此字段”或“必须填写该字段”提示（具体提示内容由浏览器控制而非我们的程序控制）。
3、在表单模块forms.py中表单类（如class loginform）中加入了参数 “validators=[DataRequired(‘账号不能为空’)”，系统会自动在网页模板中加入第2点中所说的"required”:"required参数，而不管原模板中是否有该参数。这样，实际就这个参数实际也是校验第一条。但是，这个参数可以设置为复杂校验，如：

DataRequired：控制“输入框不能全为空格（注意区别全空）
Length(1,32)：校验长度
Regexp([A-Za-z0-9_.]*$’,0：校验输入是否合法。

附：flask-wtf验证器说明参考

错误信息是如何显示给用户的？以上校验错误中：

第1点的错误提示信息是浏览器控制的，而非我们程序控制的。一般会弹出提示框在输入框的下面。
第2点 ~ 第4点后的错误提示信息，则由网页模板中，代码所给的位置显示到最终用户网页上。

<!--下面注释掉的语句都是原始模板内容，保留是为了对比用 -->
<!--   <form action="" method="post" id="form-data"> -->
        <form method="POST" id="form-data">
            <div class="form-group has-feedback">
                <!-- <input name="user" type="text" class="form-control" placeholder="请输入账号！"> -->
                {{ form.account }}  <!-- 引入loginform的account字段的定义-->
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                <!-- <div class="col-md-12" id="input_account"></div> -->
                <!-- 显示错误信息 -->
                {% for err in form.account.errors %}
                <div class="col-md-12">
                    <font style="color:red">{{ err }}</font>
                </div>
                {% endfor %}
            </div>