antd 验证 动态 required_3分钟短文:十年窖藏,Laravel告诉你表单验证的正确姿势

引言

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

8443c8f8d040cd512dd0c48daf82387c.png

本文教你正确地验证用户表单提交的数据,那就是十余年坚定好用的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 用于标记那些可以写入数据的字段了,但是仍然不够。 仅指定字段可以写入,但是写什么值没有过滤,是不是缺了一大块。

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

追加验证

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

1b69de0bff26639e2940cb37094ad850.png

其中 $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'

视图模板显示错误信息

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

   @if ($errors->any())        
                           @foreach ($errors->all() as $error)                    {{ $error }}                @endforeach                    
   @endif    @yield('content')

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

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

cf5b047080e87f5df7db916ca1d09403.png

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

自定义错误提示信息

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

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

代码如下:

b5247bf7fc58aee685af72c3d61fc1a0.png

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

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

写在最后

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

Happy coding :-)

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在React项目中使用Ant Design的Table组件动态生成表头,需要完成以下步骤: 1. 定义表格数据源 首先需要定义表格的数据源,可以使用一个数组来存储表格的数据,例如: ```javascript const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; ``` 2. 定义表头数据源 接下来需要定义表头的数据源,可以使用一个数组来存储表头的数据,例如: ```javascript const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; ``` 3. 动态生成表头 在Ant Design的Table组件中,可以使用columns属性来指定表头数据源。为了动态生成表头,需要在渲染组件时动态生成表头的数据源,并将其传递给Table组件的columns属性,例如: ```javascript import React, { useState } from 'react'; import { Table } from 'antd'; const DynamicTable = () => { const [columns, setColumns] = useState([ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]); const handleAddColumn = () => { const newColumn = { title: `Column ${columns.length + 1}`, dataIndex: `column${columns.length + 1}`, key: `column${columns.length + 1}`, }; setColumns([...columns, newColumn]); }; return ( <> <button onClick={handleAddColumn}>Add Column</button> <Table dataSource={data} columns={columns} /> </> ); }; export default DynamicTable; ``` 在上面的代码中,我们使用useState钩子来定义表头的数据源,并渲染一个添加列的按钮。当点击添加列按钮时,会动态生成一个新的列,并将其添加到表头的数据源中。这样就可以动态生成表头了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值