socialforge/app/views/projects/invite_members_by_mail.html.erb

<script type="text/javascript" src="/javascripts/jQuery.autoMail.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#mail").mailAutoComplete({
            boxClass: "out_box", 		//外部box样式
            listClass: "list_box", 		//默认的列表样式
            focusClass: "focus_box", 	//列表选样式中
            markCalss: "mark_box", 		//高亮样式
            autoClass: false,
            textHint: true 				//提示文字自动隐藏
        });
    });
</script>
<style type="text/css">
    .out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
    .list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
    .focus_box{background:#83DAF6;}
    .mark_box{color:#FF7143;}
</style>
<script>
    function verifyAddress() {
        var email = $.trim($('#mail').val());
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(email == "")
        {
            $("#valid_email").text("<%= l(:label_input_email_blank)%>");
            return false;
        }
        else if(!filter.test(email))
        {
            $("#valid_email").text("<%= l(:label_email_format_error)%>");
            return false;
        }
        else if(email.length > 25)
        {
            $("#valid_email").text("邮箱名过长,最长为25个字符");
            return false;
        }
        else
        {
            $("#valid_email").text("");
            return true;
        }

    }

    function verifyLastName() {
        var last_name = $.trim($('#last_name').val());
        if(last_name.length > 30)
        {
            $("#valid_email").text("用户姓氏过长,最长为30个字符");
            return false;
        }
        else
        {
            $("#valid_email").text("");
            return true;
        }

    }

    function verifyFirstName() {
        var first_name = $.trim($('#first_name').val());
        if(first_name.length > 30)
        {
            $("#valid_email").text("用户名字过长,最长为30个字符");
            return false;
        }
        else
        {
            $("#valid_email").text("");
            return true;
        }

    }

    function senderEmail(obj)
    {
        if(verifyAddress() && verifyFirstName()  && verifyLastName() )
        {
            obj.parent().submit();
        }
    }


    //        if (filter.test(email)&& !(email.value == null)) return true;
    //            else
    //            {
    //                document.getElementById('valid_email').innerHTML = "您所填写的电子邮件格式不正确";
    //                document.getElementById('valid_email').style.color = "#FF0000";
    //                return false;
    //            }
    //
    //        }
</script>
<div class="project_r_h">
  <h2 class="project_h2"><%= l(:label_invite_join)%></h2>
</div>
<div  class="box_main">
  <p class="box_p">
    <%= l(:label_invite_email_tips)%>
  </p>
  <div id="is_registed">
    <%= render :partial => 'regested', locals: { :isregisted => false} %>
  </div>
  <%= form_tag('send_mail_to_member', :controller => 'projects',:action => 'send_mail_to_member', method: 'get') do %>
      <span id="valid_email" style="color: #FF0000;"></span>
      <ul>
        <li>
          <%= text_field_tag 'mail',  '', :class => "fb_item fl", :placeholder => l(:label_input_email), :onkeyup => "this.value=this.value.replace(' ','')", :style => "ime-mode:disabled;", :onblur => "verifyAddress(this);" %>
        </li>
        <li>
          <%= text_field_tag 'last_name',  '', :class => "fb_item_first_name fl", :placeholder => l(:label_input_email_lastname), :onkeyup => "this.value=this.value.replace(' ','')", :style => "ime-mode:disabled;", :onblur => "verifyLastName(this);" %>
        </li>
        <li>
          <%= text_field_tag 'first_name',  '', :class => "fb_item_last_name fl", :placeholder => l(:label_input_email_firstname), :onkeyup => "this.value=this.value.replace(' ','')", :style => "ime-mode:disabled;", :onblur => "verifyFirstName(this);" %>
        </li>
        <li>
          <select class="fb_item_gender fl"  id="gender" name="gender"><option value="">性别</option><option value="0">男</option><option value="1">女</option></select>
        </li>
      </ul>
      <div class="cl"></div>
      <a href="#" class="btn_free" onclick="senderEmail($(this));">
        <%= l(:label_send_email)%>
      </a>
  <% end %>

  <%# 邀请用户的状态 %>
  <% unless @inviter_lists.blank? %>
  <div class="section">
    <div class="section-header">
        <div class="desc">项目成员邀请状态列表</div>
    </div>
    <div class="invitations-records">
      <% @inviter_lists.each do |inviter_list| %>
          <table>
            <tbody>
            <% if inviter_list.user != nil %>
            <tr>
              <td class="email"><%= inviter_list.user.mail %></td>
              <td class="text-name">
                <% if inviter_list.user.active? %>
                    <%=link_to inviter_list.user.name, user_path(inviter_list.user), :class => "c_eblue" %>
                <% else %>
                    <span class="unactive"><%= inviter_list.user.name %></span>
                <% end %>
              </td>
              <td class="text-status"><%= status_for_ivitied(inviter_list, @project) %></td>
              <!--<td class="text-time"><%#= time_tag(inviter_list.created_at).html_safe %></td>-->
            </tr>
            <% end %>
            </tbody>
          </table>
      <% end %>
    </div>
  </div>
  <% end %>


  <% unless @inviter_lists.blank? %>
    <div>
      <% unless @inviters_count.nil? %>
        <span class="status_inviter">已加入项目的用户</span><br/>
        <% @inviters.each do |inv| %>
            <%= inv.name unless inv.nil? %><br/>
        <% end %>
      <% end %>
      </br>
      <% unless @waiters_count.nil? %>
        <span class="status_inviter">等待加入项目的用户</span><br/>
        <% @waiters.each do |wai| %>
          <%= wai.name unless wai.nil?%><br/>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>