Home > Developer > JavaScript
There are several ways to verify the form before submission.
In Django, JavaScript can be used to verify the form data before the form is submitted to reduce the background pressure. The following describes the valid formula (every .html file is a method ).
Formpage1.html
Copy codeThe Code is as follows:
<! 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 ()
{
// Clear all data in the form
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 cannot be blank! ")
$ ("# FirstnameLabel" ).css ({"color": "red "});
IsSuccess = 0;
}
If (txt_lastname.length = 0)
{
$ ("# LastnameLabel"). text ("lastname cannot be blank! ")
$ ("# LastnameLabel" ).css ({"color": "red "});
IsSuccess = 0;
}
If (isSuccess = 0)
{
Return false;
}
})
})
</Script>
</Head>
<Body>
Perform verification before submitting the form (method 1)
<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"> submit </button>
<Button type = "button" onclick = "jump ();"> cancel </button>
</Form>
</Body>
</Html>
Formpage2.html
Copy codeThe Code is as follows:
<! 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 ()
{
// Clear all data in the form
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 cannot be blank! ")
$ ("# FirstnameLabel" ).css ({"color": "red "});
IsSuccess = 0;
}
If (txt_lastname.length = 0)
{
$ ("# LastnameLabel"). text ("lastname cannot be blank! ")
$ ("# LastnameLabel" ).css ({"color": "red "});
IsSuccess = 0;
}
If (isSuccess = 0)
{
Return false;
}
Return true;
}
</Script>
</Head>
<Body>
Verify the form before submission (method 2)
<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"> submit </button>
<Button type = "button" onclick = "jump ();"> cancel </button>
</Form>
</Body>
</Html>
Formpage3.html
Copy codeThe Code is as follows:
<! 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 ()
{
// Clear all data in the form
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 cannot be blank! ")
$ ("# FirstnameLabel" ).css ({"color": "red "});
IsSuccess = 0;
}
If (txt_lastname.length = 0)
{
$ ("# LastnameLabel"). text ("lastname cannot be blank! ")
$ ("# LastnameLabel" ).css ({"color": "red "});
IsSuccess = 0;
}
If (isSuccess = 1)
{
Form1.submit ();
}
}
</Script>
</Head>
<Body>
Verify the form before submission (method 3)
<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 ()"> submit </button>
<Button type = "button" onclick = "jump ();"> cancel </button>
</Form>
</Body>
</Html>
The following are view functions, URL configurations, and related settings.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Views. py
Copy codeThe Code is as follows:
# 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 ("Return response
Else:
Response = HttpResponse ()
Response. write ('Window. location = "/DealWithForm1" </script> 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 = "Return HttpResponse (html)
Else:
Response = HttpResponse ()
Response. write ('Window. location = "/DealWithForm2" </script> 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 ('Return response
Else:
Response = HttpResponse ()
Response. write ('Window. location = "/DealWithForm3" </script> Return response
Else:
Return render_to_response('formpage3.html ')
Urls. py
Copy codeThe Code is as follows:
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. serv', {'document _ root': settings. STATIC_RESOURCE }),
Url (R' ^ DealWithForm1 ', 'Views. DealWithForm1 '),
Url (R' ^ DealWithForm2 ', 'Views. DealWithForm2 '),
Url (r '^ dealwithform3', 'Views. dealwithform3 '),
)
Settings. py
Copy codeThe Code is as follows:
# 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.
)
...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
