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


Posted in Javascript onJuly 31, 2013

在表单提交前进行验证的几种方式 .
在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. 
) 
...
Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 #Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 #Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 #Javascript
javascript中直接写php代码的方法
Jul 31 #Javascript
js控制表单奇偶行样式的简单方法
Jul 31 #Javascript
js中parseInt函数浅谈
Jul 31 #Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 #Javascript
You might like
如何使用php输出时间格式
2013/08/31 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php实现的日历程序
2015/06/18 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
Django 中 cookie的使用
2017/08/17 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
使用Python实现牛顿法求极值
2020/02/10 Python
python3排序的实例方法
2020/10/20 Python
Oracle性能调优原则
2012/05/03 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
护理专业应届毕业生推荐信
2013/11/15 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
贫困证明书范文
2015/06/16 职场文书
养成教育主题班会
2015/08/13 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书