来聊一聊前端的表单验证

2018-06-28 12:07:57 +08:00
 hitaoguo

现在我见到的流行的表单验证,大多都是自己写 message 的,比如 { required:true,message:'请输入 xxx'}。 写少点无所谓,但是字段多了之后就会觉得重复。

而我见过 yii 框架(php 的一个框架)的表单验证,它的 rules 是这样写的

public function rules()
{
    return [
        // name, email, subject 和 body 属性必须有值
        [['name', 'email', 'subject', 'body'], 'required'],

        // email 属性必须是一个有效的电子邮箱地址
        ['email', 'email'],
    ];
}

指定一个验证器类型,指定要验证的表单字段,然后就开始验证。

每个验证器,它的 message 格式都是一样的,只不过就是 attribute 不一样而已,比如上面可能会这样报错 name 不能为空

那可能你还想让‘ name ’显示成‘姓名’,那么你只需要再写好一个 labels

public function attributeLabels()
{
    return [
        'name' => '姓名',
        'email' => '邮箱',
    ];
}

这样验证结果就是‘姓名不能为空’,不觉得这样就很轻松吗?

再自由点,你也可以传入一个 message

[['name', 'email', 'subject', 'body'], 'required', ['message' => '爱咋咋地']],

更自由点,你可以自己定义验证逻辑,传个函数即可。(代码不贴了)

2835 次点击
所在节点    程序员
9 条回复
azh7138m
2018-06-28 12:42:44 +08:00
就算是拿开源的讲
https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99

楼主是不是对前端有啥误解
agagega
2018-06-28 12:54:21 +08:00
不说前端,楼主可以看看 Rails 的 Validation
m939594960
2018-06-28 13:34:47 +08:00
哈哈,你可以看下 laravel 的表单验证,而且 laravel 的规则可以通过插件直接对前端使用。
wxsm
2018-06-28 14:24:58 +08:00
你大可以封装一个自己的 message factory 啊,我也没觉得有多“不轻松”
hitaoguo
2018-06-28 14:51:58 +08:00
@azh7138m 误解?没有啊,只是觉得这样的设计不是很好用。
hitaoguo
2018-06-28 14:56:13 +08:00
@wxsm 编码习惯不同吧
chinvo
2018-06-28 15:00:55 +08:00
jQuery.Validation
hitaoguo
2018-06-28 15:00:57 +08:00
@m939594960 挺简便的,不错
hitaoguo
2018-06-28 15:03:10 +08:00
@agagega 对这个语法不熟悉,不好评价。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/466537

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX