我正在开发一个ASP.NET网站。目前，我只需在页面顶部添加必填字段验证程序和验证摘要控件，即可进行必要的字段验证。但我在stackoverflow中看到了一个有趣的验证。
单击“提交”按钮时会弹出一个带有动画的弹出窗口。我猜它是通过使用jquery完成的。我想要那种确切的验证方法。整个验证的东西与摇晃效果。我不熟悉Jquery。任何资源都有用。
非常感谢。
这是链接
https://stackoverflow.com/contact
这是屏幕截图
答案 0 :(得分：1)
使用jQuery
查看表单验证的this答案至于你的实际问题，下面的代码将完成这项工作。 检查the jsfiddle I created以查看以下代码的结果。
注意：为了使其正常工作，您必须使用正确的jQuery版本。我用于小提琴的版本是jQuery 1.9.1 jQuery UI 1.9.2
<强> HTML
<form id="myForm">
<input id="myTextID" type="text" placeholder="Enter Text Here" />
<div class="alert">
<div class="alert-point"></div><span>No text was input</span>
<div class="close">X</div>
</div>
<br/>
<br/>
<br/>
<select id="mySelectID">
<option>Select something</option>
<option>Some option</option>
<option>Some other option</option>
</select>
<div class="alert">
<div class="alert-point"></div><span>You must select an option. Note the first option is not a valid one</span>
<div class="close">X</div>
</div>
<br/>
<br/>
<br/>
<input id="myButtonID" type="button" value="Submit" class="submit" />
</form>
<p>If no text is entered in the input box above and/or no selection is made (meaning the default selection is ignored) when the button is clicked, the error will show up</p>
HTML按特定顺序排列：
表格包括所有必要的元素。
输入（或选择等）后跟div（类.alert）。
可以移除<br/>标签并使用CSS来使其更漂亮（在代码，布局和外观方面），但我只是想展示它背后的逻辑
带有div的{{1}}代码有3个部分。
class="alert"级）.alert-point标记中）span标签，因为我认为这是最简单的）警报的3个内部组件都设置为显示div
<强> CSS
inline-block CSS只使用input, select {
position:relative;
float:left;
}
.alert {
padding:10px;
background-color:#C44D4D;
position:relative;
color:white;
font:13px arial, sans-serif;
font-weight:bold;
display:none;
float:left;
opacity:0;
margin-left:7px;
margin-top:2px;
}
.alert-point {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #C44D4D;
position:absolute;
left:-10px;
top:0px;
}
.alert>span {
line-height:24px;
}
.alert>.close {
background-color:none;
border:1px solid rgba(255, 255, 255, 0.3);
margin-left:10px;
width:20px;
height:20px;
line-height:20px;
text-align:center;
color:white;
display:inline-block;
cursor:pointer;
}
.submit {
cursor:pointer;
}
和float:left;定位元素
类position:relative;的{{1}}代码设置为div和.alert，这样当文档加载时，所有警报都不可见（jQuery中动画的不透明度设置为0） ，否则将是1）
CSS的其余部分只是改善了外观。
<强> JS
display:none;jQuery代码有两个函数：
按钮点击功能
该函数声明了3个变量，以便稍后在摇动功能中使用。根据需要使用这些值。
- opacity:0;确定摇动效果的运行次数
- $("#myButtonID").click(function () {
var numShakes = 3; //full cycles
var distance = 10; //in pixels
var cycleSpeed = 1000; //in milliseconds
if ($("#myTextID").val() === "") {
$("#myTextID").next("div").css({
display: "inline-block"
});
$("#myTextID").next("div").animate({
opacity: 1
}, 500, function () {
$(this).effect("shake", {
direction: "left",
times: numShakes,
distance: distance
}, cycleSpeed);
});
}
if ($("#mySelectID")[0].selectedIndex === 0) {
$("#mySelectID").next("div").css({
display: "inline-block"
});
$("#mySelectID").next("div").animate({
opacity: 1
}, 500, function () {
$(this).effect("shake", {
direction: "left",
times: numShakes,
distance: distance
}, cycleSpeed);
});
}
});
$(".close").click(function () {
$(this).parent().animate({
opacity: 0
}, 1000, function () {
$(this).css("display", "none");
});
});
确定对象在给定方向上移动的距离（从左到右是默认值）
- numShakes确定震动效果的速度
声明这3个变量后，每个distance语句代表不同的输入项。如果您有更多输入，请复制并粘贴cycleSpeed语句，然后更改我在该语句中稍后提及的内容。
if语句的结构如下：
if语句确定是否输入，选择等值。因此，在第一个if语句中，我们得到id为if的输入值，如果是设置为if，换句话说，没有输入任何内容，然后执行以下操作。这适用于输入基于键盘输入（文本或数字）的任何字段#myTextID元素后面的下一个""元素，这当然是我们的div类#myTextID，我们更改了它的CSS到div（如果您愿意，也可以设置为.alert，我将其设置为display:inline-block;因为我正在测试并且从未更改过它。我们之所以这样做。这样做是因为元素现在显示在文档中（但它仍然是不可见的 - 在CSS文档中block）inline-block毫秒后将opacity:0设置为opacity。 1毫秒后，我们运行动画结束功能，设置为摇动功能。此函数抓取我们一直使用的相同项目并使用效果方法。从效果方法，我们使用500效果。我们还插入了我们在click函数开头声明的变量500语句有3个ID）。您还应该确保正在搜索正确的“0输入”值（意味着用户尚未在必填字段中输入值）。正如我们所看到的，第二个"shake"语句使用的条件与第一个语句不同。我上面提供的链接应该可以帮助您检查表单验证的内容最后，div点击功能，关闭警报。此函数只是将不透明度设置为0，并在此动画后（动画完成后）将其显示设置回if
希望有所帮助！
编辑 - 在代码的每个部分下面添加了解释
答案 1 :(得分：0)
在您显示消息时的验证功能中，您可以使用jQuery UI shake effect
代码：
$(document).click(function () {
$("#toggle").effect("shake");
});