时间:2021-05-26
如下所示:
第一步填写基本信息,
第二步填写教育信息
要求我们每一步操作都要进行验证,这样我们可以用以下方式进行验证:
复制代码 代码如下:
<script type="text/javascript" language="javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/Scripts/jquery.validate.min.js"></script>
<h2>
ValidateStep</h2>
<form action="" id="registerForm" method="post">
<div class="step1 validationGroup" style="display: block;">
<p>
基本情况</p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
姓名:<input type="text" id="name" class="required" />
</td>
</tr>
<tr>
<td>
年龄:<input type="text" id="age" class="required number" />
</td>
</tr>
<tr>
<td>
<input type="button" class="next" value="下一步" />
</td>
</tr>
</table>
</div>
<div class="step2 validationGroup" style="display: none">
<p>
教育背景</p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
毕业学校:<input type="text" id="school" class="required" />
</td>
</tr>
<tr>
<td>
专业:<input type="text" id="major" class="required" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交" />
</td>
</tr>
</table>
</div>
</form>
<script language="javascript" type="text/javascript">
function InitValidationGroup() {
$('.validationGroup .next').click(function (evt) {
if (IsValidated($(this).closest(".validationGroup"))) {
$(".step1").hide();
$(".step2").show();
}
else {
evt.preventDefault();
}
});
$('.step1 :text').keydown(function (evt) {
if (evt.keyCode == 13) {
var $nextInput = $(this).nextAll(':input:first');
if ($nextInput.is(':submit')) {
Validate(evt);
}
else {
evt.preventDefault();
$nextInput.focus();
}
}
});
}
function IsValidated(group) {
var isValid = true;
group.find(':input').each(function (i, item) {
if (!$(item).valid())
isValid = false;
});
return isValid;
}
$(document).ready(function () {
InitValidationGroup();
var validator = $("#registerForm").validate();
});
</script>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jQuery.Validate验证库1、下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载默认校验规则复制代
概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。方式一:是通过jquery.validate的submit
主要分几部分jquery.validate基本用法jquery.validateAPI说明jquery.validate自定义jquery.validate常见
一、jQuery.validate简介 jQuery.validate.js插件用于对表单输入进行验证,其使用配置非常简单。支持多事件触发,自带多种验证规则,
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国