在表单提交前进行验证的几种方式整理

在表单提交前进行验证的几种方式 .
在Django中，为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证。下面提供了有效的几种方式（每个.html文件为一种方式）。
formpage1.html
复制代码代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example1</title>
<script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>
<script type="text/javascript">
function jump（）
{
//清空表单所有数据
document.getElementById（"firstname"）.value=""
document.getElementById（"lastname"）.value=""
$（"#firstnameLabel"）.text（""）
$（"#lastnameLabel"）.text（""）
}
$（document）.ready（function（）{
$（"#form1"）.bind（"submit", function（）{
var txt_firstname = $.trim（$（"#firstname"）.attr（"value"））
var txt_lastname = $.trim（$（"#lastname"）.attr（"value"））

$（"#firstnameLabel"）.text（""）
$（"#lastnameLabel"）.text（""）

var isSuccess = 1;
if（txt_firstname.length == 0）
{
$（"#firstnameLabel"）.text（"firstname不能为空！"）
$（"#firstnameLabel"）.css（{"color":"red"}）;
isSuccess = 0;
}
if（txt_lastname.length == 0）
{
$（"#lastnameLabel"）.text（"lastname不能为空！"）
$（"#lastnameLabel"）.css（{"color":"red"}）;
isSuccess = 0;
}
if（isSuccess == 0）
{
return false;
}
}）
}）
</script>
</head>
<body>
提交表单前进行验证（方法一）
<hr width="40%" align="left" />
<form id="form1" method="post" action="/DealWithForm1/">
<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="40%" align="left" />
<button type="submit">提交</button>
<button type="button" onclick="jump（）;">取消</button>
</form>
</body>
</html>

formpage2.html
复制代码代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example2</title>
<script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>
<script type="text/javascript">
function jump（）
{
//清空表单所有数据
document.getElementById（"firstname"）.value=""
document.getElementById（"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 = 1;
if（txt_firstname.length == 0）
{
$（"#firstnameLabel"）.text（"firstname不能为空！"）
$（"#firstnameLabel"）.css（{"color":"red"}）;
isSuccess = 0;
}
if（txt_lastname.length == 0）
{
$（"#lastnameLabel"）.text（"lastname不能为空！"）
$（"#lastnameLabel"）.css（{"color":"red"}）;
isSuccess = 0;
}
if（isSuccess == 0）
{
return false;
}
return true;
}
</script>
</head>
<body>
提交表单前进行验证（方法二）
<hr width="40%" align="left" />
<form id="form1" method="post" action="/DealWithForm1/" 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="40%" align="left" />
<button type="submit">提交</button>
<button type="button" onclick="jump（）;">取消</button>
</form>
</body>
</html>

formpage3.html
复制代码代码如下:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example3</title>
<script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>
<script type="text/javascript">
function jump（）
{
//清空表单所有数据
document.getElementById（"firstname"）.value=""
document.getElementById（"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 = 1;
if（txt_firstname.length == 0）
{
$（"#firstnameLabel"）.text（"firstname不能为空！"）
$（"#firstnameLabel"）.css（{"color":"red"}）;
isSuccess = 0;
}
if（txt_lastname.length == 0）
{
$（"#lastnameLabel"）.text（"lastname不能为空！"）
$（"#lastnameLabel"）.css（{"color":"red"}）;
isSuccess = 0;
}
if（isSuccess == 1）
{
form1.submit（）;
}
}
</script>
</head>
<body>
提交表单前进行验证（方法三）
<hr width="40%" align="left" />
<form id="form1" method="post" action="/DealWithForm1/">
<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="40%" align="left" />
<button type="button" onclick="checktosubmit（）">提交</button>
<button type="button" onclick="jump（）;">取消</button>
</form>
</body>
</html>

以下是视图函数、URL配置以及相关设置
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
views.py
复制代码代码如下:
#coding: utf-8
from django.http import HttpResponse
from django.shortcuts import render_to_response
def DealWithForm1（request）:
if request.method=="POST":
FirstName=request.POST.get（"firstname",""）
LastName=request.POST.get（"lastname",""）
if FirstName and LastName:
response=HttpResponse（）
response.write（"<html><body>"+FirstName+" "+LastName+u"！你提交了表单！</body></html>"）
return response
else:
response=HttpResponse（）
response.write（"<html><script type="text/javascript">alert（"firstname或lastname不能为空！"）;
window.location="/DealWithForm1"</script></html>"）
return response
else:
return render_to_response（"formpage1.html"）
def DealWithForm2（request）:
if request.method=="POST":
FirstName=request.POST.get（"firstname",""）.encode（"utf-8"）
LastName=request.POST.get（"lastname",""）.encode（"utf-8"）
if FirstName and LastName:
html="<html><body>"+FirstName+" "+LastName+"！你提交了表单！"+"</body></html>"
return HttpResponse（html）
else:
response=HttpResponse（）
response.write（"<html><script type="text/javascript">alert（"firstname或lastname不能为空！"）;
window.location="/DealWithForm2"</script></html>"）
return response
else:
return render_to_response（"formpage2.html"）
def DealWithForm3（request）:
if request.method=="POST":
FirstName=request.POST.get（"firstname",""）
LastName=request.POST.get（"lastname",""）
if FirstName and LastName:
response=HttpResponse（）
response.write（"<html><body>"+FirstName+LastName+u"！你提交了表单！</body></html>"）
return response
else:
response=HttpResponse（）
response.write（"<html><script type="text/javascript">alert（"firstname或lastname不能为空！"）;
window.location="/DealWithForm3"</script></html>"）
return response
else:
return render_to_response（"formpage3.html"）

urls.py
复制代码代码如下:
from django.conf.urls.defaults import patterns, include, url
import views
from django.conf import settings
urlpatterns = patterns（"",
url（r"^Resource/（？P<path>.*）$","django.views.static.serve",{"document_root":settings.STATIC_RESOURCE}）,
url（r"^DealWithForm1","views.DealWithForm1"）,
url（r"^DealWithForm2","views.DealWithForm2"）,
url（r"^DealWithForm3","views.DealWithForm3"）,
）

settings.py
复制代码代码如下:
# Django settings for CheckFormBeforeSubmit project.
import os
HERE = os.path.abspath（os.path.dirname（__file__））
DEBUG = True
TEMPLATE_DEBUG = DEBUG
...
STATIC_RESOURCE=os.path.join（HERE, "resource"）
...
MIDDLEWARE_CLASSES = （
"django.middleware.common.CommonMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.csrf.CsrfResponseMiddleware",
）
ROOT_URLCONF = "CheckFormBeforeSubmit.urls"
TEMPLATE_DIRS = （
os.path.join（HERE,"template"）,
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don"t forget to use absolute paths, not relative paths.
）
...