stevenmaguire/zurb-foundation-laravel

在 Laravel 中构建 Foundation 的 HTML 表单元素

0.0.2 2014-07-26 04:27 UTC

This package is auto-updated.

Last update: 2024-09-14 10:21:40 UTC


README

Total Downloads Latest Stable Version Build Status Coverage Status ProjectStatus

Foundation Laravel (Laravel4 包)

tl;dr

在 Laravel 4 中构建 Foundation 的 HTML 表单元素,包括验证错误处理。相应框架的文档可以在 Foundation 网站Laravel 网站 上找到。

所需设置

composer.json 文件的 require 键中添加以下内容

"stevenmaguire/zurb-foundation-laravel": "dev-master"

运行 Composer 更新命令

$ composer update

在你的 config/app.php 文件中,将 'Stevenmaguire\Foundation\FoundationServiceProvider' 添加到 $providers 数组的末尾

'providers' => array(

    'Illuminate\Foundation\Providers\ArtisanServiceProvider',
    'Illuminate\Auth\AuthServiceProvider',
    ...
    'Stevenmaguire\Foundation\FoundationServiceProvider',

),

用法

当在 Laravel 4 中使用 blade 视图引擎编写表单时,此包将拦截基本的 Form::method 请求,并组合成适用于基于 Foundation 4 的演示的结构化表单元素。

<div class="large-8 small-12 columns">
	{{ Form::model($user,array('route' => 'route.name','class' => 'custom')) }}
		<fieldset>
			<legend>Create New Account</legend>				
			{{ Form::label('name', 'Full Name') }}
			{{ Form::text('name',$user->name,array('placeholder'=>'Tell us your whole name')) }}
			{{ Form::label('email', 'Email') }}
			{{ Form::text('email',$user->email,array('placeholder'=>'Valid email used to login and receive information from us')) }}
			{{ Form::label('password', 'Password') }}
			{{ Form::password('password',$user->password,array('placeholder'=>'Gimme your password')) }}
			{{ Form::submit('Create Account',array('class'=>'button')) }}
		</fieldset>
	{{ Form::close() }}
</div>

将无错误渲染

<div class="large-8 small-12 columns">
	<form accept-charset="UTF-8" action="http://host/action/from/route" class="custom" method="post">
		<fieldset>
			<legend>Create New Account</legend> 
			<label for="name">Full Name</label> 
			<input id="name" name="name" placeholder="Tell us your whole name" type="text"> 
			<label for="email">Email</label>
			<input id="email" name="email" placeholder="Valid email used to login and receive information from us" type="text"> 
			<label for="password">Password</label> 
			<input id="password" name="password" placeholder="Gimme your password" type="password" value=""> 
			<input class="button" type="submit" value="Create Account">
		</fieldset>
	</form>
</div>

带有错误

$rules = array(
	'name' => array('required','min:3','max:32','regex:/^[a-z ,.\'-]+$/i'),
	'email' => array('required','unique:users,email,%%id%%','regex:/^([a-zA-Z0-9])+([a-zA-Z0-9\+\%\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/'),
	'password' => array('required')
	);
<div class="large-8 small-12 columns">
	<form accept-charset="UTF-8" action="http://host/action/from/route" class="custom" method="post">
		<fieldset>
			<legend>Create New Account</legend> 
			<label class="error" for="name">Full Name</label> 
			<input class="error" id="name" name="name" placeholder="Tell us your whole name" type="text" value="">
			<small class="error">The name field is required.</small> 
			<label class="error" for="email">Email</label> 
			<input class="error" id="email" name="email" placeholder="Valid email used to login and receive information from us" type="text" value="">
			<small class="error">The email field is required.</small> 
			<label class="error" for="password">Password</label> 
			<input class="error" id="password" name="password" placeholder="Gimme your password" type="password" value="">
			<small class="error">The password field is required.</small> 
			<input class="button" type="submit" value="Create Account">
		</fieldset>
	</form>
</div>

当前支持的方法

  • 文本
  • 密码
  • 电子邮件
  • 文本区域
  • 选择
  • 选择范围
  • 选择月份
  • 标签