Home >Web Front-end >JS Tutorial >vue, vue-validator implements form verification function

vue, vue-validator implements form verification function

小云云Original: 2018-05-14 16:15:151983browse

This article mainly introduces the implementation code of vue+vue-validator form verification function. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Official document: http://vuejs.github.io/vue-validator/zh-cn/index.html

github project address: https://github.com /vuejs/vue-validator

The following will introduce the vue+vue-validator form verification function. The specific code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
  <p id="app"> 
    <validator name="myForm"> 
      <form novalidate> 
        Zip: <input type="text" v-validate:zip="[&#39;required&#39;]"><br /> 
        <p> 
          <span v-if="$myForm.zip.required">Zip code is required.</span> 
        </p> 
      </form> 
    </validator> 
  </p> 
  <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>

<!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> 
  <p 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 + &#39;-&#39; + error.validator">{{error.message}}</p> 
     </li> 
    </ul> 
   </validity-group> 
  </p> 
  <script> 
   new Vue({ 
    data: { 
     validation: { 
      result: {} 
     } 
    }, 
    computed: { 
     requiredErrorMsg: function () { 
      return &#39;Required fruit !!&#39; 
     } 
    }, 
    methods: { 
     handleValidate: function (e) { 
      var $validity = e.target.$validity  
      $validity.validate() 
     } 
    } 
   }).$mount(&#39;#app&#39;) 
  </script> 
 </body> 
</html>

Related recommendations:

Detailed explanation of Bootstrap form validation function

Example of form validation function implemented by layui.js

JS implementation of simple form validation function example

The above is the detailed content of vue, vue-validator implements form verification function. For more information, please follow other related articles on the PHP Chinese website!

bootstrap layui 表单验证 JS github http https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of vue router using jquery and params to pass parametersNext article：Detailed explanation of vue router using jquery and params to pass parameters

See more

vue, vue-validator implements form verification function

Related articles