非webpack项目使用vee-validate进行校验

最新推荐文章于 2023-08-05 16:29:04 发布
最新推荐文章于 2023-08-05 16:29:04 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： vueJs 文章标签： 非webpack vee-validate 中文 自定义 校验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy111/article/details/79046500
版权

由于当前项目使用的是基于jQuery的前端结构，尝试在新增需求中使用VUE2，对于表单验证使用vee-validate。

当前基于webpack项目，使用npm引入的样例比较多。

目前在普通页面中使用的经验进行积累，以供参考，为了考虑系统兼容性，项目中暂时没有使用ES6的写法。

官网地址：http://vee-validate.logaretm.com/

1、引入vue2后，需要添加vee-validata的js和语言包文件(目前只用中文)


2、页面html代码，具体的样式用class修饰即可


3、js使用方式，指定语言、修改默认提示，添加自定义验证


4、测试结果



ESTAD
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
非webpack下的asp.net模式vue和vee-validate表单输入验证
07-15
无需安装与微软尚未很好兼容的webpack，在vs2015下的asp.net中使用vue和vee-validate进行表单输入有效性验证
vee-validate 表单校验
u014105655的博客
11-07 229
vee-validate 表单校验
VeeValidate——vue2.0表单验证插件
anmi3721的博客
06-29 635
一、vee-validate入门 　　vee-validate 是一个轻量级的 vue表单验证插件。它有很多开箱即用的验证规则，也支持自定义验证规则。它是基于模板的，因此它与HTML5验证API类似且熟悉。可以验证HTML5输入以及自定义Vue组件。 　　项目地址：vee-validate 　　官方文档：VeeValidate 1、安装 # NPM安装 $ npm ins...
vee-validate-简单的Vue.js输入验证插件。-Vue.js开发
05-27
vee-validate是Vue.js的基于模板的验证框架，使您可以验证输入并显示错误。 基于模板，您仅vee-validate是Vue.js的基于模板的验证框架，该框架可让您验证输入并显示错误。 基于模板，您只需要为每个输入指定值更改时应使用哪种验证器。 系统会在支持40多种语言环境的情况下自动生成错误。 开箱即用的规则很多。 该插件的灵感来自PHP Framework Laravel的验证。 特点基于模板的验证既熟悉又易于设置。
vee-validate表单验证（自定义验证规则）
m0_48799309的博客
08-05 471
① v-validate="{required:true,phone:true}"或者v-validate="'required|phone'" 里的required和phone都是上面写过的规则。这里的文件设计思路是：把自定义的部分作为一个单独的文件（src\utils\validate.js）去整理，需要的正则是另一个文件（src\utils\reg.js）3.在你需要使用的文件中做基础配置（src\utils\validate.js）1.首先要在main.js中导入，以确保你能在这个项目中使用它。
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
html-validate-webpack-plugin:用于webpackHTML-validate.org插件
05-23
安装npm install html-validate-webpack-plugin --save-dev 注意：安装html-validate并使用您的在项目根目录下创建.htmlvalidate.json 。 npm install html-validate --save-dev用法在您的webpack配置中（开发版本）...
webpack-使用webpack-dev-middleware.rar
04-12
使用webpack-dev-middleware:最简单使用webpack-dev-middleware，避免被其他是技术干扰，迅速的理解原理。
webpack-deadcode-plugin：Webpack插件，用于检测未使用的文件和已使用文件中的未使用导出
02-06
Webpack Deadcode插件Webpack插件可检测未使用的文件和已使用文件中的未使用导出安装通过npm： $ npm install webpack-deadcode-plugin --save-dev 通过纱： $ yarn add -D webpack-deadcode-plugin用法该插件将向您...
vee-validate 验证框架
06-22
validate 非常强大的js验证框架 验证 js Validate js验证
vue中使用vee-validate
11-20
vee-validate的如何引入和如何使用，以及如何自定义自己的规则等等
vee-validate vue 2.0自定义表单验证的实例
10-18
今天小编就为大家分享一篇vee-validate vue 2.0自定义表单验证的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VeeValidate--validate vue forms
tutorzhu的博客
03-14 256
VeeValidatie的使用示例
vee-validate的使用
CSDN_zhhjgy的博客
04-25 412
1.关于vee-validate配置中文 2.vee-validate在项目中的使用 main.js中 // 全局配置 import VeeValidate from 'vee-validate' import zh_CN from 'vee-validate/dist/locale/zh_CN' // 要安装中文包 import VueI18n from 'vue-i18n' // 要安装...
Vue 插件 vee-validate校验插件详解大全
半夏_2021的博客
04-20 9685
vee-validate 校验插件详解
vue插件=============》vee-validate
houdabiao的博客
03-02 815
一.  <script></script>引入的步骤1.可以npm在命令行里输入npm install vee-validate --save 下载到一个文件夹里面<script src="vee-validate.js"></script><script src="zh_CN.js"></script&gt
vee-validate 表单验证用法 主要用于移动端、ipad端使用
Jerry Man的博客
08-10 375
vee-validate 表单验证 vee-validate vee-validate 一个轻量级的 vue表单验证插件。 使用教程： 1 安装： npm install vee-validate --save 2 使用 中文提示(按照教程捣鼓了，不行，自己摸索的写法。) main.js 添加 import Vue from 'vue' import VeeValidate, {Validator} from 'vee-validate'; import zh from 'vee-validate/di
Vue - 表单验证
技术共享，共同进步！
03-05 513
<template> <div> <!-- 登录表单 --> <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" > <!-- 用户名 --> ...
vee-validate插件的使用
HANGSOME123的博客
04-22 292
1.npm install vee-validate 2.在main.js里面进行挂载import validate from './Validate'; 3.定义一个配置的相关js文件 import Vue from 'vue' import VeeValidate, { Validator } from 'vee-validate' import zh from 'vee-valid...
webpack webpack-cli webpack-dev-server配置
最新发布
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值