jquery在表单提交前有几种校验方法

在表单提交前进行验证的几种方式 .
在Django中，为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证。下面提供了有效的几种方式（每个.html文件为一种方式）。
formpage1.html
复制代码代码如下:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Example1</title> <br /><script type="text/javascript" src="/Resource/jquery-1.4.1.js"></script> <br /><script type="text/javascript"> <br />function jump() <br />{ <br />//清空表单所有数据 <br />document.getElementById("firstname").value="" <br />document.getElementById("lastname").value="" <br />$("#firstnameLabel").text("") <br />$("#lastnameLabel").text("") <br />} <br />$(document).ready(function(){ <br />$("#form1").bind("submit", function(){ <br />var txt_firstname = $.trim($("#firstname").attr("value")) <br />var txt_lastname = $.trim($("#lastname").attr("value")) <br />$("#firstnameLabel").text("") <br />$("#lastnameLabel").text("") <br />var isSuccess = 1; <br />if(txt_firstname.length == 0) <br />{ <br />$("#firstnameLabel").text("firstname不能为空！") <br />$("#firstnameLabel").css({"color":"red"}); <br />isSuccess = 0; <br />} <br />if(txt_lastname.length == 0) <br />{ <br />$("#lastnameLabel").text("lastname不能为空！") <br />$("#lastnameLabel").css({"color":"red"}); <br />isSuccess = 0; <br />} <br />if(isSuccess == 0) <br />{ <br />return false; <br />} <br />}) <br />}) <br /></script> <br /></head> <br /><body> <br />提交表单前进行验证(方法一) <br /><hr width="40%" align="left" /> <br /><form id="form1" method="post" action="/DealWithForm1/"> <br /><table> <br /><tr> <br /><td>first_name:</td> <br /><td><input name="firstname" type="text" id="firstname" /></td> <br /><td><label id="firstnameLabel"></label></td> <br /></tr> <br /><tr> <br /><td>last_name:</td> <br /><td><input name="lastname" type="text" id="lastname" /></td> <br /><td><label id="lastnameLabel"></label></td> <br /></tr> <br /></table> <br /><hr width="40%" align="left" /> <br /><button type="submit">提交</button> <br /><button type="button" onclick="jump();">取消</button> <br /></form> <br /></body> <br /></html> <br />formpage2.html <br />复制代码代码如下:<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http: </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明：你问我答网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('494074156468539692')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置">惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 2.5万阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场">如何做好把一个新产品推向市场</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 86阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱">西门子冰箱</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 112阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/494074156468539692.html" title="jquery在表单提交前有几种校验方法" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="jquery在表单提交前有几种校验方法"> </a> <a href="https://w.sf024.com/info/494074156468539692.html" target="">jquery在表单提交前有几种校...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 07-13 </span><span> <i class="iconfont bx bx-show"></i> 109阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/938115903367421772.html" title="Jquery提交form表单弹出新窗口，被浏览器拦截" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="Jquery提交form表单弹出新窗口，被浏览器拦截"> </a> <a href="https://w.sf024.com/info/938115903367421772.html" target="">Jquery提交form表单弹出...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-04 </span><span> <i class="iconfont bx bx-show"></i> 68阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/391724087.html" title="php jquery post传递参数为表单,怎样获取表单的value值" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="php jquery post传递参数为表单,怎样获取表单的value值"> </a> <a href="https://w.sf024.com/info/391724087.html" target="">php jquery post传...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 06-19 </span><span> <i class="iconfont bx bx-show"></i> 82阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/2120529183213273467.html" title="jquery表单验证怎么判断输入的中文" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="jquery表单验证怎么判断输入的中文"> </a> <a href="https://w.sf024.com/info/2120529183213273467.html" target="">jquery表单验证怎么判断输入...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 07-21 </span><span> <i class="iconfont bx bx-show"></i> 136阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/446053500.html" title="jquery如何让所有表单元素均为只读" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="jquery如何让所有表单元素均为只读"> </a> <a href="https://w.sf024.com/info/446053500.html" target="">jquery如何让所有表单元素均...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-20 </span><span> <i class="iconfont bx bx-show"></i> 42阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/368378796.html" title="jquery.validate 如何验证表单中的select元素？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="jquery.validate 如何验证表单中的select元素？"> </a> <a href="https://w.sf024.com/info/368378796.html" target="">jquery.validate ...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 06-20 </span><span> <i class="iconfont bx bx-show"></i> 90阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/2117720951101657107.html" title="jquery中的表单验证if($.sValid()){是不是写错了？$.valid()这样写表单木有反应，改肿么写？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="jquery中的表单验证if($.sValid()){是不是写错了？$.valid()这样写表单木有反应，改肿么写？"> </a> <a href="https://w.sf024.com/info/2117720951101657107.html" target="">jquery中的表单验证if($...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 06-24 </span><span> <i class="iconfont bx bx-show"></i> 56阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/247684648.html" title="javascript中如何用jQuery使validate验证表单成功后再执行自定义函数？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="javascript中如何用jQuery使validate验证表单成功后再执行自定义函数？"> </a> <a href="https://w.sf024.com/info/247684648.html" target="">javascript中如何用jQ...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 07-18 </span><span> <i class="iconfont bx bx-show"></i> 66阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/288161371.html" title="springmvc提交表单时处理流程" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="springmvc提交表单时处理流程"> </a> <a href="https://w.sf024.com/info/288161371.html" target="">springmvc提交表单时处理...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 11-04 </span><span> <i class="iconfont bx bx-show"></i> 135阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/15703616.html" title="用DW怎样做一个提交表单" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="用DW怎样做一个提交表单"> </a> <a href="https://w.sf024.com/info/15703616.html" target="">用DW怎样做一个提交表单...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-20 </span><span> <i class="iconfont bx bx-show"></i> 188阅读 </span> </p> </li> </ul> </div> </div> </div> </section><footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div></footer><script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>