VeeValidate を使用して Vue プロジェクトでフォーム検証機能を実行する方法

今回は、Vue プロジェクトでフォーム検証を行うために VeeValidate を使用する方法を説明します。 VeeValidate を使用して Vue プロジェクトでフォーム検証を行う場合の 注意事項 は何ですか? 以下は実際的なケースです。

VeeValidate とは:

VeeValidate は、Vue.js の検証ライブラリであり、多くの

検証ルール を備えており、カスタム ルールをサポートしています。これはテンプレートに基づいているため、HTML5 検証 API に似ており、馴染みがあります。 HTML5 入力とカスタム Vue コンポーネントを検証できます。また、ローカリゼーションを念頭に置いて構築されており、実際、素晴らしいコミュニティ メンバーによって約 44 の言語がサポートおよび維持されています。

この記事には、次のアプリケーションを含む VeeValidate が含まれています:

1. 基本的なインストールと使用

2. カスタム ルールとエラー メッセージ

4. HTML5 入力を検証し、Vue コンポーネントをカスタマイズします。

5. 統合された送信ボタンの処理

まずページの効果を見てみましょう:

gif 効果を見たい場合は、私の github (

https://github. com/HongqingCao/My-Code/tree/master/VeeValidate) を参照して、ソース コードのダウンロード例を確認してください:

基本的なインストールと使用方法

VeeValidate は 2 つの方法をサポートしています。1 つは NPM/yarn です。 (npm install vee -validate --save)、1 つは CDN です。 この記事は CDN の形式で引用されています:

<script></script>
  <script></script>
  <script></script>
  <script></script>

注: 4 つの js ファイルが紹介され、最初の 2 つは簡単に説明され、後の 2 つは vee-validata および zh_CN 中国語言語パック ファイルです

html ページ部分:

<p>
        </p><p>请填写您要荐购的书籍信息：</p>
        <p>
          </p><p>
            </p><p>
              <span>书 名：</span>
              <input>
            </p>
            <p>{{ errors.first('title') }}</p>
          
          <p>
            </p><p>
              <span>作 者：</span>
              <input>
            </p>
            <p>{{ errors.first('author') }}</p>
          
          <p>
            </p><p>
              <span>出版社：</span>
              <input>
            </p>
            <p>{{ errors.first('publisher') }}</p>
          
          <p>         
            </p><p>
              <span>出版年：</span>
              <input>
            </p>
            <p>{{ errors.first('pubYear') }}</p>
          
          <p>
            </p><p>
              <span>语言类型：</span>
              <input>
            </p>
            <p>{{ errors.first('type') }}</p>
          
          <p>
            </p><p>
              <span>ISBN号：</span>
              <input>
            </p>
            <p>{{ errors.first('isbn') }}</p>
          
          <p>
            </p><p>
              <span>推荐理由：</span>
              <textarea></textarea>
            </p>
            <p>{{ errors.first('remark') }}</p>
          
           <p>
             </p><p>提交</p>
           
         
      

注: これには、次の VeeValidate ナレッジ ポイントが含まれています:

1. input/textarea タグの

v-validate、data-vv-as、name

属性。 (ここでの v-model は、これらのパラメーターをインターフェース要求に渡しやすくするための双方向バインディングであるため、あまり詳しく説明しません) 2.

v-show="errors.has('remark')"

エラー メッセージ ラベルと **{{errors.first('remark') }}** v-validate:

v-validate ディレクティブを検証する入力に追加し、入力がエラーメッセージプロパティの生成に使用される名前。 次に、ディレクティブには、パイプ '|' で区切られた検証ルールのリストを含むルール文字列 が渡されます。たとえば、上記の Publication Year

を検証するには、

required このオプションは必須です。pub Year を使用して、フィールドが年の形式 (もちろんここでカスタマイズされています)、桁: 4、数字である必要があることを示します長さは4です。これら 2 つのルールを組み合わせるには、v-validate 式の値を文字列値 required|pub Year|digits:4 に指定します。 data-vv-as:

この入力に対してエラー メッセージが生成されると、実際のフィールド名の代わりに data-vv-as 値が使用されます (デフォルトのエラー プロンプトはすべて英語です)。 set この後、エラー プロンプト フィールド名は data-vv-as 値をプロンプトします

v-show="errors.has('remark'

)

デフォルトのエラー プロンプト ラベルは読み込まれません

errors.first ( 'remark')

現在のリマークに関する最初の

エラーメッセージを取得します

js部分:

<script>
    var IndexPage = "http://localhost:8080/xxxx.html"
    var AuthCode = "12131";
    $(function () {
      recommend(AuthCode);
    })
    VeeValidate.Validator.localize(&#39;zh_CN&#39;);
    Vue.use(VeeValidate);
    VeeValidate.Validator.localize({
      zh_CN: {
        messages: {
          required: function (name) { return name + &#39;不能为空&#39; },
        }
      }
    })
    VeeValidate.Validator.extend(&#39;isbn&#39;,{
      getMessage: function () { return " 请输入正确格式的isbn号" },
      validate: function (value) { return /^[\d-]*$/.test(value);}
    })
    VeeValidate.Validator.extend(&#39;pubYear&#39;, {
      getMessage: function () { return " 请输入正确的年份" },
      validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
    })
    function recommend(AuthCode) {
      var classList = new Vue({
        el: &#39;#recommend-box&#39;,
        data: function () {
          return {
            title: "",
            author: "",
            publisher: "",
            pubYear: "",
            type: "",
            remark: "",
            isbn: ""
          }
        },
        methods: {
          validateBeforeSubmit() {
            this.$validator.validateAll().then((result) => {
              if (result) {
                $.ajax({
                  url: &#39;/xxxx&#39;,
                  data: {
                    Request: "xxxxx",
                    title: this.title,
                    author: this.author,
                    publisher: this.publisher,
                    pubYear: this.pubYear,
                    type: this.type,
                    remark: this.remark,
                    isbn: this.isbn,
                    certId: AuthCode
                  },
                  type: &#39;POST&#39;,
                  dataType: "json",
                  success: function (data) {
                    var msg = data.msg;
                    alert(msg);
                    window.location.href = IndexPage;
                  }
                });
                return;
              }
              alert("请输入完整推荐信息！")
            });
          }
        }
      })
    }
  </script>

わかりました、このコードを一緒に読みましょう

VeeValidate.Validator.localize('zh_CN');
    Vue.use(VeeValidate);

注: 上記のコードの意味は 1 、 に変更しますzh_CN 正午の言語環境。変更しない場合、デフォルトのプロンプトは英語になります。 2. VeeValidate プラグインをインストールします。これは、初期化としても理解できます

VeeValidate.Validator.localize({
      zh_CN: {
        messages: {
          required: function (name) { return name + '不能为空' },
        }
      }
    })

注: 上記のコードは、デフォルトのプロンプトと name 属性を変更します。項目の空でない判定

VeeValidate.Validator.extend('isbn',{
      getMessage: function () { return " 请输入正确格式的isbn号" },
      validate: function (value) { return /^[\d-]*$/.test(value);}
    })
    VeeValidate.Validator.extend('pubYear', {
      getMessage: function () { return " 请输入正确的年份" },
      validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
    })

注: 上記のコードは、カスタム ルール getMessage: validate を変更します。これは、通常は一致するルールです。

validateBeforeSubmit() {
   this.$validator.validateAll().then((result) => {
        if (result) {
           //这里写具体的接口请求
            alert("推荐成功！")
           return;
          }
           alert("请输入完整推荐信息！")
        }
     }

注释：上代码创建一个提交按钮事件，监听是否正常填写选项，实现校验

一个完整的校验应用案例到这里已经讲解的差不多了，小伙伴们可以根据自己的实际情况应用在自己的项目中，如果需要深入了解，可以移步到官网https://baianat.github.io/vee-validate/guide/。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何操作Vue内使用vee-validate

Node.js笔记process模块使用详解

以上がVeeValidate を使用して Vue プロジェクトでフォーム検証機能を実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。