使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示   本地下载

今 天是情人节，这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节，可能大家使用过很多的评论或者留言系统，基本都是静态输入的形式，今天我们创 建的这个留言板灵感来自于一些超棒的网页设计，在用户输入过程中，会动态的显示输入框，产生类似flash的效果。提高用户的体验。希望大家喜欢！

注：由于使用了Cufon英文字体美化UI界面，所有不支持中文输入，如果你需要输入中文，请将Cufon相关代码移除即可。

jQuery插件

1. jQuery validation engine plugin  -  表单验证插件

2. jQuery placehoder plugin  -  输入提示插件

3. jQuery pretty form plugin  -  美化表单插件

4. Cufon  - 美化字体类库

Javascript代码

以下代码生成输入框和textarea的背景效果：

/*
 ---------------------------------------------------------------------- 
*/
 /*
    GBin1.com Living form
/* ---------------------------------------------------------------------- 
*/
 $(function
(){
    $(".input-wrapper").livingElements("img/input-mask-white.png", {
        background: "url('img/living-gradient.png') no-repeat",
        easing: 'linear',
        triggerElementSelector: 'input',
        mainAnimationStartOpacity: 0,
        mainAnimationEndOpacity: 1,
        mainAnimationDuration: 800
    });
    
    $(".textarea-wrapper").livingElements("img/textarea-mask.png", {
        background: "url('img/textarea-gradient.jpg') no-repeat",
        easing: 'linear',
        triggerElementSelector: 'textarea',
        preAnimationStartOpacity: 0,
        mainAnimationFade: false
,
        scrollDirection: 'horizontal',
        mainAnimationDuration: 1500,
        mainAnimationStartBackgroundPositionX: -200,
        mainAnimationEndBackgroundPositionX: 0,
        postAnimationEndOpacity: 0
    });
});

复制代码

以上代码分别使用不同的效果来动态展示输入效果。

输入内容提示，及其表单验证如下：

$(function
(){
    Cufon.replace('h1, div, input').CSS.ready(function
() {
        $('input[placeholder], textarea[placeholder]').placeholder();

        $("#commentform").validationEngine('attach');
        $("#submit").click(function
(){
            if
(!$("#commentform").validationEngine('validate')){
                return
;
            }
            var
 mail,name,comments;
            mail = $("#mail").val();
            name = $("#name").val();
            comments = $("#comment").val();
            $("#comments").hide().append("<div class=\"item\">" + name + " (" + mail + "): " + new
 Date() + "</div><div class=\"itemtxt\">" + comments+ "</div>").fadeIn(1000);
            Cufon.refresh();
        });
    });
});

复制代码

以上代码中，我们判断是否输入，然后，提示用户输入内容。完成后，调用Cufon.refresh()方法来生成界面字体。

HTML

<
h1
>
Super Cool Live Comment Box</
h1
>
 <
form 
method
="post"
 id
="commentform"
 style
="width:400px"
>
     
    <
div  
id
="living-effect"
 class
="input-wrapper"
>
         <
input 
class
="living-input validate[required,custom[email]]"
 id
="mail"
 type
="text"
 placeholder
="Your email..."
>
     </
div
>
        

    <
div  
id
="living-effect"
 class
="input-wrapper"
>
         <
input 
class
="living-input validate[required]"
 id
="name"
 type
="text"
 placeholder
="Your name..."
>
     </
div
>
    
    
    <
div  
id
="living-effect"
 class
="textarea-wrapper"
>
         <
textarea 
class
="living-textarea validate[required]"
 id
="comment"
 type
="text"
 placeholder
="Your comments..."
></
textarea
>
     </
div
>
        
    
    <
div  
class
="submit-wrapper"
>
         <
input 
value
="submit"
 id
="submit"
 class
="living-submit"
 style
="color:#808080;padding: 10px 46px 11px;margin-left:15px;font-size:14px"
 type
="button"
>
     </
div
>
     
    <
div  
class
="info-wrapper"
>
         <
div 
id
="comments"
></
div
>
     </
div
>
 </
form
>