Detaillierte Erläuterung von Vue und Vue-Validator zur Implementierung der Formularüberprüfungsfunktion-js-Tutorial-php.cn

Detaillierte Erläuterung von Vue und Vue-Validator zur Implementierung der Formularüberprüfungsfunktion

小云云

Freigeben： 2018-05-17 16:43:40

Original

4199 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Implementierungscode der Vue+Vue-Validator-Formularüberprüfungsfunktion vor. Er ist sehr gut und hat Referenzwert. Ich hoffe, er kann jedem helfen.

Das Folgende ist eine Einführung in die Formularüberprüfungsfunktion von vue+vue-validator. Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

<!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>

Nach dem Login kopieren

Hast du es schon gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

jquery Formularvalidierungs-Plug-in

Ein einfaches Beispiel für die Implementierung der Formularvalidierungsfunktion in JavaScript

Beispielcode für die Implementierung der grundlegenden Formularvalidierung in reinem JavaScript

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Vue und Vue-Validator zur Implementierung der Formularüberprüfungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!