Laravel技巧库

Form表单和数据验证

此课程是收费课程,请先购买或加入会员后再访问。

修改表单

优化一下表单部分,先退出登录状态。点击登录。
其实登录注册的表单,在提供的静态模板里已经都已经有了。

在集成自己的模板之前,先来看看laravel自己提供的登录注册模板是怎么回事。actioncsrf部分就不解释了,都是一回事的。

三元

{{ $errors->has('email') ? ' has-error' : '' }}

这里有一个三元表达式,$errors是数据验证如果出错后,laravel自动发给模板的信息。登录注册这块的数据验证工作laravel已经自动帮我们处理好了。所以如果填写的数据不正确,模板中就可以直接使用$errors这个变量,从里面拿到错误信息。

整个代码的意思是说,如果$errors中里面有email的错误信息,那就把一个叫做has-errorclass添加到这里来。否则啊,如果没有错误,那就是空了,也就是不添加任何的class

first

 @if ($errors->has('email'))
    <span class="help-block">
        <strong>{{ $errors->first('email') }}</strong>
    </span>
@endif

再来看这一段代码,他意思和上面也是相同的,判断有没有email的错误信息。有的话,就通过$errors->first('email')拿到第一个错误的信息。这里写first,是因为email可能会有好几个错误信息,例如没有填写,格式不正确,长度超出了等等,但这里就只找到并显示第一个错误信息就好了。

old

<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

表单中,这里有一个old('email')old的意思,就是上一次填写的数据。这行代码的作用是,如果数据填写的有问题,比方说填写一个错误的邮箱,点击提交,那么页面会刷新的。但是可以看到上一次填错的邮箱依然会显示在页面中。如果这里不放这个old('email'),重新再来提交一下,那之前用户填写的邮箱地址,就都不见了。

这些都理解清楚了以后,我们就要开始把自己写好的静态页面,集成过来了。
这个集成过来的步骤一点都不难,就是比较繁琐,这里时间有限,我就直接提供集成好的代码,大家拿去用就好了。

注册模板

@extends('layouts.app')

@section('content')
    <div class="detail">
        <div class="am-g am-container">
            <div class="am-u-lg-12">
                <h1 class="detail-h1">Sign Up</h1>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">

            <form method="post" class="am-form" action="{{ route('register') }}">
                {{ csrf_field() }}

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('name') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="name">用户名: </label>
                    <input type="text" id="name" class="am-form-field" placeholder="输入你的用户名" name="name" value="{{ old('name') }}">

                    @if ($errors->has('name'))
                        <span class="am-icon-warning">{{$errors->first('name')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('email') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="email">邮箱: </label>
                    <input type="text" id="email" name="email" class="am-form-field" placeholder="输入你的邮箱"  value="{{ old('email') }}">

                    @if ($errors->has('email'))
                        <span class="am-icon-warning">{{$errors->first('email')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('password') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="password">密码: </label>
                    <input type="password" name="password" id="password" class="am-form-field" placeholder="输入你的密码">
                    @if ($errors->has('password'))
                        <span class="am-icon-warning">{{$errors->first('password')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback">
                    <label class="am-form-label" for="password_confirmation">重复密码: </label>
                    <input type="password" name="password_confirmation" id="password_confirmation" class="am-form-field"
                           placeholder="请重新输入你的密码">
                </div>

                <hr>
                <div class="am-cf">
                    <input type="submit" value="Sign Up" class="am-btn am-btn-primary am-btn-sm am-fl">
                    <a href="{{ route('login') }}" class="am-btn am-btn-default am-btn-sm am-fr">Already Has Account ^_^?</a>
                </div>
            </form>
            <br>
        </div>
    </div>
@endsection

登录模板

@extends('layouts.app')

@section('content')
    <div class="detail">
        <div class="am-g am-container">
            <div class="am-u-lg-12">
                <h1 class="detail-h1">Login</h1>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">

            <form method="post" class="am-form" action="{{ route('login') }}">
                {{ csrf_field() }}

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('email') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="email">邮箱: </label>
                    <input type="text" id="email" name="email" value="{{old('email')}}" class="am-form-field" placeholder="输入你的邮箱">

                    @if ($errors->has('email'))
                        <span class="am-icon-warning">{{$errors->first('email')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('password') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="password">密码: </label>
                    <input type="password" name="password" id="password" class="am-form-field" placeholder="输入你的密码">

                    @if ($errors->has('password'))
                        <span class="am-icon-warning">{{$errors->first('password')}}</span>
                    @endif
                </div>

                <div class="am-form-group am-form-icon am-form-feedback {{ $errors->has('captcha') ? ' am-form-error' : '' }}">
                    <label class="am-form-label" for="captcha">验证码: </label>

                    <div class="am-g doc-am-g">
                        <div class="am-u-sm-9">
                            <input type="text" name="captcha" id="captcha" class="am-form-field" placeholder="输入你的验证码">

                            @if ($errors->has('captcha'))
                                <span class="am-icon-warning">{{$errors->first('captcha')}}</span>
                            @endif
                        </div>
                        <div class="am-u-sm-3">
                            <img src="assets/img/captcha.png" alt="" style="cursor: pointer;">
                        </div>
                    </div>
                </div>

                <label for="remember-m e">
                    <input id="remember-me" type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                    记住密码
                </label>
                <br>

                <hr>
                <div class="am-cf">
                    <input type="submit" name="" value="Login" class="am-btn am-btn-secondary am-btn-sm am-fl">
                    <a href="{{ route('password.request') }}" class="am-btn am-btn-default am-btn-sm am-fr">Forget
                        Password ^_^?</a>
                </div>
            </form>
            <br>
        </div>
    </div>
@endsection

现在整个登录注册表单的风格就与项目整体一致了。