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

时间：2020-11-16 11:13:28|栏目：JavaScript代码|点击：次

在表单提交前进行验证的几种方式 .
在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. 
 
) 
 
...

上一篇：查询json的数据结构的8种方式简介

栏目：JavaScript代码

下一篇：JavaScript下利用fso判断文件是否存在的代码

本文标题：在表单提交前进行验证的几种方式整理

本文地址：http://www.codeinn.net/misctech/22941.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程