直接在页面引用vee-validate

源文件下载地址:http://www.bootcdn.cn/vee-validate/

官方api https://baianat.github.io/vee-validate/guide/rules.html#is-not

       .is-danger {
border: 1px solid red;
}
.is-danger>span{//默认none,防止初始化时显示{{error信息}}
display: block;
}

注:vee-validate支持对象表示方法,支持动态取消校验:

v-validate="{
required: !(brandBaseItem && brandBaseItem.logoName),//作为动态校验规则
image: true,
size: 300,
ext: ['png', 'jpeg', 'jpg', 'bmp']}"

https://segmentfault.com/q/1010000013117209

 <script th:src="@{/js/vee-validate/vee-validate.min.js}"></script>
<script th:src="@{/js/vee-validate/vee-zh_CN.js}"></script>
<input v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }" name="phone" type="text" placeholder="phone" />
<br/>
<span v-show="errors.has('phone')" style="display:none;color: red;font-size: 12px;">{{ errors.first('phone') }}</span> <br/> <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="email" /> <br/> <span v-show="errors.has('email')" style="color: red;font-size: 12px;">{{ errors.first('email') }}</span>
<script th:inline="javascript">
/*<![CDATA[*/
//引入vue后,需要添加vee-validata的js和语言包文件(目前只用中文)
 VeeValidate.Validator.localize('zh_CN');
//js使用方式,指定语言、修改默认提示,添加自定义验证
VeeValidate.Validator.localize({
zh_CN:{
messages:{
required:function (name) {
return name+"不能为空!";
},
email:function () {
return "邮箱格式无效"
},
},//定义成我们需要的文字提示
attributes:{
email:'邮箱',
phone: '手机',
},
}
 }); VeeValidate.Validator.extend('phone',{ getMessage:function () { return "请输入正确手机号!"; }, validate:function (value) { return /^1\d{10}$/.test(value); } }); Vue.use(VeeValidate);
var vue = new Vue({
el: "#test",
data: {
submitDisabled: true,
ruleForm: {
…………代码省

直接引用vee-validate校验插件的更多相关文章

  1. 2.12 学习总结 之 表单校验插件validate

    一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...

  2. 开源后端数据校验插件Validate.Net,类似Validate.js

    介绍 Validate.Net将Validate.js移植到.Net平台,可以更方便.更快捷的校验实体内属性值是否合法.内置多种常规数据校验规则(校验必填.校验字符串长度区间.校验最大最小值.校验值区 ...

  3. 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  4. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  5. 编写自己的validate校验框架原理(转)

    原文链接:http://blog.csdn.net/a973893384/article/details/51517388 具体思路: 我们使用自定义注解实现.然后需要解决的是两个问题: 1是如何扫描 ...

  6. jquery.validate.js插件的使用方法

    近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

  7. 表单校验插件(bootstrap-validator)

    表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...

  8. Sublime Text3的react代码校验插件

    之前写前端一直用的是jshint做语法检查,但jshint不支持JSX语法,为了在React使用,需要用eslint代替它.六月份的时候为了写React Native,编辑器换过Webstorm和VS ...

  9. JQuery 表单校验插件 validate 使用纪录

    JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...

随机推荐

  1. Python-mysql 权限 pymysql 注入共计

    1.mysql用户管理 *** 数据安全非常重要 不可能随便分配root账户 应该按照不同开发岗位分配不同的账户和权限 mysql中 将于用户相关的数据放在mysql库 user - > db ...

  2. python与用户交互、数据类型

    一.与用户交互 1.什么是用户交互: 程序等待用户输入一些数据,程序执行完毕反馈信息. 2.如何使用 在python3中使用input,input会将用户输入的如何内容存为字符串:在python中分为 ...

  3. Android应用开发中三种常见的图片压缩方法

    Android应用开发中三种常见的图片压缩方法,分别是:质量压缩法.比例压缩法(根据路径获取图片并压缩)和比例压缩法(根据Bitmap图片压缩). 一.质量压缩法 private Bitmap com ...

  4. 什么是java序列化,如何实现java 序列化?

    序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化. 可以对流化后的对象进行读写操作,也可将流化后的对象传输于网络之间.序列化是为了解决在对对象流进行读写操作时所引发的问题.  ...

  5. Oracle imp exp 导入导出 执行脚本

    一:用命令 imp/exp 的方式进行数据的导入和导出 一:文件后缀名: 二:oracle  导出 exp 命令 echo 开始备份数据库 if not exist D:\oracle_bak\fil ...

  6. Confluence 6 垃圾收集性能问题

    这个文章与 Oracle 的 Hotspot JVM 虚拟机的内存管理为参照的.这些建议是我们在对大的 Confluence 安装实例用户进行咨询服务的时候得到的最佳配置方案. 请不要在 Conflu ...

  7. Confluence 6 启用主题评论

    页面或者博客页面中显示的评论以下面 2 种方式显示: 主题模式(Threaded):以继承回复的方式显示页面的评论.每一回复的评论将会在不同评论之间显示,以表示各个评论之间的关系. 平面模式(Flat ...

  8. RefineDet训练自己的数据

    https://github.com/sfzhang15/RefineDet 1.编译安装 cp Makefile.config.example Makefile.config make all -j ...

  9. Socket网络编程(三)

    TCP协议网络通讯案例(http协议) 1.创建TcpServer(tcp服务端) package com.cppdy.tcp; import java.io.IOException; import ...

  10. CHENGDU1-Python编程语言和PEP8规范

    CHENGDU1-Python编程语言和PEP8规范 PEP8规范6条? 答:PEP8规范说白了就是一种规范,可以遵守,也可以不遵守,遵守PEP8可以让代码的可读性更高. 代码编排:---缩进,4个空 ...