3分钟短文:十年窖藏,Laravel告诉你表单验证的“正确姿势”

简介: 验证器,陈酿的!

引言

上一章我讲到了使用FormBuilder让后端开发者快速构建前端表单页面,而为了示例,
直接在store方法内把表单数据一股脑存到了数据库。
这!很!危!险!

img

本文教你正确地验证用户表单提交的数据,那就是十余年坚定好用的Laravel验证器。

往期回顾

开始之初,我把上一节代码再贴出来,看一看原始的模样:

public function store(Request $request)
{
    $event = Event::create([$request->input()]);
    flash('Event created!')->success();
    return redirect()->route('events.show')->with('event', $event);
}

你看,那一句 Event::create([$request->input()]) 就是妥妥的懒人方法。把Request请求的表单数据原封不动地传入到create方法内,
并写入了数据库。

当然,在Event模型内,我已经加上 $fillable 用于标记那些可以写入数据的字段了,但是仍然不够。
仅指定字段可以写入,但是写什么值没有过滤,是不是缺了一大块。

用户的输入从来都不能直接拿来用,我要做一个关卡,层层把关,有效的数据放进去,无效的数据挡在门外。

追加验证

在上面的代码内再添加一些代码:

pic

其中 $request->validate() 方法是实例化了一个 Validator 对象,并默认使用 $request->input() 所有的输入数据作为验证对象。
重要的是那些验证规则,我来逐一为你解读。验证规则内使用的都是laravel内置写好了的规则,拿来即用。

首先是对字段 name 的验证,要求必填,且是字符串类型,最短要求10个字符,最长50个字符:

'name' => 'required|string|min:10|max:50',

然后是 max_attendees 字段,要求必填,必须是整型,数位2-5个之间。也就是 10-99999 之间的数字。

'max_attendees' => 'required|integer|digits_between:2,5',

字段 description 的验证没有那么多,仅要求必填,要求是字符串:

'description' => 'required|string'

视图模板显示错误信息

有了验证规则之后,我们需要承载验证失败的那些错误提示信息。因为错误信息是全局通用的,
所以为了全局生效,修改视图模板文件,追加以下内容:

<div class="container">
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @yield('content')
</div>

其中 $errors 对象包含了所有的表单验证错误的提示信息。这样,在所有使用了该模板的视图内,
都会继承错误提示信息。简直是“一次编写,处处能用”

为了检查是不是表单验证生效了,你可以直接在空白表单,点击“提交”按钮,输出内容大致如下:

pic

红色警告部分,就是视图模板文件里 $errors 发挥作用了。

自定义错误提示信息

错误提示信息,是laravel内置验证规则给定的,如果你觉得提示信息不够详尽,不太满意,自己写也是没问题的。
我把上面的验证规则重写一下。

不准备使用 $request->validate() 方法了,直接用 Validator 对象构造验证,效果一模一样。

代码如下:

pic

最特殊的是 required 验证规则内的 :attribute 占位符了。这个是一个占位符用于在某个字段调用此验证规则是,
传入字符名。

至于为啥这么写?Validator就是这样设计的!

写在最后

本文初步介绍了laravel验证器内置规则的使用,以及如何将验证信息渲染到视图文件内。
并介绍了自定义验证错误提示信息的使用方法。

Happy coding :-)

我是@程序员小助手,专注编程知识,圈子动态的IT领域原创作者

相关文章
|
3月前
|
存储 前端开发 JavaScript
Web前端的奇幻之旅:探索JS数据类型的奥秘与差异
【8月更文挑战第23天】JavaScript是一种动态类型语言,提供多种内置数据类型支持信息的存储与操作。这些类型对Web前端开发者至关重要,直接影响代码性能与可读性。JavaScript数据类型主要分为两大类:原始数据类型(如Undefined、Null、Boolean等)与引用数据类型(如Object、Array等)。原始类型直接存储值,而引用类型存储指向数据的引用。原始类型不可变且存储在栈中,访问更快;引用类型则存储在堆中,可通过其引用进行修改。理解这些差异有助于编写高效、可维护的代码。
42 0
|
3月前
|
JavaScript UED 前端开发
JSF 富文本编辑器横空出世,如魔法神器开启震撼富文本输入之旅!
【8月更文挑战第31天】在现代Web应用中,用户常需输入带样式、颜色及图片等功能的富文本。为此,JSF可集成如CKEditor等富文本编辑器,提供强大输入体验。首先选择合适编辑器并下载引入库文件,使用`&lt;textarea&gt;`与JavaScript实例化编辑器。后台通过`value`属性获取内容。此外,还需配置编辑器选项、处理特殊字符和进行充分测试以确保稳定性和安全性,提升用户体验。
35 0
|
6月前
|
资源调度 JavaScript 开发者
【热门话题】ElementUI 快速入门指南
ElementUI 是基于 Vue 2.0 的桌面端组件库,提供丰富的 UI 组件,助力快速构建美观应用。本文为初学者提供快速入门教程:确保安装 Node.js 和 Vue CLI,使用 Vue CLI 创建项目,通过 `npm` 或 `yarn` 安装 ElementUI。在 `main.js` 引入并使用,直接在组件中使用按钮、表单、表格和对话框等组件。此外,还介绍了自定义主题的方法。深入了解官方文档和社区资源,提升开发效率。开始愉快地使用 ElementUI 吧!
78 2
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js的荆州理工职业学院网站附带文章和源代码设计说明文档ppt
基于ssm+vue.js的荆州理工职业学院网站附带文章和源代码设计说明文档ppt
23 0
|
机器学习/深度学习 人工智能 自然语言处理
用二十段话介绍下ChatGPT
用二十段话介绍下ChatGPT
|
前端开发
前端知识学习案例-GraphQl速览
前端知识学习案例-GraphQl速览
51 0
前端知识学习案例-GraphQl速览
|
JavaScript 前端开发 API
技术分享 | Web测试方法与技术之JavaScript 讲解
技术分享 | Web测试方法与技术之JavaScript 讲解
|
JavaScript 前端开发 API
技术分享 | Web测试方法与技术之JavaScript 讲解
技术分享 | Web测试方法与技术之JavaScript 讲解