form+ajax实现验证
#obj.errors返回的是ErrorDict,不是字典（虽然继承字典）
#obj.errors.as_json() 返回的字符串（前端要连续反解两次）
#obj.errors.as_data() 返回原生的字典 但是返回value 是ValidationError，不能直接序列化
1）通过errors.as_data()实现数据绑定和返回，errors.as_data() 返回原生的字典 但是返回value 是ValidationError，不能直接序列化， 通过json属性cls转换是ValidationError为字典返回。优点：前端jquery不需要JSON.parse转换两次。
2）通过errors.as_json()实现数据绑定和返回。as_json返回的是字符串。
前端返回：需要两次JSON.parse转换（第一次：HttpResponse返回的是字符串；第二次： 返回的error字典中的value是字符串，需要在转成字典，才可以访问）
示例1：注册信息
#两种方式1：as_data(注意view中绑定方式和模板中jqeury调用方式)
froms.py
class RegisterForm(forms.Form):
username = fields.CharField(
error_messages={"required": "用户名不能为空"},
widget=widgets.Input(attrs={"class": "form-control"})
)
email = fields.EmailField(
error_messages={'required':'邮箱不能为空','invalid':'邮箱格式错误'},
widget=widgets.Input(attrs={"class": "form-control"})
)
password = fields.CharField(
error_messages={"required": "密码不能为空"},
widget=widgets.Input(attrs={"class": "form-control"})
)
password2 = fields.CharField(error_messages={"required": "密码不能为空"},
widget=widgets.Input(attrs={"class": "form-control"}))
check_code = fields.CharField(error_messages={"required": "验证码不能为空"},
widget=widgets.Input(attrs={"class": "form-control"}))
def clean_username(self):
"""
验证用户存不存在
:return:
"""
obj = models.UserInfo.objects.filter(username=self.cleaned_data['username'])
# 用户存在返回原来的值
if not obj:
return self.cleaned_data['username']
else:
raise ValidationError(message="用户已存在，请更换其他用户名", code="xxxx")
#views.py
from django.core.exceptions import ValidationError
class JsonCunstomEncode(json.JSONEncoder):
def default(self, field):
if isinstance(field,ValidationError):
return {"code":field.code,"message":field.message}
else:
return json.JSONEncoder.default(self,field)
def register(request):
"""
注册
:param request:
:return:
"""
ret={"status":False,"error":None,"data":None}
if request.method=="GET":
register_obj=forms.RegisterForm()
return render(request, 'register.html',{"register_obj":register_obj})
elif request.method=="POST":
register_obj=forms.RegisterForm(request.POST)
if register_obj.is_valid():
ret["status"]=True
ret["data"]=register_obj.cleaned_data
else:
ret["error"]=register_obj.errors.as_data()
result=json.dumps(ret,cls=JsonCunstomEncode)
#不能使用render，使用render返回数据,前端var data1=JSON.parse(arg)转换报错。可以使用HttpResponse直接返回数据
#return render(request, 'register.html',{"result":result})
return HttpResponse(result)
模块实现：
<div class="register">
<div style="font-size: 25px; font-weight: bold;text-align: center;">
用户注册
</div>
<form role="form" id="register_form">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
<p id="error_username"></p>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email">
<p id="error_email"></p>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
<p id="error_password"></p>
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password2">
<p id="error_password2"></p>
</div>
<div class="form-group">
<label for="password">验证码</label>
<div class="row">
<div class="col-xs-7">
<input type="password" class="form-control" id="password" placeholder="请输入验证码" name="check_code">
<p id="error_check_code"></p>
</div>
<div class="col-xs-5">
<img src="/check_code.html">
</div>
</div>
<p id="show_error"></p>
</div>
<a id="register_a" type="submit" class="btn btn-default" >下一步</a>
</form>
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script>
$("#register_a").click(
function(){
$.ajax({
url:'{% url "register" %}',
type:"POST",
//headers: {"X-CSRFtoken":$.cookie("csrftoken")},如果是用serialize，他就csrftoken一起发送过去，所以不需要加headers
data:$("#register_form").serialize(),
success:function(arg){
var data1=JSON.parse(arg);
console.log(data1);
//#如果返回的状态为false，输出出错的内容
if (!data1.status){
//清空所有error p标签的内容
$("#register_form").find('p[id*=error_]').each(
function(){
$(this).text("")
}
)
//根据错误信息动态绑定到p标签
for (var item in data1.error){
var tmp='#error_'+item+''
$(tmp).text(data1.error[item][0].message);
}
/*
手动绑定标签，但是会存在error中没有的信息报错
$("#error_username").text(data1.error["username"][0].message);
$("#error_email").text(data1.error.email[0].message);
$("#error_password").text(data1.error.password[0].message);
$("#error_password2").text(data1.error.password2[0].message);
$("#error_check_code").text(data1.error.check_code[0].message);
*/
}
else{
//跳转到后台
location.href='{% url "base_info" %}'
}
}
})
}
)
</script>
方式2：as_json
views.py
def register(request):
"""
注册
:param request:
:return:
"""
ret={"status":False,"error":None,"data":None}
if request.method=="GET":
register_obj=forms.RegisterForm()
return render(request, 'register.html',{"register_obj":register_obj})
elif request.method=="POST":
register_obj=forms.RegisterForm(request.POST)
if register_obj.is_valid():
ret["status"]=True
ret["data"]=register_obj.cleaned_data
else:
ret["error"]=register_obj.errors.as_json()
result=json.dumps(ret)
#不能使用render，使用render返回数据,前端var data1=JSON.parse(arg)转换报错。可以使用HttpResponse直接返回数据
#return render(request, 'register.html',{"result":result})
return HttpResponse(result)
模板：
<div class="register">
<div style="font-size: 25px; font-weight: bold;text-align: center;">
用户注册
</div>
<form role="form" id="register_form">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
<p id="error_username"></p>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="email">
<p id="error_email"></p>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
<p id="error_password"></p>
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password2">
<p id="error_password2"></p>
</div>
<div class="form-group">
<label for="password">验证码</label>
<div class="row">
<div class="col-xs-7">
<input type="password" class="form-control" id="password" placeholder="请输入验证码" name="check_code">
<p id="error_check_code"></p>
</div>
<div class="col-xs-5">
<img src="/check_code.html">
</div>
</div>
<p id="show_error"></p>
</div>
<a id="register_a" type="submit" class="btn btn-default" >下一步</a>
</form>
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script>
$("#register_a").click(
function(){
$.ajax({
url:'{% url "register" %}',
type:"POST",
//headers: {"X-CSRFtoken":$.cookie("csrftoken")},如果是用serialize，他就csrftoken一起发送过去，所以不需要加headers
data:$("#register_form").serialize(),
success:function(arg){
//第一次转换
var data1=JSON.parse(arg);
console.log(data1);
//#如果返回的状态为false，输出出错的内容
if (!data1.status){
//清空所有error p标签的内容
$("#register_form").find('p[id*=error_]').each(
function(){
$(this).text("")
}
)
//第二次转换
var error_list=JSON.parse(data1.error)
//根据错误信息动态绑定到p标签
for (var item in error_list){
var tmp='#error_'+item+''
$(tmp).text(error_list[item][0].message);
}
/*
手动绑定标签，但是会存在error中没有的信息报错
$("#error_username").text(data1.error["username"][0].message);
$("#error_email").text(data1.error.email[0].message);
$("#error_password").text(data1.error.password[0].message);
$("#error_password2").text(data1.error.password2[0].message);
$("#error_check_code").text(data1.error.check_code[0].message);
*/
}
else{
//跳转到后台
location.href='{% url "base_info" %}'
}
}
})
}
)
</script>
