欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue+vue-validator 表单验证功能的实现代码

程序员文章站 2022-03-21 10:10:24
官方文档: github项目地址: 下面给大家介绍vue+vue-validator 表单验证功能,具体代码如下所示: 1.

官方文档:

github项目地址:

下面给大家介绍vue+vue-validator 表单验证功能,具体代码如下所示:

1.

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>title</title> 
</head> 
<body> 
  <div id="app"> 
    <validator name="myform"> 
      <form novalidate> 
        zip: <input type="text" v-validate:zip="['required']"><br /> 
        <div> 
          <span v-if="$myform.zip.required">zip code is required.</span> 
        </div> 
      </form> 
    </validator> 
  </div> 
  <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js"></script> 
  <script> 
    new vue({ 
      el:"#app" 
    }) 
  </script> 
</body> 
</html> 

2.

<!doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>radio button validation example</title> 
  <script src="../../node_modules/vue/dist/vue.js"></script> 
  <script src="../../dist/vue-validator.js"></script> 
  <style> 
   input.invalid { border-color: red; } 
   .errors { color: red; } 
  </style> 
 </head> 
 <body> 
  <div id="app"> 
   <h1>survey</h1> 
   <validity-group field="fruits" v-model="validation" :validators="{ 
    required: { message: requirederrormsg } 
   }"> 
    <legend>which do you like fruit ?</legend> 
    <input id="apple" type="radio" name="fruit" value="apple" @change="handlevalidate" @focusin="handlevalidate"> 
    <label for="apple">apple</label> 
    <input id="orange" type="radio" name="fruit" value="orange" @change="handlevalidate" @focusin="handlevalidate"> 
    <label for="orange">orage</label> 
    <input id="grape" type="radio" name="fruit" value="grage" @change="handlevalidate" @focusin="handlevalidate"> 
    <label for="grape">grape</label> 
    <input id="banana" type="radio" name="fruit" value="banana" @change="handlevalidate" @focusin="handlevalidate"> 
    <label for="banana">banana</label> 
    <ul class="errors"> 
     <li v-for="error in validation.result.errors"> 
      <p :class="error.field + '-' + error.validator">{{error.message}}</p> 
     </li> 
    </ul> 
   </validity-group> 
  </div> 
  <script> 
   new vue({ 
    data: { 
     validation: { 
      result: {} 
     } 
    }, 
    computed: { 
     requirederrormsg: function () { 
      return 'required fruit !!' 
     } 
    }, 
    methods: { 
     handlevalidate: function (e) { 
      var $validity = e.target.$validity  
      $validity.validate() 
     } 
    } 
   }).$mount('#app') 
  </script> 
 </body> 
</html> 

总结

以上所述是小编给大家介绍的vue+vue-validator 表单验证功能的实现代码,希望对大家有所帮助