vue-form表单验证插件

参考地址：https://segmentfault.com/q/1010000003988864

github地址：https://github.com/fergaldoyle/vue-form

安装插件

cnpm install vue-form --save

使用，在main.js里加入

import VueForm from 'vue-form'

Vue.use(VueForm)

代码实战

 <template>
     <div class="login__content">
         <vue-form :state="formstate" v-model="formstate">
     <div class="login__title">SIGN IN</div>
     <div class="login__content_input username__margin_bottom">
            <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
             <input type="text"  name='name'  placeholder="Username" required v-model="model.name"/>
         </validate>
              <field-messages name="name" v-show="isSubmit">
            <!--<div class="success__msg"></div>-->
            <div class="error__msg" slot="required">Username is a required field</div>
              </field-messages>
     </div>
     <div class="login__content_input">
         <validate auto-label class="required-field" :class="fieldClassName(formstate.password)">
             <input type="password" name="password"  placeholder="Password" required v-model="model.password" />
         </validate>
         <field-messages name="password" v-show="isSubmit" >
              <!--<div class="success__msg"></div>-->
              <div class="error__msg" slot="required">Password is a required field</div>
         </field-messages>

     </div>
     <div class="error__msg" v-if='errorMsg["fail"]'>{{errorMsg["fail"]}}</div>
     <div class="login__in_part">
         <div class="forgot__password">
             <a >Forgot Password</a>
         </div>
         <div class="login__remember">
             <label><input type="checkbox" v-model="isRemember" /> Remember me</label>
         </div>
         <div class="login__in">
             <button  class="signin" @click.prevent="login"  >SIGN IN</button>
         </div>
     </div>
     <div class="sign__register">Don't have an account?  <a href="#" >Sign Up</a> </div>
     </vue-form>
 </div>
 </template>
 <script>
 import config from '../../utils/config.js'
 export default{
     data(){
         return{
             formstate: {},
             errorMsg:{},
             isSubmit:false,
             isRemember:true,
             model:{
                 name:'',
                 password:''
             }
         }
     },
     methods:{
         fieldClassName: function (field) {
       if(!field) {
         return '';
       }
       if((field.$touched || field.$submitted) && field.$valid && !this.errorMsg["fail"]) {
         return 'has-success';
       }
       if((field.$touched || field.$submitted) && field.$invalid && this.errorMsg["fail"]) {
         return 'has-danger';
       }
     },
     login(){
         this.isSubmit=true;
         if(this.formstate.$valid===false){
             return
         }
         let o={
             email:this.model.name,
             password:this.model.password
         }
         this.$axios.post(`${config.apiPreUrl}/login/getToken`, o).then((res)=>{
             console.log(res.data);
         })
     }
     }
 }
 </script>
 <style lang="scss" >
 .login__content{
   width: 452px;
   height: 495px;
   background: white;
   position: relative;
   box-shadow: 0px 0px 14px #423D40;
   padding: 0 44px 0 43px;
 }
 .login__title{
   padding: 56px 0 27px 0px;
   font-size: 18px;
   color: #3A3A3A;
   font-weight: bolder;
 }
 .login__content_input{
   width: 365px;
   position: relative;
   input{
     height: 48px;
     padding: 0 8px;
     background-color: #ffffff;
     padding-left: 15px;
     width: 100%;
     outline: none;
     font-size: 15px;
     border: solid 1px #C4C4C4;
     &:hover{
         border: solid #C4C4C4 1px;
         box-shadow:0 0 3px rgba(136,136,136,0.7);
     }
   }
 }
 .username__margin_bottom{
   margin-bottom: 25px;
 }
 .forgot__password{
   font-size: 11px;
   padding: 9px 0 0 4px ;
   a{
     color:#E25043;
     cursor: pointer;
   }
 }
 .login__remember{
    padding: 29px 0;
    font-size: 11px;
    color: #707D95;
    font-weight: lighter;
    input{
         margin-top:0px !important;
         margin-right: 5px;
         vertical-align: middle;
    }
 }
 .login__in_part{
   padding-left: 4px;
 }
 .login__in{
   height: 44px;
   button{
     width: 50%;
     height: 44px;
     color: #000;
     border: 0;
     background: #E25043;
     color: #ffffff;
     font-size: 12px;
   }
 }
 .sign__register{
   padding: 29px 0 0 6px;
   color: #4A4A4A;
   font-size: 12px;
   a{
     color: #E25043;
     text-decoration: none;
   }
 }
 .error__msg{
   color: #E25043;
   font-size: 13px;
   padding: 7px 0 0 0 ;
 }
 .has-danger{
   border: solid 1px #EB7057!important;
 }
 .has-success{
   border: solid 1px #43C7A9 !important;
 }
 .has-normal{
   border:solid #C4C4C4 1px!important;
 }
 </style>