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

http://blog.csdn.net/qian_f/article/details/9631691

在Django中,为了减轻后台压力,可以利用JavaScript在表单提交前对表单数据进行验证。下面提供了有效的几种方式(每个.html文件为一种方式)。

formpage1.html

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Example1</title>  
  6. <script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>  
  7.   
  8. <script type="text/javascript">  
  9. function jump()  
  10. {  
  11.     //清空表单所有数据  
  12.     document.getElementById("firstname").value=""  
  13.     document.getElementById("lastname").value=""  
  14.     $("#firstnameLabel").text("")  
  15.     $("#lastnameLabel").text("")  
  16. }  
  17.   
  18. $(document).ready(function(){  
  19.     $("#form1").bind("submit", function(){  
  20.         var txt_firstname = $.trim($("#firstname").attr("value"))  
  21.         var txt_lastname = $.trim($("#lastname").attr("value"))  
  22.           
  23.         $("#firstnameLabel").text("")  
  24.         $("#lastnameLabel").text("")  
  25.           
  26.         var isSuccess = 1;  
  27.         if(txt_firstname.length == 0)  
  28.         {  
  29.             $("#firstnameLabel").text("firstname不能为空!")  
  30.             $("#firstnameLabel").css({"color":"red"});  
  31.             isSuccess = 0;  
  32.         }  
  33.         if(txt_lastname.length == 0)  
  34.         {  
  35.             $("#lastnameLabel").text("lastname不能为空!")  
  36.             $("#lastnameLabel").css({"color":"red"});  
  37.             isSuccess = 0;  
  38.         }  
  39.         if(isSuccess == 0)  
  40.         {  
  41.             return false;  
  42.         }  
  43.         })  
  44.     })  
  45. </script>  
  46. </head>  
  47. <body>  
  48. 提交表单前进行验证(方法一)  
  49. <hr width="40%" align="left" />  
  50. <form id="form1" method="post" action="/DealWithForm1/">   
  51. <table>  
  52. <tr>  
  53. <td>first_name:</td>  
  54. <td><input name="firstname" type="text" id="firstname" /></td>  
  55. <td><label id="firstnameLabel"></label></td>  
  56. </tr>  
  57. <tr>  
  58. <td>last_name:</td>  
  59. <td><input name="lastname" type="text" id="lastname" /></td>  
  60. <td><label id="lastnameLabel"></label></td>  
  61. </tr>  
  62. </table>  
  63. <hr width="40%" align="left" />  
  64. <button type="submit">提交</button>  
  65. <button type="button" onclick="jump();">取消</button>  
  66. </form>  
  67. </body>  
  68. </html>  

formpage2.html

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Example2</title>  
  6. <script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>  
  7.   
  8. <script type="text/javascript">  
  9. function jump()  
  10. {  
  11.     //清空表单所有数据  
  12.     document.getElementById("firstname").value=""  
  13.     document.getElementById("lastname").value=""  
  14.     $("#firstnameLabel").text("")  
  15.     $("#lastnameLabel").text("")  
  16. }  
  17.   
  18. function check(){  
  19.     var txt_firstname = $.trim($("#firstname").attr("value"))  
  20.     var txt_lastname = $.trim($("#lastname").attr("value"))  
  21.       
  22.     $("#firstnameLabel").text("")  
  23.     $("#lastnameLabel").text("")  
  24.       
  25.     var isSuccess = 1;  
  26.     if(txt_firstname.length == 0)  
  27.     {  
  28.         $("#firstnameLabel").text("firstname不能为空!")  
  29.         $("#firstnameLabel").css({"color":"red"});  
  30.         isSuccess = 0;  
  31.     }  
  32.     if(txt_lastname.length == 0)  
  33.     {  
  34.         $("#lastnameLabel").text("lastname不能为空!")  
  35.         $("#lastnameLabel").css({"color":"red"});  
  36.         isSuccess = 0;  
  37.     }  
  38.     if(isSuccess == 0)  
  39.     {  
  40.         return false;  
  41.     }  
  42.     return true;  
  43.     }  
  44. </script>  
  45. </head>  
  46. <body>  
  47. 提交表单前进行验证(方法二)  
  48. <hr width="40%" align="left" />  
  49. <form id="form1" method="post" action="/DealWithForm1/" onsubmit="return check()">   
  50. <table>  
  51. <tr>  
  52. <td>first_name:</td>  
  53. <td><input name="firstname" type="text" id="firstname" /></td>  
  54. <td><label id="firstnameLabel"></label></td>  
  55. </tr>  
  56. <tr>  
  57. <td>last_name:</td>  
  58. <td><input name="lastname" type="text" id="lastname" /></td>  
  59. <td><label id="lastnameLabel"></label></td>  
  60. </tr>  
  61. </table>  
  62. <hr width="40%" align="left" />  
  63. <button type="submit">提交</button>  
  64. <button type="button" onclick="jump();">取消</button>  
  65. </form>  
  66. </body>  
  67. </html>  

