发布于 2017-01-06 10:36:45 | 115 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


为了减轻后台压力,可以利用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. 
) 
... 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务