vue+vue-validator 表单验证

最新推荐文章于 2024-05-12 09:43:24 发布

徐同保

最新推荐文章于 2024-05-12 09:43:24 发布

阅读量1.3w

点赞数 2

分类专栏： web前端前端技术分享文章标签： javascript vue vue-validator

本文链接：https://blog.csdn.net/xutongbao/article/details/78520863

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

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

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