熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

在表單提交前進行驗證的幾種方式整理

2022-06-13   來源: JSP教程 
為了減輕後台壓力可以利用JavaScript在表單提交前對表單數據進行驗證本文整理了常用的幾種方式有需求的朋友可以參考下  

　　在表單提交前進行驗證的幾種方式
在Django中為了減輕後台壓力可以利用JavaScript在表單提交前對表單數據進行驗證下面提供了有效的幾種方式（每個html文件為一種方式）
formpagehtml

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Example</title>
<script type="text/javascript" src="/Resource/jqueryjs"></script>
<script type="text/javascript">
function jump()
{
//清空表單所有數據
documentgetElementById("firstname")value=""
documentgetElementById("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_firstnamelength == )
{
$("#firstnameLabel")text("firstname不能為空！")
$("#firstnameLabel")css({"color":"red"});
isSuccess = ;
}
if(txt_lastnamelength == )
{
$("#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>
</html>

　　
formpagehtml

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Example</title>
<script type="text/javascript" src="/Resource/jqueryjs"></script>
<script type="text/javascript">
function jump()
{
//清空表單所有數據
documentgetElementById("firstname")value=""
documentgetElementById("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_firstnamelength == )
{
$("#firstnameLabel")text("firstname不能為空！")
$("#firstnameLabel")css({"color":"red"});
isSuccess = ;
}
if(txt_lastnamelength == )
{
$("#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>
</html>

　　
formpagehtml

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Example</title>
<script type="text/javascript" src="/Resource/jqueryjs"></script>
<script type="text/javascript">
function jump()
{
//清空表單所有數據
documentgetElementById("firstname")value=""
documentgetElementById("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_firstnamelength == )
{
$("#firstnameLabel")text("firstname不能為空！")
$("#firstnameLabel")css({"color":"red"});
isSuccess = ;
}
if(txt_lastnamelength == )
{
$("#lastnameLabel")text("lastname不能為空！")
$("#lastnameLabel")css({"color":"red"});
isSuccess = ;
}
if(isSuccess == )
{
formsubmit();
}
}
</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>
</html>

　　
以下是視圖函數URL配置以及相關設置


viewspy

復制代碼 代碼如下:
#coding: utf
from djangohttp import HttpResponse
from djangoshortcuts import render_to_response
def DealWithForm(request):
if requestmethod=="POST":
FirstName=requestPOSTget(firstname)
LastName=requestPOSTget(lastname)
if FirstName and LastName:
response=HttpResponse()
responsewrite("<html><body>"+FirstName+" "+LastName+u"！ 你提交了表單！</body></html>")
return response
else:
response=HttpResponse()
responsewrite(<html><script type="text/javascript">alert("firstname或lastname不能為空！");\
windowlocation="/DealWithForm"</script></html>)
return response
else:
return render_to_response(formpagehtml)
def DealWithForm(request):
if requestmethod=="POST":
FirstName=requestPOSTget(firstname)encode("utf")
LastName=requestPOSTget(lastname)encode("utf")
if FirstName and LastName:
html="<html><body>"+FirstName+" "+LastName+"！ 你提交了表單！"+"</body></html>"
return HttpResponse(html)
else:
response=HttpResponse()
responsewrite(<html><script type="text/javascript">alert("firstname或lastname不能為空！");\
windowlocation="/DealWithForm"</script></html>)
return response
else:
return render_to_response(formpagehtml)
def DealWithForm(request):
if requestmethod=="POST":
FirstName=requestPOSTget(firstname)
LastName=requestPOSTget(lastname)
if FirstName and LastName:
response=HttpResponse()
responsewrite(<html><body>+FirstName+LastName+u！ 你提交了表單！</body></html>)
return response
else:
response=HttpResponse()
responsewrite(<html><script type="text/javascript">alert("firstname或lastname不能為空！");\
windowlocation="/DealWithForm"</script></html>)
return response
else:
return render_to_response(formpagehtml)

　　
urlspy

復制代碼 代碼如下:
from djangoconfurlsdefaults import patterns include url
import views
from djangoconf import settings
urlpatterns = patterns(
url(r^Resource/(?P<path>*)$djangoviewsstaticserve{document_root:settingsSTATIC_RESOURCE})
url(r^DealWithFormviewsDealWithForm)
url(r^DealWithFormviewsDealWithForm)
url(r^DealWithFormviewsDealWithForm)
)

　　
settingspy

復制代碼 代碼如下:

　　
# Django settings for CheckFormBeforeSubmit project
import os
HERE = ospathabspath(ospathdirname(__file__))
DEBUG = True
TEMPLATE_DEBUG = DEBUG

STATIC_RESOURCE=ospathjoin(HERE "resource")

MIDDLEWARE_CLASSES = (
djangomiddlewarecommonCommonMiddleware
djangocontribsessionsmiddlewareSessionMiddleware
djangomiddlewarecsrfCsrfViewMiddleware
djangocontribauthmiddlewareAuthenticationMiddleware
djangocontribmessagesmiddlewareMessageMiddleware
djangomiddlewarecsrfCsrfResponseMiddleware
)
ROOT_URLCONF = CheckFormBeforeSubmiturls
TEMPLATE_DIRS = (
ospathjoin(HEREtemplate)
# Put strings here like "/home/html/django_templates" or "C:/www/django/templates"
# Always use forward slashes even on Windows
# Dont forget to use absolute paths not relative paths
)


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20397.html
    《在表單提交前進行驗證的幾種方式整理》本文是由JSP教程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.