formpage3.html

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Example3</title>  
  6. <script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>  
  7.   
  8. <script type="text/javascript">  
  9. function jump()  
  10. {  
  11.     //清空表单所有数据  
  12.     document.getElementById("firstname").value=""  
  13.     document.getElementById("lastname").value=""  
  14.     $("#firstnameLabel").text("")  
  15.     $("#lastnameLabel").text("")  
  16. }  
  17.   
  18. function checktosubmit(){  
  19.     var txt_firstname = $.trim($("#firstname").attr("value"))  
  20.     var txt_lastname = $.trim($("#lastname").attr("value"))  
  21.       
  22.     $("#firstnameLabel").text("")  
  23.     $("#lastnameLabel").text("")  
  24.       
  25.     var isSuccess = 1;  
  26.     if(txt_firstname.length == 0)  
  27.     {  
  28.         $("#firstnameLabel").text("firstname不能为空!")  
  29.         $("#firstnameLabel").css({"color":"red"});  
  30.         isSuccess = 0;  
  31.     }  
  32.     if(txt_lastname.length == 0)  
  33.     {  
  34.         $("#lastnameLabel").text("lastname不能为空!")  
  35.         $("#lastnameLabel").css({"color":"red"});  
  36.         isSuccess = 0;  
  37.     }  
  38.     if(isSuccess == 1)  
  39.     {  
  40.         form1.submit();  
  41.     }  
  42. }  
  43. </script>  
  44. </head>  
  45. <body>  
  46. 提交表单前进行验证(方法三)  
  47. <hr width="40%" align="left" />  
  48. <form id="form1" method="post" action="/DealWithForm1/">   
  49. <table>  
  50. <tr>  
  51. <td>first_name:</td>  
  52. <td><input name="firstname" type="text" id="firstname" /></td>  
  53. <td><label id="firstnameLabel"></label></td>  
  54. </tr>  
  55. <tr>  
  56. <td>last_name:</td>  
  57. <td><input name="lastname" type="text" id="lastname" /></td>  
  58. <td><label id="lastnameLabel"></label></td>  
  59. </tr>  
  60. </table>  
  61. <hr width="40%" align="left" />  
  62. <button type="button" onclick="checktosubmit()">提交</button>  
  63. <button type="button" onclick="jump();">取消</button>  
  64. </form>  
  65. </body>  
  66. </html>  




以下是视图函数、URL配置以及相关设置



views.py

[python] view plaincopy
  1. #coding: utf-8  
  2.   
  3. from django.http import HttpResponse  
  4. from django.shortcuts import render_to_response  
  5.   
  6. def DealWithForm1(request):  
  7.     if request.method=="POST":  
  8.         FirstName=request.POST.get('firstname','')  
  9.         LastName=request.POST.get('lastname','')  
  10.         if FirstName and LastName:  
  11.             response=HttpResponse()  
  12.             response.write("<html><body>"+FirstName+" "+LastName+u"! 你提交了表单!</body></html>")  
  13.             return response  
  14.           
  15.         else:  
  16.             response=HttpResponse()  
  17.             response.write('<html><script type="text/javascript">alert("firstname或lastname不能为空!");\  
  18. window.location="/DealWithForm1"</script></html>')  
  19.             return response  
  20.     else:  
  21.         return render_to_response('formpage1.html')  
  22.   
  23.   
  24. def DealWithForm2(request):  
  25.     if request.method=="POST":  
  26.         FirstName=request.POST.get('firstname','').encode("utf-8")  
  27.         LastName=request.POST.get('lastname','').encode("utf-8")  
  28.         if FirstName and LastName:  
  29.             html="<html><body>"+FirstName+" "+LastName+"! 你提交了表单!"+"</body></html>"  
  30.             return HttpResponse(html)  
  31.         else:  
  32.             response=HttpResponse()  
  33.             response.write('<html><script type="text/javascript">alert("firstname或lastname不能为空!");\  
  34. window.location="/DealWithForm2"</script></html>')  
  35.             return response  
  36.     else:  
  37.         return render_to_response('formpage2.html')  
  38.   
  39.   
  40. def DealWithForm3(request):  
  41.     if request.method=="POST":  
  42.         FirstName=request.POST.get('firstname','')  
  43.         LastName=request.POST.get('lastname','')  
  44.         if FirstName and LastName:  
  45.             response=HttpResponse()  
  46.             response.write('<html><body>'+FirstName+LastName+u'! 你提交了表单!</body></html>')  
  47.             return response  
  48.           
  49.         else:  
  50.             response=HttpResponse()  
  51.             response.write('<html><script type="text/javascript">alert("firstname或lastname不能为空!");\  
  52. window.location="/DealWithForm3"</script></html>')  
  53.             return response  
  54.     else:  
  55.         return render_to_response('formpage3.html')  


urls.py

[python] view plaincopy
  1. from django.conf.urls.defaults import patterns, include, url  
  2. import views  
  3. from django.conf import settings  
  4.   
  5. urlpatterns = patterns('',  
  6.     url(r'^Resource/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_RESOURCE}),  
  7.       
  8.     url(r'^DealWithForm1','views.DealWithForm1'),  
  9.     url(r'^DealWithForm2','views.DealWithForm2'),  
  10.     url(r'^DealWithForm3','views.DealWithForm3'),  
  11. )  

settings.py

[python] view plaincopy
  1. # Django settings for CheckFormBeforeSubmit project.  
  2.   
  3. import os  
  4. HERE = os.path.abspath(os.path.dirname(__file__))  
  5.   
  6. DEBUG = True  
  7. TEMPLATE_DEBUG = DEBUG  
  8. ...  
  9. STATIC_RESOURCE=os.path.join(HERE, "resource")  
  10. ...  
  11. MIDDLEWARE_CLASSES = (  
  12.     'django.middleware.common.CommonMiddleware',  
  13.     'django.contrib.sessions.middleware.SessionMiddleware',  
  14.     'django.middleware.csrf.CsrfViewMiddleware',  
  15.     'django.contrib.auth.middleware.AuthenticationMiddleware',  
  16.     'django.contrib.messages.middleware.MessageMiddleware',  
  17.     'django.middleware.csrf.CsrfResponseMiddleware',  
  18. )  
  19.   
  20. ROOT_URLCONF = 'CheckFormBeforeSubmit.urls'  
  21.   
  22. TEMPLATE_DIRS = (  
  23.     os.path.join(HERE,'template'),  
  24.     # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".  
  25.     # Always use forward slashes, even on Windows.  
  26.     # Don't forget to use absolute paths, not relative paths.  
  27. )  
  28. ...  
更多0
0
展开阅读全文

表单提交上传文件验证

06-14

上传文件已经ok,ajax对文件上传前的验证,验证的内容为:rn1.首先判断文件是否为空,为空则提醒选择文件;rn2.如果不为空得到文件名,通过ajax传到后台,根据文件名来查询文件,判断文件是否存在,*如果存在就提示是否要替换此文件,**点击是就重新上传,将原文件覆盖;**点击取消则不会覆盖原文件。rn需求就是上面所述,提示消息是否替换的时候点击确定,就是执行不了覆盖,如果上传的文件数据库里没有就可以正常上传,前太代码如下,那位高手指点一下,在线等...谢谢了rnrnjquery代码:rn[code=javascript]//文件上传前的验证rn function check()rn var file=document.getElementById("myFile").value;rn var wid=document.getElementById("workflowId").value;rn var arr=new Array();rn arr=file.split('\\');rn var name=arr[arr.length-1];rn if(file=="")rn top.Dialog.alert("请选择需要上传的文件!");rn return false;rn elsern var okk=false;rn $.ajax(rn type:"post",rn async:false,rn url:"yanZhengWenDang.action?dt="+new Date().getTime(),rn data:"wjm":name,"wid":wid,rn success:function(data)rn if(data.ok)rn //判断是否要替换rn top.Dialog.confirm("该文件名已经存在,是否要替换?",function funcOK()rn okk=true;,function funcCal()okk=false;);rn elsern okk=true;rn rn ,rn dataType:"json"rn );rn return okk;rn rn rn[/code]rnrnrn表单上传文件的前台代码:[code=html]rn rn rn rn 文件上传: rn rn rn rn rn rn rn [/code]rn 论坛

表单提交进行AJAX验证

02-16

// $("#myWordForm").submit(function()rnrn// if($(".areaBg1").val().length<5)rn// alert("真心话主题最少5个字!");rn// return false;rn// rn// if($(".area_bg").val().length<2)rn// alert("真心话坦白最少2个字");rn// return false;rn// elsern// $(".ajaxSubInfo").html("提交中......");rn// $.ajax(rn// type: "POST",rn// url: "/realword/ajax/ajax.php",rn// data: "title="+$('.areaBg1').val()+"&t=is_send",rn// success: function(msg)rn// if(msg)rn// return true;rn// elsern// return false;rn// rn// rn// );rnrn// return false; rn// ;rnrnrnrnrn上边是JQUERY代码,连自己看着都晕,其实似乎不用贴代码,大概说下需求:rnrn项目中需要:rn表单提交之前用AJAX验证表单的TITLE是否重复,如果不重复就提交,否则就返回FALSE;rn提交不能是AJAX提交,做SERVER端的兄弟不答应。。。。rnrn现在的情况是自己写的以上代码,在还没有进行AJAX验证的情况下,表单已经提交,发生页面跳转。。。。rn不知道需要用个什么技巧,或者逻辑能把这个东西控制下,在AJAX验证成功之前不执行提交。验证成功之后再提交。rnrn再强调,表单的提交是非AJAX提交,验证是需要做在表单提交的时候验证。。。。。rnrn恳请了解的人指点指点,CSDN上的菜鸟,连分数都不知道是怎么回事情,光看见大家送分送分的,我都不会送,口头上表示下歉意。。。。rn 论坛

没有更多推荐了,返回首页