HTML表单的jQuery验证
Posted
技术标签:
【中文标题】HTML表单的jQuery验证【英文标题】：Jquery Validation for HTML form 【发布时间】：2011-08-23 03:07:18 【问题描述】：在使用 jquery 提交 html 表单之前，我想验证文本区域并选择 html 表单中的框，任何人都可以帮助我（表单正在登顶而无需刷新）。我面临的问题是我制作脚本以提交 html 表单而不刷新，但我不知道如何将验证与它集成我想要它：1. 验证表单 2. IF 验证 true 从不使用 jquery 刷新的情况下提交 html
查询：
$(document).ready(function()
$("form#form").submit(function()
var bno = $("#bno").val();
var date = $("#date").val();
var hour = $("#hour").val();
var minute = $("#minute").val();
var dataString = 'bno=' + bno + '&date=' + date + '&hour=' + hour + '&minute=' + minute;
$.ajax(
type: "POST",
url: "editb.php",
data: dataString,
success: function()
$('.mform').hide();
$('.success').show();
);
return false;
);
);
HTML 表格：
<form method="post" name="form" id="form">
<fieldset id="opt">
<legend>Change Journy Date</legend>
<label for="choice">Journy Date : </label>
<input type="text" id="date" name="date" value=""> <br />
</fieldset>
<fieldset id="personal">
<legend>Change Journy Time</legend>
<label for="lastname">Journy Time : </label>
<select id="hour" name="hour">
<option value="">HH</option>
<option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option>
</select><select id="minute" name="minute">
<option value="">MM</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<input type="hidden" name="bno" id="bno" value="<?=$bookingno?>" />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Update" />
<input id="button2" type="reset" />
</div>
</form>
<div class="success" style="display: none;"><div id="box"><p><strong><center>FORM SUBMITTED SUCCESSFULLY</center></strong></p></div></div>
【问题讨论】：
遇到什么问题？请使用 .preventDefault() 并且不要返回 false 【参考方案1】：Jquery 有很多用于 ajax 提交和验证的插件。您可以考虑使用它们，而不是编写自己的逻辑。我推荐
Jquery form plugin - 通过 ajax 提交表单。删除提交，制作一个按钮，单击该按钮通过ajax提交表单。
Jquery Validation plugin - 根据类验证所有内容。您甚至可以使用 .addValidator 方法编写自己的逻辑。
这两个插件都能很好地相互配合..
我想这会给你一个想法
<script>
$(document).ready(function()
$("#form").validate();
if($("#form").valid())
$('#form').submit(function()
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit();
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
);
</script>
<script type="text/javascript" src="/css/js/jquery.validate.js"></script>
<script type="text/javascript" src="/css/js/jquery.form.js"></script>
<form method="post" name="form" id="form">
<fieldset id="opt">
<legend>Change Journy Date</legend>
<label for="choice">Journy Date : </label>
<input type="text" id="date" name="date" value=""> <br />
</fieldset>
<fieldset id="personal">
<legend>Change Journy Time</legend>
<label for="lastname">Journy Time : </label>
<select id="hour" name="hour">
<option value="">HH</option>
<option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option>
</select><select id="minute" name="minute">
<option value="">MM</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<input type="hidden" name="bno" id="bno" value="<?=$bookingno?>" />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Update" />
<input id="button2" type="reset" />
</div>
</form>
<div class="success" style="display: none;"><div id="box"><p><strong><center>FORM SUBMITTED SUCCESSFULLY</center></strong></p></div></div>
工作示例here
【讨论】：
我不想使用我的逻辑进行验证，但我不知道如何使用当前的 jquery 脚本进行验证...你能帮我吗 您的代码完全错误。您在页面加载时验证表单，并且仅在有效时设置 ajax 提交处理程序。 @ThiefMaster 我正在使用 jquery 验证插件 你能给我提供工作示例吗？我不知道那么多 jquey 和 ajax @user748222 我认为jquery.bassistance.de/validate/demo/… 会帮助你【参考方案2】：由于您没有为月、日和年制作选择框，因此您必须指定日期的格式。这是验证 MM-DD-YYYY 格式的日期的代码，允许 1 位数的日期或月份，以及前导和尾随空格：
var valid = false, match = false;
if (date)
match = date.match(/^\s*(\d\d?)-(\d\d?)-(\d4)\s*$/);
if (match)
dateobj = new Date(match[3], match[1]-1, match[2]);
valid = dateobj.getFullYear() == match[3]
&& dateobj.getDate() == match[2]
&& dateobj.getMonth()+1 == match[1];
if (!match)
alert('Please enter date as MM-DD-YYYY');
if (!valid)
alert(date+' is an invalid date');
if (!match || !valid)
return false;
您仍然需要检查日期是否在将来。由于您确实选择了小时和分钟，因此像
这样的测试if (hour == undefined || !hour.length)
alert('Please select hour'); return false;
if (minute == undefined || !minute.length)
alert('Please select minute'); return false;
够用了。
【讨论】：
嗨，你能给我提供工作脚本吗？我不知道如何集成验证和提交。我是初学者 如果您复制我提供的代码，并将其粘贴到您的示例中的$.ajax( 之前，它应该可以工作。如果可行，请通过投票支持我的答案来告诉我。 :)以上是关于HTML表单的jQuery验证的主要内容，如果未能解决你的问题，请参考以下文章
如何在不通过 jQuery 提交的情况下强制进行 html5 表单验证