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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在表单提交前进行验证的几种方式整理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8480字，纯文字阅读大概需要13分钟。

内容图文

在表单提交前进行验证的几种方式 .
在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. 
) 
...

内容总结

以上是互联网集市为您收集整理的在表单提交前进行验证的几种方式整理全部内容，希望文章能够帮你解决在表单提交前进行验证的几种方式整理所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/366005.html

来源：【匿名】

【上一篇】JavaScript实现复制功能各浏览器支持情况实测【下一篇】javascript 怎么调用php方法

更多 ►

【在表单提交前进行验证的几种方式整理】教程文章相关的互联网学习教程文章

【JavaScript】填坑，表单提交不执行Ajax方法【代码】

一开始我是这么写的 1<form id="form0" class="ui large form" action="" method=""> 2<div class="ui segment"> 3<div class="field"> 4<div class="ui left icon input"> 5<i class="user secret icon"></i> 6<input type="text" name="nickName" placeholder="昵称"> 7</div> 8</div> 9<div class="field">10<div class="ui left icon input">11<i class="user icon"></i>12<input type="text" name="username" placeholder="用...

JavaScript form表单提交与验证【代码】

原网址：https://blog.csdn.net/vipwxs/article/details/79119701一、form对象的属性：name:获取表单的名称，该name一般给JS使用method：表单的提交方式（get：不安全，数据量较小，不能上传附件）（post：相对安全海量数据能上传附件）action：表单数据的处理程序一般是PHP文件enctype：表单数据的编码方式（加密）application/x-www-form-urlencoded 默认 multipart/form-data 可以上传附件二，表单中通过...

ajax 传值，Ajax: Asynchoronous Javascript and xml (异步的js和xml). 异步刷新，异步传递.替代表单提交数据，回调函数处理返回的数据【代码】

aspx里的代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css">#Password1 {height: 15px;}#Text1 {height: 15px;}</style> </head> <body><form id="form1" runat="server"><di...

javascript – 使用Vue.js在文本输入中按Enter键时阻止表单提交【代码】

