在表单提交前进行验证的几种方式 .
在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="https://www.jb51.net/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 />
<form method="post" action="/DealWithForm1/">
<table>
<tr>
<td>first_name:</td>
<td><input type="text" /></td>
<td><label></label></td>
</tr>
<tr>
<td>last_name:</td>
<td><input type="text" /></td>
<td><label></label></td>
</tr>
</table>
<hr />
<button type="submit">提交</button>
<button type="button">取消</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="https://www.jb51.net/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 />
<form method="post" action="/DealWithForm1/" onsubmit="return check()">
<table>
<tr>
<td>first_name:</td>
<td><input type="text" /></td>
<td><label></label></td>
</tr>
<tr>
<td>last_name:</td>
<td><input type="text" /></td>
<td><label></label></td>
</tr>
</table>
<hr />
<button type="submit">提交</button>
<button type="button">取消</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="https://www.jb51.net/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 />
<form method="post" action="/DealWithForm1/">
<table>
<tr>
<td>first_name:</td>
<td><input type="text" /></td>
<td><label></label></td>
</tr>
<tr>
<td>last_name:</td>
<td><input type="text" /></td>
<td><label></label></td>
</tr>
</table>
<hr />
<button type="button">提交</button>
<button type="button">取消</button>
</form>
</body>
</html>
以下是视图函数、URL配置以及相关设置
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
views.py
复制代码 代码如下: