V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
hitaoguo
V2EX  ›  程序员

来聊一聊前端的表单验证

  •  
  •   hitaoguo · 2018-06-28 12:07:57 +08:00 · 2835 次点击
    这是一个创建于 2369 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在我见到的流行的表单验证,大多都是自己写 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' => '爱咋咋地']],
    

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

    9 条回复    2018-06-28 15:03:10 +08:00
    azh7138m
        1
    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
        2
    agagega  
       2018-06-28 12:54:21 +08:00
    不说前端,楼主可以看看 Rails 的 Validation
    m939594960
        3
    m939594960  
       2018-06-28 13:34:47 +08:00
    哈哈,你可以看下 laravel 的表单验证,而且 laravel 的规则可以通过插件直接对前端使用。
    wxsm
        4
    wxsm  
       2018-06-28 14:24:58 +08:00
    你大可以封装一个自己的 message factory 啊,我也没觉得有多“不轻松”
    hitaoguo
        5
    hitaoguo  
    OP
       2018-06-28 14:51:58 +08:00
    @azh7138m 误解?没有啊,只是觉得这样的设计不是很好用。
    hitaoguo
        6
    hitaoguo  
    OP
       2018-06-28 14:56:13 +08:00
    @wxsm 编码习惯不同吧
    chinvo
        7
    chinvo  
       2018-06-28 15:00:55 +08:00
    jQuery.Validation
    hitaoguo
        8
    hitaoguo  
    OP
       2018-06-28 15:00:57 +08:00
    @m939594960 挺简便的,不错
    hitaoguo
        9
    hitaoguo  
    OP
       2018-06-28 15:03:10 +08:00
    @agagega 对这个语法不熟悉,不好评价。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1145 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 23:41 · PVG 07:41 · LAX 15:41 · JFK 18:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.