1. 本际云推荐 - 专业推荐VPS、服务器,IDC点评首页
  2. 云主机运维
  3. VPS运维

解析vue表单验证rules及validator验证器的使用方法

介绍

你好,我是本际云服务器推荐网的小编小本本。今天我们要讲的是Element中Form组件的表单验证功能。

解析vue表单验证rules及validator验证器的使用方法

表单验证rules

表单验证只需要在Form组件中通过rules属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名即可。需要注意的是,prop对应表单域model字段,使用validate方法时,该属性是必填的。

我们可以以官网给出的例子来分析。首先,将prop属性设置为需校验的字段名。然后,在data里配置要校验字段和校验规则:

  • required:true表示为必须输入;
  • message:””设置不符合校验规则时的提示信息;
  • trigger:””设置校验的触发方式:
    • ‘change’:数据改变时触发;
    • ‘blur’:失去焦点时触发;
  • 没有进行任何输入时,不会触发change,但一定会触发blur事件。

设置校验规则后,表头会出现红色*

原创文章,作者:小编小本本,如若转载,请注明出处:https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7167.html