|
为了减轻后台压力可以利用JavaScript在表单提交前对表单数据进行验证本文整理了常用的几种方式有需求的朋友可以参考下 在表单提交前进行验证的几种方式
在Django中为了减轻后台压力可以利用JavaScript在表单提交前对表单数据进行验证下面提供了有效的几种方式（每个html文件为一种方式）
formpagehtml 复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Example</title>
<script type="text/javascript" src="/Resource/jqueryjs"></script>
<script type="text/javascript">
function jump()
{
//清空表单所有数据
documentgetElementById("firstname")value=""
documentgetElementById("lastname")value=""
$("#firstnameLabel")text("")
$("#lastnameLabel")text("")
}
$(document)ready(function(){
$("#form")bind("submit" function(){
var txt_firstname = $trim($("#firstname")attr("value"))
var txt_lastname = $trim($("#lastname")attr("value"))
$("#firstnameLabel")text("")
$("#lastnameLabel")text("")
var isSuccess = ;
if(txt_firstnamelength == )
{
$("#firstnameLabel")text("firstname不能为空！")
$("#firstnameLabel")css({"color":"red"});
isSuccess = ;
}
if(txt_lastnamelength == )
{
$("#lastnameLabel")text("lastname不能为空！")
$("#lastnameLabel")css({"color":"red"});
isSuccess = ;
}
if(isSuccess == )
{
return false;
}
})
})
</script>
</head>
<body>
提交表单前进行验证(方法一)
<hr width="%" align="left" />
<form id="form" method="post" action="/DealWithForm/">
<table>
<tr>
<td>first_name:</td>
<td><input name="firstname" type="text" id="firstname" /></td>
<td><label id="firstnameLabel"></label></td>
</tr>
<tr>
<td>last_name:</td>
<td><input name="lastname" type="text" id="lastname" /></td>
<td><label id="lastnameLabel"></label></td>
</tr>
</table>
<hr width="%" align="left" />
<button type="submit">提交</button>
<button type="button" onclick="jump();">取消</button>
</form>
</body>
</html>
formpagehtml
复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Example</title>
<script type="text/javascript" src="/Resource/jqueryjs"></script>
<script type="text/javascript">
function jump()
{
//清空表单所有数据
documentgetElementById("firstname")value=""
documentgetElementById("lastname")value=""
$("#firstnameLabel")text("")
$("#lastnameLabel")text("")
}
function check(){
var txt_firstname = $trim($("#firstname")attr("value"))
var txt_lastname = $trim($("#lastname")attr("value"))
$("#firstnameLabel")text("")
$("#lastnameLabel")text("")
var isSuccess = ;
if(txt_firstnamelength == )
{
$("#firstnameLabel")text("firstname不能为空！")
$("#firstnameLabel")css({"color":"red"});
isSuccess = ;
}
if(txt_lastnamelength == )
{
$("#lastnameLabel")text("lastname不能为空！")
$("#lastnameLabel")css({"color":"red"});
isSuccess = ;
}
if(isSuccess == )
{
return false;
}
return true;
}
</script>
</head>
<body>
提交表单前进行验证(方法二)
<hr width="%" align="left" />
<form id="form" method="post" action="/DealWithForm/" onsubmit="return check()">
<table>
<tr>
<td>first_name:</td>
<td><input name="firstname" type="text" id="firstname" /></td>
<td><label id="firstnameLabel"></label></td>
</tr>
<tr>
<td>last_name:</td>
<td><input name="lastname" type="text" id="lastname" /></td>
<td><label id="lastnameLabel"></label></td>
</tr>
</table>
<hr width="%" align="left" />
<button type="submit">提交</button>
<button type="button" onclick="jump();">取消</button>
</form>
</body>
</html>
formpagehtml
复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Example</title>
<script type="text/javascript" src="/Resource/jqueryjs"></script>
<script type="text/javascript">
function jump()
{
//清空表单所有数据
documentgetElementById("firstname")value=""
documentgetElementById("lastname")value=""
$("#firstnameLabel")text("")
$("#lastnameLabel")text("")
}
function checktosubmit(){
var txt_firstname = $trim($("#firstname")attr("value"))
var txt_lastname = $trim($("#lastname")attr("value"))
$("#firstnameLabel")text("")
$("#lastnameLabel")text("")
var isSuccess = ;
if(txt_firstnamelength == )
{
$("#firstnameLabel")text("firstname不能为空！")
$("#firstnameLabel")css({"color":"red"});
isSuccess = ;
}
if(txt_lastnamelength == )
{
$("#lastnameLabel")text("lastname不能为空！")
$("#lastnameLabel")css({"color":"red"});
isSuccess = ;
}
if(isSuccess == )
{
formsubmit();
}
}
</script>
</head>
<body>
提交表单前进行验证(方法三)
<hr width="%" align="left" />
<form id="form" method="post" action="/DealWithForm/">
<table>
<tr>
<td>first_name:</td>
<td><input name="firstname" type="text" id="firstname" /></td>
<td><label id="firstnameLabel"></label></td>
</tr>
<tr>
<td>last_name:</td>
<td><input name="lastname" type="text" id="lastname" /></td>
<td><label id="lastnameLabel"></label></td>
</tr>
</table>
<hr width="%" align="left" />
<button type="button" onclick="checktosubmit()">提交</button>
<button type="button" onclick="jump();">取消</button>
</form>
</body>
</html>
以下是视图函数URL配置以及相关设置
viewspy
复制代码 代码如下:
#coding: utf
from djangohttp import HttpResponse
from djangoshortcuts import render_to_response
def DealWithForm(request):
if requestmethod=="POST":
FirstName=requestPOSTget(firstname)
LastName=requestPOSTget(lastname)
if FirstName and LastName:
response=HttpResponse()
responsewrite("<html><body>"+FirstName+" "+LastName+u"！ 你提交了表单！</body></html>")
return response
else:
response=HttpResponse()
responsewrite(<html><script type="text/javascript">alert("firstname或lastname不能为空！");\
windowlocation="/DealWithForm"</script></html>)
return response
else:
return render_to_response(formpagehtml)
def DealWithForm(request):
if requestmethod=="POST":
FirstName=requestPOSTget(firstname)encode("utf")
LastName=requestPOSTget(lastname)encode("utf")
if FirstName and LastName:
html="<html><body>"+FirstName+" "+LastName+"！ 你提交了表单！"+"</body></html>"
return HttpResponse(html)
else:
response=HttpResponse()
responsewrite(<html><script type="text/javascript">alert("firstname或lastname不能为空！");\
windowlocation="/DealWithForm"</script></html>)
return response
else:
return render_to_response(formpagehtml)
def DealWithForm(request):
if requestmethod=="POST":
FirstName=requestPOSTget(firstname)
LastName=requestPOSTget(lastname)
if FirstName and LastName:
response=HttpResponse()
responsewrite(<html><body>+FirstName+LastName+u！ 你提交了表单！</body></html>)
return response
else:
response=HttpResponse()
responsewrite(<html><script type="text/javascript">alert("firstname或lastname不能为空！");\
windowlocation="/DealWithForm"</script></html>)
return response
else:
return render_to_response(formpagehtml)
urlspy
复制代码 代码如下:
from djangoconfurlsdefaults import patterns include url
import views
from djangoconf import settings
urlpatterns = patterns(
url(r^Resource/(?P<path>*)$djangoviewsstaticserve{document_root:settingsSTATIC_RESOURCE})
url(r^DealWithFormviewsDealWithForm)
url(r^DealWithFormviewsDealWithForm)
url(r^DealWithFormviewsDealWithForm)
)
settingspy
复制代码 代码如下:
# Django settings for CheckFormBeforeSubmit project
import os
HERE = ospathabspath(ospathdirname(__file__))
DEBUG = True
TEMPLATE_DEBUG = DEBUG
STATIC_RESOURCE=ospathjoin(HERE "resource")
MIDDLEWARE_CLASSES = (
djangomiddlewarecommonCommonMiddleware
djangocontribsessionsmiddlewareSessionMiddleware
djangomiddlewarecsrfCsrfViewMiddleware
djangocontribauthmiddlewareAuthenticationMiddleware
djangocontribmessagesmiddlewareMessageMiddleware
djangomiddlewarecsrfCsrfResponseMiddleware
)
ROOT_URLCONF = CheckFormBeforeSubmiturls
TEMPLATE_DIRS = (
ospathjoin(HEREtemplate)
# Put strings here like "/home/html/django_templates" or "C:/www/django/templates"
# Always use forward slashes even on Windows
# Dont forget to use absolute paths not relative paths
)
|
