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

Posted 知

篇首语：不磨不炼，不成好汉。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 在表单提交前进行验证的几种方式整理相关的知识，希望对你有一定的参考价值。

为了减轻后台压力 可以利用JavaScript在表单提交前对表单数据进行验证 本文整理了常用的几种方式 有需求的朋友可以参考下  

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

复制代码 代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>Example </title> <script type=text/javascript src=/Resource/jquery js></script> <script type=text/javascript> function jump() //清空表单所有数据 document getElementById("firstname") value="" document getElementById("lastname") value="" $("#firstnameLabel") text("") $("#lastnameLabel") text("") $(document) ready(function() $("#form ") bind("submit" function() var txt_firstname = $ trim($("#firstname") attr("value")) var txt_lastname = $ trim($("#lastname") attr("value")) $("#firstnameLabel") text("") $("#lastnameLabel") text("") var isSuccess = ; if(txt_firstname length == ) $("#firstnameLabel") text("firstname不能为空！") $("#firstnameLabel") css("color":"red"); isSuccess = ; if(txt_lastname length == ) $("#lastnameLabel") text("lastname不能为空！") $("#lastnameLabel") css("color":"red"); isSuccess = ; if(isSuccess == ) return false; ) ) </script> </head> <body> 提交表单前进行验证(方法一) <hr width= % align=left /> <form id="form " method="post" action="/DealWithForm /"> <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= % align=left /> <button type=submit>提交</button> <button type=button onclick="jump();">取消</button> </form> </body> </>

　　 formpage

复制代码 代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>Example </title> <script type=text/javascript src=/Resource/jquery 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 = ; if(txt_firstname length == ) $("#firstnameLabel") text("firstname不能为空！") $("#firstnameLabel") css("color":"red"); isSuccess = ; if(txt_lastname length == ) $("#lastnameLabel") text("lastname不能为空！") $("#lastnameLabel") css("color":"red"); isSuccess = ; if(isSuccess == ) return false; return true; </script> </head> <body> 提交表单前进行验证(方法二) <hr width= % align=left /> <form id="form " method="post" action="/DealWithForm /" 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= % align=left /> <button type=submit>提交</button> <button type=button onclick="jump();">取消</button> </form> </body> </>

　　 formpage

复制代码 代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>Example </title> <script type=text/javascript src=/Resource/jquery 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 = ; if(txt_firstname length == ) $("#firstnameLabel") text("firstname不能为空！") $("#firstnameLabel") css("color":"red"); isSuccess = ; if(txt_lastname length == ) $("#lastnameLabel") text("lastname不能为空！") $("#lastnameLabel") css("color":"red"); isSuccess = ; if(isSuccess == ) form submit(); </script> </head> <body> 提交表单前进行验证(方法三) <hr width= % align=left /> <form id="form " method="post" action="/DealWithForm /"> <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= % align=left /> <button type=button onclick="checktosubmit()">提交</button> <button type=button onclick="jump();">取消</button> </form> </body> </>

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

复制代码 代码如下: #coding: utf from django import HttpResponse from django shortcuts import render_to_response def DealWithForm (request): if request method=="POST": FirstName=request POST get( firstname ) LastName=request POST get( lastname ) if FirstName and LastName: response=HttpResponse() response write("<><body>"+FirstName+" "+LastName+u"！ 你提交了表单！</body></>") return response else: response=HttpResponse() response write( <><script type=text/javascript>alert("firstname或lastname不能为空！");\\ window location="/DealWithForm "</script></> ) return response else: return render_to_response( formpage ) def DealWithForm (request): if request method=="POST": FirstName=request POST get( firstname ) encode("utf ") LastName=request POST get( lastname ) encode("utf ") if FirstName and LastName: ="<><body>"+FirstName+" "+LastName+"！ 你提交了表单！"+"</body></>" return HttpResponse() else: response=HttpResponse() response write( <><script type=text/javascript>alert("firstname或lastname不能为空！");\\ window location="/DealWithForm "</script></> ) return response else: return render_to_response( formpage ) def DealWithForm (request): if request method=="POST": FirstName=request POST get( firstname ) LastName=request POST get( lastname ) if FirstName and LastName: response=HttpResponse() response write( <><body> +FirstName+LastName+u ！ 你提交了表单！</body></> ) return response else: response=HttpResponse() response write( <><script type=text/javascript>alert("firstname或lastname不能为空！");\\ window location="/DealWithForm "</script></> ) return response else: return render_to_response( formpage )

　　 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 ^DealWithForm views DealWithForm ) url(r ^DealWithForm views DealWithForm ) url(r ^DealWithForm views DealWithForm ) )

　　 settings py

复制代码 代码如下: cha138/Article/program/Java/JSP/201311/20397

相关参考