css翻译系列---(web表单验证之，使用jquery进行动画验证)

原文出处，有过项目开发经验的同志们大都会碰到表单验证这类问题，检验用户输入的有效性，过滤掉用户的非法输入，传统的基于弹出警告框的方式已经不能够满足用户对于视觉美观的需要，如何以一种更加友好的方式提示用户，是UI设计者们需要考虑的问题。

 

技术挺简单的：当用户按下提交按钮的时候，验证发生，所有非法的输入域会颤抖，下面是一个非常简单的表单，我不会解释表单的结构样式，这里我只关注与动画特效。

 

<ul>
    <li class="first">
        <h3>Your Name</h3>
        <p>
            <input type="text" value="First and Last name" id="name" name="name" /></p>
    </li>
    <li>
        <h3>Email</h3>
        <p>
            <input type="text" value="my@email.com" name="email"  /></p>
    </li>
    <li>
        <h3>Password</h3>
        <p>
            <input type="password" name="passwd" /></p>
    </li>
    <li>
        <h3>Password confirmation</h3>
        <p>
            <input type="password" name="passwd_conf"  /></p>
    </li>
    <li>
        <h3>User name</h3>
        <p>
            <input type="text" value="MyUserName" id="userName" name="user_name"  /></p>
    </li>
</ul>

工作原理：当用户按下提交按钮后，jquery将会获取到所有空的输入域，如果至少有一个空的输入域，动画就会被应用到该输入域上。

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            // animation goes here
        });
    }
}); 

 

让我们看看如何创建简单的动画，我们要向左移动每一个输入域10px，接下来向右移动10px，重复这个动作一次并且设置回他们的原始位置

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            $(this).stop()
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "0px" }, 100)
                .addClass("required");
        });
    }
});

请记住：静态验证反馈是不能够替换这种动画验证的，一旦验证失败每一个非法的输入域需要清晰地被标示出来，这种有好的特效用户捕获用户的注意力，在这里你可以获取更多关于验证的文章