laravel5.5 vee-validate适配vue的表单检查插件

墨蓝 2022-05-21 13:44 129阅读 0赞

*   *   *  场景
         *  分析
         *  例子
         *  安装
         *  用法

### 场景 ###

. 使用vue开发表单组件的时候，肯定会遇到表单元素检查的功能; 需要提供实时的检查 && 提示

### 分析 ###

> baianat/vee-validate(github)
> 
> > 支持语言的本地化  
> > 实时提供字段提示

### 例子 ###

<span v-show="errors.has('body')">{
       { errors.first('body') }}</span> <textarea class="form-control" placeholder="私信内容" rows="3" data-vv-as="私信内容" data-vv-name="body" v-validate.initial="'required'" v-model="body" v-if="!success_status"></textarea>

### 安装 ###

> 引入laravel5.5
> 
> > npm install vee-validate —save-dev  
> > 修改 `resources/assets/js/app.js`
> > 
> > >     import VeeValidate,{ Validator } from 'vee-validate';
> > >     // 组件内地化
> > >     Validator.localize('zh', zh);
> > >     Vue.use(VeeValidate);

### 用法 ###

> 用法很简单
> 
> > 规则限定
> > 
> > > data-vv-name=”body” `必选参数` 声明表单元素的名字  
> > > v-validate.initial=“‘required|email’” `必选参数` 声明使用的规则  
> > > data-vv-as=”私信内容 `可选参数` 字段提示的别称  
> > > 提示展示  
> > > `<span v-show="errors.has('body')">{ { errors.first('body') }}</span>`

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 166 阅读

相关 vue 移动端适配

这里我写一下我自己用的vue 移动端适配，可能跟别人的不一样。但是效果是一样的。我是安装 amfe-flexible npm i -S amfe-fle

快来打我*/ 2023年06月26日 10:42/ 0 赞/ 1 阅读

相关 vue移动端适配

如果不想转化成rem单位，可以把px写成大写的PX，就可以是px单位了哦 1、安装插件 npm i lib-flexible --save // 载l

￡神魔★判官ぃ/ 2022年12月20日 15:59/ 0 赞/ 206 阅读

相关 2021适配Vue3 的 UI 组件库

1. Element UI ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

柔情只为你懂/ 2022年10月07日 14:50/ 0 赞/ 175 阅读

相关 vue项目单位适配

main.js中引入rem.js import '/src/rem.js' rem.js // 设置 rem 函数 const setRem =

旧城等待，/ 2022年09月10日 14:26/ 0 赞/ 141 阅读

相关 Android适配（屏幕适配、国际化适配）

首先来说一下Android的屏幕适配：　　关于Android屏幕的一些基本概念知识，自行充电。。在此只介绍实际开发过程中的使用　　1、说到Android的屏幕适配，

男娘i/ 2022年08月06日 09:16/ 0 赞/ 400 阅读

相关 laravel5.5 vee-validate适配vue的表单检查插件

场景分析例子安装用法场景 . 使用vue开发

墨蓝/ 2022年05月21日 13:44/ 0 赞/ 130 阅读

相关 vue h5适配

vue h5适配(px自动转rem) 最近公司接手一个H5项目，重构后一直说我的页面有问题，后来发现前期公司搭建项目时没有做适配，后来通过查找资料，找到了一套如何将px自

- 日理万妓/ 2021年10月19日 10:24/ 0 赞/ 332 阅读

相关关于Vue 移动端适配（px2rem 插件将px转为rem）

一、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import 'l

小灰灰/ 2021年09月29日 14:16/ 0 赞/ 381 阅读

相关 vue 歌词适配

1、显示当前播放歌词 (1)将请求来的歌词资源中的时间点全存进数组里 (2)配合循环指令,遍历请求来的资源,将当前播放资源的当前播放时间和资源中播放

我不是女神ヾ/ 2021年07月24日 15:42/ 0 赞/ 434 阅读