vue 表单验证 vee-validate 简单使用
2018-04-10 00:00
716 查看
http://vee-validate.logaretm.com/examples.html
简单小例子
使用了邮箱格式验证,验证时间分别是延迟1s和初始时验证,除此之外还有提交前验证和异步验证
更多的例子见官网demo
这个模块压缩后还比较大
代码
效果
第一个的出错信息一秒后显示,而第二个在开始时就做了验证
简单小例子
使用了邮箱格式验证,验证时间分别是延迟1s和初始时验证,除此之外还有提交前验证和异步验证
更多的例子见官网demo
这个模块压缩后还比较大
代码
<template> <div class="columns is-multiline"> <div class="column is-12"> <label class="label">Email</label> <p class="control has-icon has-icon-right"> <input name="email" v-model="email" v-validate="'required|email'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email"> <i v-show="errors.has('email')" class="fa fa-warning"></i> <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span> </p> </div> <div class="column is-12"> <label class="label">First Name</label> <p class="control has-icon has-icon-right"> <input name="first_name" v-model="first_name" v-validate.initial="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('first_name') }" type="text" placeholder="First Name"> <i v-show="errors.has('first_name')" class="fa fa-warning"></i> <span v-show="errors.has('first_name')" class="help is-danger">{{ errors.first('first_name') }}</span> </p> </div> </div> </template> <script> export default { name: "form-test", data: () => ({ email: '', first_name: '', last_name: '' }), computed: { name() { return `${this.first_name} ${this.last_name}`; } } } </script>
效果
第一个的出错信息一秒后显示,而第二个在开始时就做了验证
相关文章推荐
- Vue中使用vee-validate表单验证的方法
- vue表单验证 vee-validate
- vue中vee validate表单校验的几种基本使用
- Vue2.0表单校验组件vee-validate的使用详解
- vee-validate vue 2.0自定义表单验证
- vee-validate vue 2.0自定义表单验证的实例
- jquery表单验证插件jquery.validate的使用
- jquery表单验证插件——使用方式非常简单,明了
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- jquery内置验证(validate)使用方法示例(表单验证)
- Jquery.validate.js表单验证插件的使用
- 使用jQuery validate 验证注册表单
- jquery表单验证插件(jquery.validate.js)的3种使用方式
- jquery的表单验证框架 --validate的使用
- jQuery.validator.addMethod自定义验证方法【在表单验证中的使用 $("#appEdit_Form").validate({rules : {},messages:{}】
- jQuery validate 表单验证使用方法
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- 使用jQuery validate 验证注册表单实例演示
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- jQuery:validate表单验证基本使用