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

Posted 2022-07-20 知

篇首语：不磨不炼，不成好汉。本文由小常识网(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

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

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