views.py 
  1. from django.shortcuts import render, HttpResponse
  2. from django import forms
  3. import json
  4. import re
  5. from django.core.exceptions import ValidationError
  6. # Create your views here.
  9. def mobile_validate(value):
  10.     mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
  11.     if not mobile_re.match(value):
  12.         raise ValidationError('手机号码格式错误')
  15. class InputForm(forms.Form):
  16.     # 下面使用的变量名必须和html中input标签的name值相同
  17.     # forms 的字段类型包括：IntegerField,CharField,URLField,EmailField,DateField等，但是没有手机号
  18.     # required=True表示对输入做验证
  19.     # error_messages 自定制提示信息
  20.     username = forms.CharField(required=True, error_messages={'required':'用户名不能为空'})
  21.     password = forms.CharField(required=True,
  22.                                min_length=8,
  23.                                max_length=20,
  24.                                error_messages={'required':'密码不能为空','min_length':'至少6位',
  25.                                                'max_length':'至多10位'}
  26.     )
  27.     num = forms.IntegerField(error_messages={'required':'不能为空', 'invalid':'必须是数字'})
  28.     # 自定制验证方法关键就是参数validators，和自己的函数关联起来
  29.     phone = forms.CharField(validators=[mobile_validate,],)
  30.     # django给标签加sytle，关键参数widget ，forms.TextInput 表示生成type="text"的input标签，改成Textarea则生成<textarea>标签
  31.     test = forms.CharField(widget=forms.TextInput(attrs={'class': 'in_tmp'}))
  32.     choice = (
  33.         (1,'北京'),
  34.         (2,'上海')
  35.     )
  36.     t_choice = forms.IntegerField(widget=forms.Select(choices=choice))
  38. def login(request):
  39.     if request.POST:
  40.         objPost = InputForm(request.POST)
  41.         ret = objPost.is_valid()
  42.         if ret:
  43.             print(objPost.clean())
  44.         # else:
  45.         #     # from django.forms.utils import ErrorDict
  46.         #     print(type(objPost.errors),objPost.errors.as_json())
  47.         return render(request, 'login.html', {'data': objPost})
  48.     else:
  49.         objGet = InputForm()
  50.         return render(request, 'login.html',{'data': objGet})
login.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .error-msg{
  8.             color:red;
  9.         }
  10.         .in_tmp{
  11.             border: 1px solid #6a34ff ;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <form action="/login/" method="POST">
  17.         <div>
  18.             <div>
  19.                 {{ data.username }}
  20.                 {% if data.errors.username %}
  21.                     <span class="error-msg">{{ data.errors.username.0 }}</span>
  22.                 {% endif %}
  23.             </div>
  24.             <div>
  25.                 {{ data.password }}
  26.                 {% if data.errors.password %}
  27.                     <span class="error-msg">{{ data.errors.password.0 }}</span>
  28.                 {% endif %}
  29.             </div>
  30.             <div>
  31.                 {{ data.num }}
  32.                 {% if data.errors.num %}
  33.                     <span class="error-msg">{{ data.errors.num.0 }}</span>
  34.                 {% endif %}
  35.             </div>
  36.             <div>
  37.                 {{ data.phone }}
  38.                 {% if data.errors.phone %}
  39.                     <span class="error-msg">{{ data.errors.phone.0 }}</span>
  40.                 {% endif %}
  41.             </div>
  42.             <div>
  43.                 {{ data.test }}
  44.                 {% if data.errors.test %}
  45.                     <span class="error-msg">{{ data.errors.test.0 }}</span>
  46.                 {% endif %}
  47.             </div>
  48.             <div>
  49.                 {{ data.t_choice }}
  50.                 {% if data.errors.t_choice %}
  51.                     <span class="error-msg">{{ data.errors.t_choice.0 }}</span>
  52.                 {% endif %}
  53.             </div>
  54.             <input type="submit" value="提交" />
  55.         </div>
  56.     </form>
  58. </body>
  59. </html>
效果图：
 
select 标签显示数据库数据：