直接在页面引用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之__call__()

    __call__ 在Python中,函数其实是一个对象: >>> f = abs >>> f.__name__ 'abs' >>> f(-123) ...

  2. fatal: refusing to merge unrelated histories

    Git 提交代码时遇到冲突了,所以 git pull 拉不下来远程代码.使用一下命令解决: git pull origin master --allow-unrelated-histories 然后解 ...

  3. Confluence 6 修改日志文件的目标位置

    在 log4j 中,一个输出被定义为 'appender'.希望修改 log 文件的目标,你需要停止 Confluence 然后修改设置 log4j.properties 日志配置文件的  'Logg ...

  4. Confluence 6 关于 Decorators

    Confluence 是使用开源的 SiteMesh 库构建的.一个 Web 页面的布局系统,这个布局系统能够在全站点中提供完整统一的界面和外观.SiteMesh 是通过 "decorato ...

  5. Confluence 6 创建一个主题

    如果你希望创建你自己的主题,你需要写一个 Confluence 插件.请参考我们开发文档中的下面页面 开始使用 插件开发. 请参考开发者指南的页面来 写一个 Confluence 主题. 使用 主题插 ...

  6. 用flask的扩展实现的简单的页面登录

    from flask import Flask,render_template,request,redirect,session app = Flask(__name__,template_folde ...

  7. C++ GetModuleFileName()

    关于GetModuleFileName function,参考:https://msdn.microsoft.com/en-us/library/windows/desktop/ms683197(v= ...

  8. re模块(正则)

    一, 什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法. 在python中,正则内嵌在python中,并通过re模块实现,正则表达模式被编译成一系列 ...

  9. JumpServer里的sftp功能报错说明

    JumpServer里sftp默认的家目录是/tmp下 修改默认家目录: vim /usr/local/coco/coco/sftp.py class SFTPServer(paramiko.SFTP ...

  10. spring coud Feign常用配置

    Ribbon配置 在Feign中配置Ribbon非常简单,直接在application.properties中配置即可,如: # 设置连接超时时间 ribbon.ConnectTimeout=500 ...