管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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

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

　　formpage1.html

　　

复制代码 代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Example1</title>

　　<script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script>

　　<script type="text/javascript">

　　function jump()

　　{

　　//清空表单所有数据

　　document.getElementById("firstname").value=""

　　document.getElementById("lastname").value=""

　　$("#firstnameLabel").text("")

　　$("#lastnameLabel").text("")

　　}

　　$(document).ready(function(){

　　$("#form1").bind("submit", function(){

　　var txt_firstname = $.trim($("#firstname").attr("value"))

　　var txt_lastname = $.trim($("#lastname").attr("value"))

　　$("#firstnameLabel").text("")

　　$("#lastnameLabel").text("")

　　var isSuccess = 1;

　　if(txt_firstname.length == 0)

　　{

　　$("#firstnameLabel").text("firstname不能为空！")

　　$("#firstnameLabel").css({"color":"red"});

　　isSuccess = 0;

　　}

　　if(txt_lastname.length == 0)

　　{

　　$("#lastnameLabel").text("lastname不能为空！")

　　$("#lastnameLabel").css({"color":"red"});

　　isSuccess = 0;

　　}

　　if(isSuccess == 0)

　　{

　　return false;

　　}

　　})

　　})

　　</script>

　　</head>

　　<body>

　　提交表单前进行验证(方法一)

　　<hr width="40%" align="left" />

　　<form id="form1" method="post" action="/DealWithForm1/">

　　<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="40%" align="left" />

　　<button type="submit">提交</button>

　　<button type="button" onclick="jump();">取消</button>

　　</form>

　　</body>

　　</html>

　　formpage2.html

　　

复制代码 代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Example2</title>

　　<script type="text/javascript" src="/Resource/jquery-1.4.1.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 = 1;

　　if(txt_firstname.length == 0)

　　{

　　$("#firstnameLabel").text("firstname不能为空！")

　　$("#firstnameLabel").css({"color":"red"});

　　isSuccess = 0;

　　}

　　if(txt_lastname.length == 0)

　　{

　　$("#lastnameLabel").text("lastname不能为空！")

　　$("#lastnameLabel").css({"color":"red"});

　　isSuccess = 0;

　　}

　　if(isSuccess == 0)

　　{

　　return false;

　　}

　　return true;

　　}

　　</script>

　　</head>

　　<body>

　　提交表单前进行验证(方法二)

　　<hr width="40%" align="left" />

　　<form id="form1" method="post" action="/DealWithForm1/" 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="40%" align="left" />

　　<button type="submit">提交</button>

　　<button type="button" onclick="jump();">取消</button>

　　</form>

　　</body>

　　</html>

　　formpage3.html

　　

复制代码 代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Example3</title>

　　<script type="text/javascript" src="/Resource/jquery-1.4.1.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 = 1;

　　if(txt_firstname.length == 0)

　　{

　　$("#firstnameLabel").text("firstname不能为空！")

　　$("#firstnameLabel").css({"color":"red"});

　　isSuccess = 0;

　　}

　　if(txt_lastname.length == 0)

　　{

　　$("#lastnameLabel").text("lastname不能为空！")

　　$("#lastnameLabel").css({"color":"red"});

　　isSuccess = 0;

　　}

　　if(isSuccess == 1)

　　{

　　form1.submit();

　　}

　　}

　　</script>

　　</head>

　　<body>

　　提交表单前进行验证(方法三)

　　<hr width="40%" align="left" />

　　<form id="form1" method="post" action="/DealWithForm1/">

　　<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="40%" align="left" />

　　<button type="button" onclick="checktosubmit()">提交</button>

　　<button type="button" onclick="jump();">取消</button>

　　</form>

　　</body>

　　</html>

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

　　--------------------------------------------------------------------------------

　　--------------------------------------------------------------------------------

　　views.py

　　

复制代码 代码如下:

　　#coding: utf-8

　　from django.http import HttpResponse

　　from django.shortcuts import render_to_response

　　def DealWithForm1(request):

　　if request.method=="POST":

　　FirstName=request.POST.get('firstname','')

　　LastName=request.POST.get('lastname','')

　　if FirstName and LastName:

　　response=HttpResponse()

　　response.write("<html><body>"+FirstName+" "+LastName+u"！ 你提交了表单！</body></html>")

　　return response

　　else:

　　response=HttpResponse()

　　response.write('<html><script type="text/javascript">alert("firstname或lastname不能为空！");\

　　window.location="/DealWithForm1"</script></html>')

　　return response

　　else:

　　return render_to_response('formpage1.html')

　　def DealWithForm2(request):

　　if request.method=="POST":

　　FirstName=request.POST.get('firstname','').encode("utf-8")

　　LastName=request.POST.get('lastname','').encode("utf-8")

　　if FirstName and LastName:

　　html="<html><body>"+FirstName+" "+LastName+"！ 你提交了表单！"+"</body></html>"

　　return HttpResponse(html)

　　else:

　　response=HttpResponse()

　　response.write('<html><script type="text/javascript">alert("firstname或lastname不能为空！");\

　　window.location="/DealWithForm2"</script></html>')

　　return response

　　else:

　　return render_to_response('formpage2.html')

　　def DealWithForm3(request):

　　if request.method=="POST":

　　FirstName=request.POST.get('firstname','')

　　LastName=request.POST.get('lastname','')

　　if FirstName and LastName:

　　response=HttpResponse()

　　response.write('<html><body>'+FirstName+LastName+u'！ 你提交了表单！</body></html>')

　　return response

　　else:

　　response=HttpResponse()

　　response.write('<html><script type="text/javascript">alert("firstname或lastname不能为空！");\

　　window.location="/DealWithForm3"</script></html>')

　　return response

　　else:

　　return render_to_response('formpage3.html')

　　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'^DealWithForm1','views.DealWithForm1'),

　　url(r'^DealWithForm2','views.DealWithForm2'),

　　url(r'^DealWithForm3','views.DealWithForm3'),

　　)

　　settings.py

　　

复制代码 代码如下:

　　# Django settings for CheckFormBeforeSubmit project.

　　import os

　　HERE = os.path.abspath(os.path.dirname(__file__))

　　DEBUG = True

　　TEMPLATE_DEBUG = DEBUG

　　...

　　STATIC_RESOURCE=os.path.join(HERE, "resource")

　　...

　　MIDDLEWARE_CLASSES = (

　　'django.middleware.common.CommonMiddleware',

　　'django.contrib.sessions.middleware.SessionMiddleware',

　　'django.middleware.csrf.CsrfViewMiddleware',

　　'django.contrib.auth.middleware.AuthenticationMiddleware',

　　'django.contrib.messages.middleware.MessageMiddleware',

　　'django.middleware.csrf.CsrfResponseMiddleware',

　　)

　　ROOT_URLCONF = 'CheckFormBeforeSubmit.urls'

　　TEMPLATE_DIRS = (

　　os.path.join(HERE,'template'),

　　# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".

　　# Always use forward slashes, even on Windows.

　　# Don't forget to use absolute paths, not relative paths.

　　)

　　...

教程首页 更多教程