首页 > 网络编程 > JavaScript > javascript技巧 > 表单提交前验证

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

2013-07-31 14:48:18 作者：

为了减轻后台压力，可以利用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. 
) 
... 

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

您可能感兴趣的文章: