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

最新推荐文章于 2025-03-16 22:58:12 发布
最新推荐文章于 2025-03-16 22:58:12 发布
阅读量8.2k 收藏 1
点赞数 1
分类专栏： Web开发技术 javascript/jquery


转载自：http://blog.youkuaiyun.com/qian_f/article/details/9631691

===============================================================


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

formpage1.html

[html]  view plain  copy
  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 plain  copy
  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 plain  copy
  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 plain  copy
  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 plain  copy
  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 plain  copy
  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. ...  


利用JS提交表单的几种方法和验证(必看篇)
11-22
在导师的催促下就总结出以下的几种常用表单提交的方法。 第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功 [removed] function validate(obj) { if (confirm("提交表单?")) {...
jquery+ajax验证不通过也提交表单问题处理
12-12
大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证.  这种方式也比较简单,在...
一些表单验证方法
liuhaixiao
02-08 149
去掉字符串两端的空格      function sTrim(str){         while(str.charAt(0)==" "){             str = str.substring(1,str.length);          }          while(str.charAt(str.length-1)==" "){              str = str....
表单验证实现方法
欧阳鑫
08-30 1265
每个元素进行验证，onblur事件 当每个元素失去焦点时进行验证，如有错误，给出提示 当元素获取焦点时，onfocus事件 -当元素获得焦点时，需要将错误信息清除 提交按钮事件onsubmit需要验证所有表单元素
如何处理前端表单验证，确保用户输入合法？
最新发布
平平无奇的一条咸鱼
03-16 777
前端验证主要在用户提交数据前即时检测输入是否合法，通过合理的策略和工具，可以减少不必要的网络请求和后端压力。建议使用专门的状态管理方案（如Formik、VeeValidate），集中管理验证状态和错误提示。自定义JavaScript验证：实时监听用户输入，使用正则表达式和逻辑判断进行验证，并动态反馈错误信息。使用第三方库：在复杂项目中使用Formik、Yup、VeeValidate等工具简化验证流程和状态管理。前后端双重验证：前端验证提升用户体验，后端验证确保数据安全。
表单验证的实现方法
n34886746的博客
06-01 8656
简单的表单验证 两种验证方式： 1.在表单提交时进行验证，sumbit时 2.在表单控件失去焦点时进行验证 表单验证逻辑一般写在表单提交之前，html5也新增了表单验证形式，表单验证可以使用正则表达式 ...
表单提交前验证实现方法
cg20的专栏
11-27 791
form表单提交是网站中最常见的，基本上所有的网站都会用到。 除非你就一些静态网页，仅仅是展示，而不需要互动，所以不需要提交表单。 但是在提交表单的时候，难免会出现一些意想不到的错误。 比如说数据库里面的name字段，明明是不允许为空，但是在提交表单的时候，没有填写，却提交了。 要如何才能避免这种情况发生呢？ 这时我们就需要在表单提交前进行验证了。 看看下面的代码。
MVC submit提交前验证
FrankyJson的博客
06-14 1214
在form中添加onsubmit = “return check()”属性，先执行check（）方法，返回true则提交，返回false则不提交。<script type="text/javascript"> function check() { //验证方法 if(){return false;} else{return true;} } </script>@us
各种表单验证及方法
Amily8512的博客
01-10 2209
常用的正则表达式: //密码中必须包含大小写 字母、数字、特称字符，长度在8-30之间 密码强：^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}$; //密码中必须包含字母（不区分大小写）、数字、特称字符，长度在8-30之间 密码高：^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$; //密码中必须包含字母（不区分大小写）、数字，长度在8-30之间 密码中：^(?=.*[0-9])(
HTML---表单验证
zhoutong2323的博客
03-01 2052
前端中的表单验证是在用户提交表单之前，对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求，从而减少错误和无效的数据提交，提高数据的质量和准确性。输入类型的验证：检查用户输入的数据是否符合预期的输入类型，如文本、数字、邮箱、密码等。必填字段的验证：确保用户必须填写某些字段，这些字段通常是表单中的关键信息。日期和时间范围的验证：检查用户输入的日期或时间是否在允许的范围内。步长的验证：对于某些需要递增或递减的输入字段，如价格、评分等，验证其步长是否符合要求。
表单验证方法
07-16
表单 提交 验证 校验
ajax提交前先验证,jQuery验证AJAX之前提交(jQuery validation before AJAX sub
weixin_32025789的博客
08-06 586
我有以下的jQuery验证代码的简单注册表格：$(document).ready(function(){$("#registerForm").validate({rules: {Username: {required: true, minlength: 6},Password: {required: true, minlength: 6},re_Password: {required: true,...
ajax表单提交之前验证,提交Ajax之前的jQuery表单验证
weixin_26908317的博客
08-05 306
JavaScript位：$(document).ready(function(){$('#form').submit(function(e){e.preventDefault();var $form = $(this);// check if the input is validif(! $form.valid()) return false;$.ajax({type:'POST',url:'ad...
表单提交前ajax验证,Ajax提交之前的jQuery表单验证
weixin_30475939的博客
08-05 318
JavaScript位：$(document).ready(function(){$('#form').submit(function(e){e.preventDefault();var $form = $(this);// check if the input is validif(! $form.valid()) return false;$.ajax({type:'POST',url:'ad...
表单提交前ajax验证,如何在提交表单之前等待ajax验证完成？
weixin_35752122的博客
08-05 295
表单在validateUsername函数之前提交时遇到问题，有机会在服务器端完成用户名检查。仅在validateUsername函数完成后才如何提交表单？希望这很清楚…form.submit(function(){if (validateUsername() & validateEmail() & validatePassword()) {return true;} else {...
在表单提交前进行数据验证
哈
04-10 859
点击表单中的提交按钮，默认就会提交表单，如果要在表单提交之前做一些校验，那么就可以用jQuery的submit方法。也就是jQuery的submit的方法执行顺序，在表单的提交之前。：return false不往下执行请求form的action，return true继续往下执行请求form的action。
form表单的多种提交方式及提交前验证
热门推荐
qq_42128262的博客
06-21 2万+
以下是本人总结处来的一些form的提交方式，网上还有别的提交方式，这里我总结了大小分为7类，其实就是三类的提交方式，若有哪里不对的，还请评论指出来，大家一起学习学习 1、无任何验证提交（最普通的提交） 该方式不提供任何的验证方式，当我们点击提交时（提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”） for...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值