我在我的应用程序中使用Vue.js并在表单中输入文本<div id="myVueForm"> <form><input type="text" v-on="keyup:addCategory | key 'enter'"><button type="submit">Submit Form</button> </form> </div>在我的Vue实例中,我有以下内容new Vue({el: '#myVueForm',methods: {addCategory: function(e){if(e) e.preventDefault();console.log("Added a new category, thanks!");}} });尽管有preventDefault(...

vue axios 表单提交上传图片的实例

项目中用的element 的框架，然后在项目有一个添加数据需求是图片可上传，也可不上传，然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> let file = e.target.files[0]; let param = new FormData(); /...

javascript – jQuery $.get()不会在表单提交时执行【代码】

提交表单时,我想异步调用带有一些$_GET参数的电子邮件发送脚本order.php. jQuery $.get()函数不执行,控制台中没有显示错误. HTML标记：<form name="submit" id="orderconfirm" action="somefile.php"> <input type="hidden" name="orderkey" id="orderkey" value="somekey"/> <input type="text" name="email" id="orderemail"/> <input type="submit" value="submit"/> </form>jQuery脚本：$(document).ready(function() {$('#ord...

javascript – 获取错误“表单提交已取消,因为表单未连接”【代码】

我有一个旧网站与JQuery 1.7,两天前正常工作.突然,我的一些按钮不再工作,点击它们后,我在控制台中收到此警告：Form submission canceled because the form is not connected点击后面的代码是这样的：this.handleExcelExporter = function(href, cols) {var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);$('input[name="layout"]', form).val(JSON....

javascript-使用jquery和.submit捕获表单提交后清除表单【代码】

经过大量研究,提交表单后,我仍然无法清除表单并显示“已提交邮件”消息. HTML：<!DOCTYPE html> <html lang="es"><head></head><body id="page-top"></nav><header class="masthead text-center text-white d-flex"></header><section id="contact" data-delimiter="1"> <div class="row"><div class="col-lg-6"><h3 class="heading...

javascript – 在表单提交后在页面上显示消息【代码】

我有一个包含2个字段的表单(对于此示例),我使用JavaScript验证,如果字段包含数据,则表单将在用户单击“提交”按钮时提交.我在表单标签中使用iframe将输出发送到同一页面. 我想做的是在表单下面显示一条消息,说“感谢您的提交”.我很难想出这个部分.function SubmitRentalForm() {var bValid = true;var sFirst = document.getElementById("fname").value;var sLast = document.getElementById("lname").value;if ( (sF...

JavaScript表单提交一个名为submit的字段【代码】

我想知道是否有任何方法(使用JS或其他方法)自动提交带有名称和标识为“提交”的字段的表单.基本上,我的整个HTML代码如下所示：<html> <body onl oad=myForm.submit()> <form id="myForm" name="myForm" action="http://example.com/examplePage.do" method="POST"> <input type=hidden name="val1" id="val1" value="some_Value"/> <input type=hidden name="val2" id="val2" value="another_Value"/> <input type=hidden name="va...

javascript-手机表单提交页面，如果在网络慢的情况下，form表单会提交两次

手机网站提交页面，网络好的时候正常，网络慢的时候手机页面会一直在加载状态，但是Fiddler抓取却有两次相同内容的提交，如何避免这种情况发生？回复内容：手机网站提交页面，网络好的时候正常，网络慢的时候手机页面会一直在加载状态，但是Fiddler抓取却有两次相同内容的提交，如何避免这种情况发生？我的做法是在服务端生成一个token，提交的时候验证token，这是第一道验证，第二道验证为在表单提交时将提交按钮设置为disabled，...

javascript-jquery的ajax和php配合使用实现无刷新表单提交的一点问题【图】

如图就是我的页面，打开主页链接后显示的是主体部分（左侧黑框）；右侧子页面（右侧div#main_box内通过ajax获取的子页面）在刚打开主页链接时显示按下按钮一时加载的子页面现在我在按下按钮二时加载的子页面2中有个表单，需要提交表单然后通过PHP获取表单提交的值然后去数据库查询信息，返回数据库数据再输出到这个子页面2中，不知道怎么实现。在网上找了好久找到这种方式：但是不会用，请大神赐教回复内容：如图就是我的页面，...

javascript-如何避免表单提交也触发beforeunload事件

具体要求是这样：为window绑定了beforeunload事件，检查切换或者关闭页面是否已经保存了输入内容，但是点击提交按钮的时候也会触发beforeunload事件，如何使表单提交不触发这个事件？部分代码：if ($scope.model.isSaving) {window.onbeforeunload = function (e) {e = e || window.event;// 兼容IE8和Firefox 4之前的版本if (e) {e.returnValue = '关闭提示';}// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+return '关闭提示...

js表单提交解决方法

js表单提交感谢百忙中回答我的问题，祝你们工作顺利！做了2个页面第一个页面post表单提交点击submit后跳转到第二个页面做信息确认;第二个页面是用上面的 innerHTM实现的问题出来了！运行时候第一个页面点提交第二个页面闪了一下直接存到数据库里了，，，谁知道问题出在哪里咧！帮帮忙啊------解决方案-------------------- 探讨

javascript-PHP嵌入表单提交遇到问题关于取onclick事件产生的值求大神指教

求助啊echo " 0:"; 怎么把a的值赋给这个get方法的value进去？回复内容：求助啊echo " 0:"; 怎么把a的值赋给这个get方法的value进去？其实这样就能把JS中的值给到表单里作为值提交了，很方便的方法，对于刚起步的我而言，终于搞出来了。话说越学越高级的方法会出现，现在只要能用得惯就可以了，不管代码清清爽爽这件事情了，哈哈！犯得着用表单么，直接用AJAX呗。（原生的AJAX不大会写，就给你写jQuery版的吧）$.get('qashownumber...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【在表单提交前进行验证的几种方式整理】教程文章相关的互联网学习教程文章

验证 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程