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


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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
前端性能优化及技巧
2016/05/06 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
vue实现选中效果
2020/10/07 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python搜索指定目录的方法
2015/04/29 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
django数据库自动重连的方法实例
2019/07/21 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
水毁工程实施方案
2014/04/01 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
中学总务处工作总结
2015/08/12 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书