zoukankan      html  css  js  c++  java
  • Vue2.0表单校验组件vee-validate的使用

    import Vue from 'vue'
    import App from './App.vue'
    import VeeValidate, { Validator } from 'vee-validate';
    
    import messages from './assets/js/zh_CN'
    
    Validator.updateDictionary({
        zh_CN:{
            messages
        }
    })
    
    const config = {
        errorBagName:'errors',
        delay:0,
        locale:'zh_CN',
        messages:null,
        strict:true
    }
    
    Vue.use(VeeValidate,config);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    <template>
      <div id="app">
    
         <label class="label" for="email">email </label>
          <p class="control">
              <input v-validate.initial="'required|email'" v-model="email" type="text" placeholder="email" name="email">
              <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
    
          </p>
           <label class="label">Email (1s delay)</label>
            <p class="control has-icon has-icon-right">
                <input name="email" v-validate="'required|email'"  :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>
    </template>
    
    <script>
    
    
    export default {
      data () {
        return {
          email:''
        }
      },
    
    }
    </script>

    https://www.bbsmax.com/A/n2d9X8RY5D/         有问题,   示例看下个链接

    http://vee-validate.logaretm.com/examples.html

  • 相关阅读:
    ADO.NET调用存储过程
    存储过程
    web Servise(服务)
    ADO.NET连接池
    ADO.NET
    常用语法2
    常用语法
    修改pip源为国内网站
    模块
    random模块
  • 原文地址:https://www.cnblogs.com/yang-C-J/p/6971570.html
Copyright © 2011-2022 走看看