表单验证的两种方法,以及验证失败时的数据保持

10970次阅读 452人点赞 作者: WuBin 发布时间: 2021-07-28 16:24:21
扫码到手机查看

控制器验证$this->validate

基本使用

整个流程:如果没验证通过,那么框架会抛出一个异常,会被自动捕获,并重定向至用户的上一个页面,错误信息会存到session中,并自动将他们绑定于所有视图中,在视图中直接使用$errors数组判断即可,接下来我们来慢慢演示。

在控制器中,使用$this,指向的是当前的控制器。我们先来看HTML

<input type="text" name="Student[name]" placeholder="请输入学生姓名">
<input type="text" name="Student[age]" placeholder="请输入学生年龄">

<input type="radio" name="Student[sex]" value="10">男
<input type="radio" name="Student[sex]" value="30"> 女

然后我们在控制器app/Http/Controllers/StudentController.php中:

use Illuminate\Http\Request;
class StudentController extends Controller
{
    public function create(Request $request)
    {
        // $this指的是当前控制器 是StudentController
        $this->validate($request, [
            'Student.name' => 'required|min: 2|max:20',
            'Student.age' => 'required|integer',
            'Student.sex' => 'required|integer',
        ]
    }
}

注意$this->validate传入的第一个参数是$request。第二个参数传入每个input字段对应的验证规则,这里使用了数组input name="Student[name]", 所以要使用Student.name。如果是一个一维数组,那么:

$this->validate($request, [
            'name' => 'required|min: 2|max:20',
            'age' => 'required|integer',
            'sex' => 'required|integer',
];
  • required:代表必填
  • min: 最少的字符串长度
  • integer:必须为整型
  • max: 最大字符串长度
  • 多个规则用“|”进行分割

这样使用,在验证时,页面呈现出来的提示均是默认的英文提示,如果想要自定义提示,该怎么办呢?

自定义验证规则的提示

这个时候就需要提供第三个参数【类型是一个数组】

$this->validate($request, [
    'Student.name' => 'required|min: 2|max:20',
    'Student.age' => 'required|integer',
    'Student.sex' => 'required|integer',
], [
    // 第三个参数修改验证字段对应的提示信息
    'required' => ':attribute 为必填项',
    'min' => ':attribute 长度不符合要求',
    'integer' => ':attribute 必须为整数'
])

其中:attribute是一个占位符,指向对应的属性。如果有如有有第四个参数就是属性对应的文字(下方进行展示)。这时候未通过提示结果为:

由此可见,:attribute对应的就是第二个参数中的Student.name。

自定义字段名

自定义字段名,就需要传入第四个参数【参数类型也为数组】

$this->validate($request, [
    'Student.name' => 'required|min: 2|max:20',
    'Student.age' => 'required|integer',
    'Student.sex' => 'required|integer',
], [
    // 第三个参数修改验证字段对应的提示信息
    'required' => ':attribute 为必填项',
    'min' => ':attribute 长度不符合要求',
    'integer' => ':attribute 必须为整数'
], [
    // 第四个参数修改字段Student.name对应的名称
    'Student.name' => '姓名',
    'Student.age' => '年龄',
    'Student.sex' => '性别'
]);

这时候,提交验证不通过的时候,提示:

使用Validator验证类

Validator类验证,与控制器验证基本相同,除了第一个参数穿入$request->input()与控制器验证不同外, 之后传入的参数与控制器验证参数相同:

$validator = \Validator::make($request->input(),[
    'Student.name' => 'required|min: 2|max:20',
    'Student.age' => 'required|integer',
    'Student.sex' => 'required|integer',
], [
    // 第三个参数修改验证字段对应的提示信息
    'required' => ':attribute 为必填项',
    'min' => ':attribute 长度不符合要求',
    'integer' => ':attribute 必须为整数'
], [
    // 第四个参数修改字段Student.name对应的名称
    'Student.name' => '姓名',
    'Student.age' => '年龄',
    'Student.sex' => '性别'
]);
注意:\Validator::make()前要加一个斜杠“\”

这个验证与控制器验证不同,不能自动重定向并绑定错误,需要手动判断验证是否成功:

// 如果验证有错误
if ($validator->fails()) {
    // 手动重定向 返回上一页,它不会自动注册错误信息,需要手动注册
    // 使用->withErrors($validator)并传入$validator类
    return redirect()->back()->withErrors($validator);
}
  • 如果要在视图模板中显示报错的信息,需要使用方法:->withErrors($validator),只要传入$validator验证类即可;
  • 使用$validator->fails()判断是否通过验证。

将抛出的错误渲染到视图

我们先来看错误视图模板resources/views/common/validator.blade.php:

@if(count($errors))
    <div class="alert alert-danger">
        <ul>
            {{--单独取出第一条--}}
            <li>
                {{ $errors->first() }}
            </li>
            {{--    $errors->all()即可调用他所有的错误        --}}
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
  • 通过控制器验证抛出的错误,是会自动存在session中,并可以在所有视图文件中通过$errors->all()遍历访问到;
  • 通过Validator验证类抛出的错误,必须要在控制器中执行->withErrors(返回的验证类)绑定到临时的session数据中。

关于抛出的错误$errors

  • 可以通过count($errors)来判断其中是否有数据,来决定是否需要渲染错误;
  • $errors->all()即可调用他其中所有的错误;
  • $errors->first() 可以取出错误中的第一条;
  • $errors->first('Student.name') 可以指定要掉出谁的错误信息,比如:
<div class="col-sm-5">
    <input type="text" name="Student[name]" placeholder="请输入学生姓名">
</div>
<div class="col-sm-5">
    <p class="form-control-static text-danger">
        {{--$errors->first指定要调谁的错误信息--}}
        {{ $errors->first('Student.name') }}
    </p>
</div>

当验证没通过,返回时保留之前的输入信息

以Validator验证类为例:

if ($validator->fails()) {
    // 手动重定向 返回上一页,它不会自动注册错误信息,需要手动注册
    // 使用->withErrors($validator)并传入$validator类
    // ->withInput()当验证不成功的时候数据保持,原来输入框中内容依然存在
    return redirect()->back()->withErrors($validator)->withInput();
}

使用->withInput()方法,然后在模板视图中:

<input type="text" id="name"
       name="Student[name]"
       value="{{ old ('Student')['name'] }}"
       placeholder="请输入学生姓名"
>

但是这样写会出现报错:

Trying to access array offset on value of type null,数组找不到name属性。

这时我们就需要使用isset进行一下判断了:

<input type="text" name="Student[name]"
       value="{{ isset(old ('Student')['name']) ? old ('Student')['name'] : '' }}"
       placeholder="请输入学生姓名"
>

<input type="text" name="Student[age]" 
       value="{{ isset(old ('Student')['age']) ? old ('Student')['age'] : '' }}"
       placeholder="请输入学生年龄"

这样写就会在验证失败的时候重定向回原来的页面,同时也保存之前输入的数据内容了。如下:

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:validate
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    9119次阅读 589人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3884次阅读 289人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    14139次阅读 919人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12947次阅读 445人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    11539次阅读 926人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    15646次阅读 1248人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14843次阅读 1209人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    29040次阅读 2281人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    25064次阅读 1931人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录