Railsの生成フォーム

3788 ワード

1, Dealing with Basic Forms
<%= form_tag({:controller=>"cname", :action=>"aname"},{:id=>"iname", :class=>"cstyle", :name=>"fname"}) do %>
 <%= text_field_tag :name, nil, :class=>"class1" %>
 <%= password_field_tag :password %>
 <%= submit_tag("Login",{:name=>"mysubmit"}) %>
<% end %> #    <%= end %>

      

<form accept-charset="UTF-8" action="/cname/aname" class="cstyle" id="iname" method="post" name="fname">
 <input class="class1" id="name" name="name" type="text" />
 <input id="password" name="password" type="password" />
 <input name="mysubmit" type="submit" value="Login" />
<form>

 コントローラでparams[:name]とparams[:password]でデータを取得
2, Dealing with Model Objects
<%= form_for @user, :url => url_for(:controller => 'kangli', :action => "login"), :html => {:class => "cstyle", :name => "nname", :id => "iname"}  do |f| %>
 <%= f.text_field :name, :id=>"name" %>
 <%= f.password_field :password, :class=>"class1" %>
 <%= f.submit "login", :class => "class1" %>
<% end %>

      

<form accept-charset="UTF-8" action="/kangli/login" class="cstyle" id="iname" method="post" name="nname">
 <input id="name" name="user[name]" size="30" type="text" /> 
 <input class="class1" id="user_password" name="user[password]" size="30" type="password" />
 <input class="class1" name="commit" type="submit" value="login" />
</form>

 コントローラでparams[:user][:name]とparams[:user][:password]でデータを取得
 
フォーム提出の検証はmodelで構成できますが、個人的にはcoffeescriptやjqueryで簡単に実現できると思います
方法1——coffeescript、assets/javascriptディレクトリの対応ファイルを編集し、tabではなくスペースでインデントしないように注意するコードを追加する
$(document).ready ->
    $('#iname').submit ->
        if $('#user_name').val() == '' or $('#user_password').val() == ''
            alert "name or password should not be true"
            $('#user_name').focus()
            return false
        else
            return true

 railsはページをロードするときに上のコードを次のjavascriptコードに変換します.
(function() {
  $(document).ready(function() {
    return $('#iname').submit(function() {
      if ($('#user_name').val() === '' || $('#user_password').val() === '') {
        alert("name or password should not be true");
        return false;
      } else {
        return true;
      }
    });
  });

}).call(this);

方法2——jquery、viewファイルを編集してjavascriptを追加する
<script type="text/javascript">
	$(document).ready(function(){
		$("#iname").submit(function(){
			if ($("#user_name").val() == "" || $("#user_password").val() == ""){
				alert("name or password should not be null");
				$("user_name").focus();
				return false;
			}
		})
	});
</script>