javascript - 堆栈溢出动画必填字段验证方法？

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使其更漂亮（在代码，布局和外观方面），但是我只是想展示其背后的逻辑
带有 div的 class="alert"标记包含3个部分。


三角形（ .alert-point类）
警报消息（在 span标记中）
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;定位元素
类别为 div的 .alert标记设置为 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语句的结构如下：


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


最后，使用div单击功能关闭警报。此功能仅将不透明度动画化为0，然后跟随该动画（一旦动画完成），我们将其显示设置回 if

希望有帮助！



编辑-在代码的每个部分下面添加了说明