Stackoverflow 的动画必填字段验证方法？

Question

我正在开发一个 ASP.NET 网站。目前，我通过简单地在页面顶部添加必填字段验证器和验证摘要控件来进行必填字段验证。但我在 stackoverflow 中看到了一个有趣的验证。

当您单击提交按钮时，它会弹出一个小动画。我猜它是通过使用 jquery 完成的。我想要那个确切的验证方法。具有震动效果的整个验证过程。我不熟悉Jquery。任何资源都会有用。

非常感谢。

这是链接

https://stackoverflow.com/contact

这是屏幕截图

http://i62.tinypic.com/ofd4b4.jpg

Answer 1

查看this 使用 jQuery 进行表单验证的答案

至于您的实际问题，下面的代码将完成这项工作。 检查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 使其更漂亮（在代码、布局和外观方面），但是我只是想展示它背后的逻辑 带有class="alert" 的div 标签有3 个部分。

1. 三角形（.alert-point 类）
2. 警报消息（在span 标签中）
3. X 按钮关闭警报（我为此使用了div 标签，因为我认为它最简单）

警报的3个内部组件都设置为显示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;
}

CSS 只是使用float:left; 和position:relative; 定位元素 带有.alert 类的div 标签设置为display:none; 和opacity:0;，这样当文档加载时，所有警报都不可见（对于jQuery 中的动画，不透明度设置为0，否则默认为1） CSS 的其余部分只是改善了外观。

JS

$("#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");
    });
});

jQuery 代码有 2 个功能：

• 按钮单击功能（处理表单验证）
• Div 点击函数（处理关闭警报）

按钮点击功能 这个函数声明了 3 个变量，以便稍后在摇动函数中使用。随心所欲地使用这些值。 - numShakes 决定震动效果运行的次数 - distance 确定对象将在给定方向上移动的像素距离（默认为从左到右） - cycleSpeed决定震动效果的速度

声明这3个变量后，每个if语句代表一个不同的输入项。如果您有更多输入，请复制并粘贴 if 语句，然后更改我稍后在该语句中提到的内容。

if 语句的结构如下：

1. if 语句确定一个值是否被输入、选择等。因此，在第一个if 语句中，我们获取 ID 为#myTextID 的输入值，如果它设置为"" ，换句话说，没有输入任何内容，然后执行以下操作。这应该适用于任何基于键盘输入（文本或数字）输入的字段
2. 然后我们得到下一个div 元素，紧跟在DOM 中的#myTextID 元素之后，当然是我们的div 类.alert，我们将它的CSS 更改为display:inline-block;（这可能是设置为block 以及如果您愿意，我将其设置为inline-block，因为我正在测试它并且从未将其更改回来。我们这样做的原因是该元素现在显示在文档中（但它仍然不可见 - CSS 文档中的 opacity:0）
3. 我们现在抓取同一个项目，并在500 毫秒后使用动画函数将其opacity 设置为1。
4. 500 毫秒后，我们运行动画结束函数，该函数设置为我们的抖动函数。这个函数抓取我们一直在使用的同一个项目并使用 effect 方法。从效果方法来看，我们使用的是"shake" 效果。我们还插入了我们在 click 函数开头声明的那些变量
5. 重复所有输入的更改，正如我之前提到的，我会提到项目的 id（每个 if 语句有 3 个 id 需要更改）。您还应该确保您正在搜索正确的“0 输入”值（意味着用户尚未在必填字段中输入值）。正如我们所见，第二个if 语句使用的条件与第一个不同。我上面提供的链接应该可以帮助您检查表单验证的内容

最后是 div 点击函数，它会关闭警报。这个函数只是简单地将不透明度重新设置为 0，然后在这个动画之后（一旦动画完成），我们将它的显示设置回"none"

希望有帮助！

---

编辑 - 在每个代码部分下方添加说明

Answer 2

在您显示消息时的验证功能中，您可以使用jQuery UI shake effect

代码：

$(document).click(function () {
    $("#toggle").effect("shake");
});

演示：http://jsfiddle.net/p8xx3t2f/