留言板

1.在编辑器中输入{###message###}，然后前台就可以看到留言板，你信吗？，必须信，还可以变着花样玩

2.再控制器层输入：

 if ($objInfo) {
        	//显示Online Message
	        if (eregi("\{###message###\}",$objInfo["content"])){
	            $this->assign('message',true);
	           //$this->assign('messageList',getMessage());
	        }
			$objInfo["content"] = @ereg_replace("\{###message###\}", "", $objInfo["content"]);
			
            $this->assign('objInfo', $objInfo); //替换标签
            //读取下级菜单
            $this->assign('left_menu', $this->getLeftMenu());
        } else {
            $this->error('非法操作！', U('/'));
        }

 3.在要显示留言板的模板中调用message.html模板

　　message.html中的内容

　　

<form id="messageForm" class="form-horizontal message-sub" name="messageForm" method="post" action="">
	<div class="control-group">
        <label class="control-label">留言标题：</label>
        <div class="controls">
            <input class="input_title span3" type="text" value="请输入留言标题" name="title">
            <span class="a help-inline">请输入2-100个字符！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">类型：</label>
        <div class="controls">
            <select name="type" tabindex="-1" class="input_type span3">
            	<option selected="selected" value="0">咨询</option>
            	<option value="1">投诉</option>                    
            	<option value="2">建议</option>        
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">姓名：</label>
        <div class="controls">
            <input class="input_name span3" type="text" value="请输入姓名" name="name">
            <span class="a help-inline">请输入2-16个字符！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">邮箱：</label>
        <div class="controls">
            <input class="input_email span3" type="text" value="请输入邮箱" name="email">
            <span class="a help-inline">请输入正确的邮箱格式！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">QQ：</label>
        <div class="controls">
            <input class="input_qq span3" type="text" value="请输入QQ" name="qq">
            <span class="a help-inline">请输入2-18位字符的正确QQ格式！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">手机号码：</label>
        <div class="controls">
            <input class="input_mobile span3" type="text" value="请输入手机号码" name="mobile">
            <span class="a help-inline">请输入11-12位字符的正确手机号码！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">留言：</label>
        <div class="controls">
            <textarea class="text_cont span3" name="content" rows="3">请输入留言</textarea>
            <span class="a help-inline">留言信息200字以内！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <div class="controls text-left">
            <input id="saveButton" class="btn mesBtn" type="button" value="提交" name="submit">
            <span id="loadingInfo"></span>
            <span class="send hide help-inline">留言已发送！</span>
        </div>
    </div>

</form>

<script type="text/javascript">
$(function(){

    $("input:text").each(function(){
        var inputInfo=$(this).val();
        $(this).focus(function(){
        	var value=$(this).val();
        	if(inputInfo==value){
        		$(this).val("");
        	}
            	
        });
        $(this).blur(function(){
            var value=$(this).val();
            if(value==''){
                $(this).val(inputInfo);
            }
        });
    });

    $("textarea").each(function(){
        var textareaInfo=$(this).val();
        $(this).focus(function(){
        	var value=$(this).val();
        	if(textareaInfo==value){
        		$(this).val("");
        	}
            
            
        });
        $(this).blur(function(){
            var value=$(this).val();
            if(value==''){
                $(this).val(textareaInfo);
            }
        });
    });
	
	//验证留言标题
    $(".input_title").blur(function(){
        var input_name=$(".input_title").val();
        if(input_name.length>=2 && input_name.length<=100 && input_name!='请输入留言标题'){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
        	$(this).parent().find("span").show();
        	$(this).parent().find("span.ok").hide();
        	$(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
        
        
    });
	
    //验证姓名
    $(".input_name").blur(function(){
        var input_name=$(".input_name").val();
        if(input_name.length>=2 && input_name.length<=16 && input_name!='请输入姓名'){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
           	$(this).parent().find("span").show();
        	$(this).parent().find("span.ok").hide();
        	$(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证邮箱
    $(".input_email").blur(function(){
        var input_email=$(".input_email").val();
        if((/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/).test(input_email)){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
        	$(this).parent().find("span.ok").hide();
        	$(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证QQ
    $(".input_qq").blur(function(){
        var input_qq=$(".input_qq").val();
        if(input_qq.length>=2 && input_qq.length<=18 && /^[0-9]*$/.test(input_qq)){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
        	$(this).parent().find("span.ok").hide();
        	$(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证手机号码
    $(".input_mobile").blur(function(){
        var input_mobile=$(".input_mobile").val();
        if(input_mobile.length>=11 && input_mobile.length<=12 && /^[0-9]*$/.test(input_mobile)){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
        	$(this).parent().find("span.ok").hide();
        	$(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证留言
    $(".text_cont").blur(function(){
        var text_cont=$(".text_cont").val();
        if(text_cont!='' && text_cont.length<=200 && text_cont!='请输入留言'){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
        	$(this).parent().find("span.ok").hide();
        	$(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    $(".mesBtn").bind("click",function(){
        var sendurl='{:U("Message/getMes","","")}';
        var sendForm=$("#messageForm").serialize();
        var himself=$(this);
        if($(".input_title").val()=='请输入留言标题' || $(".input_title").parents(".control-group").hasClass("error")){
        	$(".input_title").parents(".control-group").addClass("error");
            $(".input_title").focus();
            return false;
        }
        if($(".input_name").val()=='请输入姓名' || $(".input_name").parents(".control-group").hasClass("error")){
        	$(".input_name").parents(".control-group").addClass("error");
            $(".input_name").focus();
            return false;
        }
        if($(".input_email").val()=='请输入邮箱' || $(".input_email").parents(".control-group").hasClass("error")){
            $(".input_email").focus();
            return false;
        }
        if($(".input_qq").val()=='请输入QQ' || $(".input_qq").parents(".control-group").hasClass("error")){
        	$(".input_qq").parents(".control-group").addClass("error");
            $(".input_qq").focus();
            return false;
        }
        if($(".input_mobile").val()=='请输入手机号码' || $(".input_mobile").parents(".control-group").hasClass("error")){
        	$(".input_mobile").parents(".control-group").addClass("error");
            $(".input_mobile").focus();
            return false;
        }
        if($(".text_cont").val()=='请输入留言' || $(".text_cont").parents(".control-group").hasClass("error")){
        	$(".text_cont").parents(".control-group").addClass("error");
            $(".text_cont").focus();
            return false;
        }

        $.post(sendurl, sendForm,
                function(data){
                    if(data.status){
                        himself.parents().find("span").hide();
		                himself.parents().find("span.a").show();
		                himself.parent().find("span.send").show();
		                $('#messageForm div').removeClass('success').removeClass('error');
                        $("form#messageForm")[0].reset();
                    }else{
                        alert("留言失败！");
                    }
                },
                'json');
    });

});
</script>

 

 

  

 

主要思想就是一个“替换”

<form id="messageForm" class="form-horizontal message-sub" name="messageForm" method="post" action="">
    <div class="control-group">
        <label class="control-label">留言标题：</label>
        <div class="controls">
            <input class="input_title span3" type="text" value="请输入留言标题" name="title">
            <span class="a help-inline">请输入2-100个字符！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">类型：</label>
        <div class="controls">
            <select name="type" tabindex="-1" class="input_type span3">
                <option selected="selected" value="0">咨询</option>
                <option value="1">投诉</option>                    
                <option value="2">建议</option>        
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">姓名：</label>
        <div class="controls">
            <input class="input_name span3" type="text" value="请输入姓名" name="name">
            <span class="a help-inline">请输入2-16个字符！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">邮箱：</label>
        <div class="controls">
            <input class="input_email span3" type="text" value="请输入邮箱" name="email">
            <span class="a help-inline">请输入正确的邮箱格式！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">QQ：</label>
        <div class="controls">
            <input class="input_qq span3" type="text" value="请输入QQ" name="qq">
            <span class="a help-inline">请输入2-18位字符的正确QQ格式！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">手机号码：</label>
        <div class="controls">
            <input class="input_mobile span3" type="text" value="请输入手机号码" name="mobile">
            <span class="a help-inline">请输入11-12位字符的正确手机号码！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">留言：</label>
        <div class="controls">
            <textarea class="text_cont span3" name="content" rows="3">请输入留言</textarea>
            <span class="a help-inline">留言信息200字以内！</span>
            <span class="ok hide help-inline">输入正确！</span>
        </div>
    </div>
    <div class="control-group">
        <div class="controls text-left">
            <input id="saveButton" class="btn mesBtn" type="button" value="提交" name="submit">
            <span id="loadingInfo"></span>
            <span class="send hide help-inline">留言已发送！</span>
        </div>
    </div>

</form>

<script type="text/javascript">
$(function(){

    $("input:text").each(function(){
        var inputInfo=$(this).val();
        $(this).focus(function(){
            var value=$(this).val();
            if(inputInfo==value){
                $(this).val("");
            }
                
        });
        $(this).blur(function(){
            var value=$(this).val();
            if(value==''){
                $(this).val(inputInfo);
            }
        });
    });

    $("textarea").each(function(){
        var textareaInfo=$(this).val();
        $(this).focus(function(){
            var value=$(this).val();
            if(textareaInfo==value){
                $(this).val("");
            }
            
            
        });
        $(this).blur(function(){
            var value=$(this).val();
            if(value==''){
                $(this).val(textareaInfo);
            }
        });
    });
    
    //验证留言标题
    $(".input_title").blur(function(){
        var input_name=$(".input_title").val();
        if(input_name.length>=2 && input_name.length<=100 && input_name!='请输入留言标题'){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
            $(this).parent().find("span.ok").hide();
            $(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
        
        
    });
    
    //验证姓名
    $(".input_name").blur(function(){
        var input_name=$(".input_name").val();
        if(input_name.length>=2 && input_name.length<=16 && input_name!='请输入姓名'){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
               $(this).parent().find("span").show();
            $(this).parent().find("span.ok").hide();
            $(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证邮箱
    $(".input_email").blur(function(){
        var input_email=$(".input_email").val();
        if((/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/).test(input_email)){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
            $(this).parent().find("span.ok").hide();
            $(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证QQ
    $(".input_qq").blur(function(){
        var input_qq=$(".input_qq").val();
        if(input_qq.length>=2 && input_qq.length<=18 && /^[0-9]*$/.test(input_qq)){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
            $(this).parent().find("span.ok").hide();
            $(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证手机号码
    $(".input_mobile").blur(function(){
        var input_mobile=$(".input_mobile").val();
        if(input_mobile.length>=11 && input_mobile.length<=12 && /^[0-9]*$/.test(input_mobile)){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
            $(this).parent().find("span.ok").hide();
            $(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    //验证留言
    $(".text_cont").blur(function(){
        var text_cont=$(".text_cont").val();
        if(text_cont!='' && text_cont.length<=200 && text_cont!='请输入留言'){
            $(this).parent().find("span").hide();
            $(this).parent().find("span.ok").show();
            $(this).parents(".control-group").removeClass("error");
            $(this).parents(".control-group").addClass("success");
        }else{
            $(this).parent().find("span").show();
            $(this).parent().find("span.ok").hide();
            $(this).parents(".control-group").removeClass("success");
            $(this).parents(".control-group").addClass("error");
        }
    });

    $(".mesBtn").bind("click",function(){
        var sendurl='{:U("Message/getMes","","")}';
        var sendForm=$("#messageForm").serialize();
        var himself=$(this);
        if($(".input_title").val()=='请输入留言标题' || $(".input_title").parents(".control-group").hasClass("error")){
            $(".input_title").parents(".control-group").addClass("error");
            $(".input_title").focus();
            return false;
        }
        if($(".input_name").val()=='请输入姓名' || $(".input_name").parents(".control-group").hasClass("error")){
            $(".input_name").parents(".control-group").addClass("error");
            $(".input_name").focus();
            return false;
        }
        if($(".input_email").val()=='请输入邮箱' || $(".input_email").parents(".control-group").hasClass("error")){
            $(".input_email").focus();
            return false;
        }
        if($(".input_qq").val()=='请输入QQ' || $(".input_qq").parents(".control-group").hasClass("error")){
            $(".input_qq").parents(".control-group").addClass("error");
            $(".input_qq").focus();
            return false;
        }
        if($(".input_mobile").val()=='请输入手机号码' || $(".input_mobile").parents(".control-group").hasClass("error")){
            $(".input_mobile").parents(".control-group").addClass("error");
            $(".input_mobile").focus();
            return false;
        }
        if($(".text_cont").val()=='请输入留言' || $(".text_cont").parents(".control-group").hasClass("error")){
            $(".text_cont").parents(".control-group").addClass("error");
            $(".text_cont").focus();
            return false;
        }

        $.post(sendurl, sendForm,
                function(data){
                    if(data.status){
                        himself.parents().find("span").hide();
                        himself.parents().find("span.a").show();
                        himself.parent().find("span.send").show();
                        $('#messageForm div').removeClass('success').removeClass('error');
                        $("form#messageForm")[0].reset();
                    }else{
                        alert("留言失败！");
                    }
                },
                'json');
    });

});
</script>