Vueメソッドでの検査ルールの書き方

Vue は、SPA (シングル ページ アプリケーション) アプリケーションの構築によく使用される人気の JavaScript フレームワークです。 Vue アプリケーションでは、ユーザー入力の検証は非常に重要な部分です。 Vue では、いくつかのルールとメソッドを定義することでユーザー入力の有効性をチェックし、それがアプリケーションのニーズを満たし、データのセキュリティが確保されていることを確認できます。

Vue には、必須、電子メール、数値などの組み込みの検証ルールがいくつか用意されています。 input 要素と form 要素を使用してデータ バインディングを実行したり、検証ルールを対応する要素に直接バインドしたり、v-model ディレクティブを介してデータを Vue インスタンス データにバインドしたりできます。さらに、データ検証のルールとメソッドをカスタマイズすることもできます。

1. 組み込みの検証ルール

1. required

required ルールの機能は、入力ボックスが空かどうかを判断することです。空の場合は、検証が失敗します。

テンプレートで使用される:

<input type="text" v-model="name" required>

Vue インスタンスで使用される:

data() {
  return {
    name: ''
  }
}

2. email

電子メール ルールの機能は、次のいずれかを決定することです。入力は正当です。電子メール形式です。

テンプレートで使用される:

<input type="email" v-model="email" required>

Vue インスタンスで使用される:

data() {
  return {
    email: ''
  }
}

3. numeric

数値ルールの機能は、入力が純粋な数値形式。

テンプレートで使用される:

<input type="number" v-model="age" required>

Vue インスタンスで使用される:

data() {
  return {
    age: ''
  }
}

2. カスタム ルール

によって提供される組み込みルールの使用に加えて、 Vue さらに、ユーザー入力を検証するルールをカスタマイズすることもできます。カスタム ルールは、アプリケーションのニーズに応じてカスタマイズできます。たとえば、入力データは特定の範囲内にある必要がある、特定の正規表現に準拠する必要がある、特定のデータ形式を満たす必要があるなどです。カスタム ルールは Vue.directive メソッドを使用して実装でき、バインド時に検証関数を渡すことができます。

カスタム ルールのテンプレートの使用法は、組み込みルールと同様です。まず、テンプレートで検証命令を定義し、次にカスタム ルールの命令を入力要素の v-bind 命令に渡します。入力ボックスで使用できること、フォーカスが外れたときにカスタム ルールがトリガーされること。

カスタム ルールの実装:

Vue.directive('my-rule', {
  bind: function(el, binding, vnode) {
    el.addEventListener('blur', function() {
      const value = el.value
      const rule = binding.value.rule // 获取规则
      const errorMessage = binding.value.message // 获取错误提示信息
      const isValid = rule(value) // 验证数据
      if (!isValid) { // 显示错误提示
        const errorElement = document.createElement('div')
        errorElement.innerHTML = errorMessage
        errorElement.style.color = 'red'
        insertAfter(errorElement, el)
      } else { // 清除错误提示
        const errorElement = nextSibling(el)
        if (errorElement.nodeType === 1 && errorElement.className === 'error-msg') {
          el.parentNode.removeChild(errorElement)
        }
      }
    })
  }
})

// 实例
new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    // 自定义规则
    myRule(value) {
      return value.length === 4 && /^d+$/.test(value)
    }
  }
})

テンプレートでカスタム ルールを使用し、v-bind ディレクティブのカスタム ルール ディレクティブに my-rule を渡します:

<input type="text" v-model="name" v-my-rule="{rule: myRule, message: '年龄必须是4位纯数字'}">

3。カスタム メソッド

カスタム メソッドは、主に入力がルールに準拠しているかどうかを判断する関数を作成し、テンプレート内の v-on 命令を通じてバインドすることにより、データ検証にも使用できます。 、イベントをバインドするコード内のカスタム メソッドを呼び出します。

Vue でのカスタム メソッドの作成:

methods: {
  myMethod(value) {
    return value.length === 11 && /^1d{10}$/.test(value)
  }
}

テンプレートでのカスタム メソッドの呼び出し:

<input type="text" v-model="phone" v-on:blur="checkPhone">

methods: {
  checkPhone() {
    const phone = this.phone
    const isValid = this.myMethod(phone)
    if (!isValid) {
      alert('请输入正确的手机号码')
    }
  }
}

概要:

Vue のデータ検証は Vue の基本機能ですプログラム開発では、組み込みルール、カスタム ルール、カスタム メソッド、その他の技術的手段を使用して、データ検証機能を効果的に実現できます。開発プロセス中に、これらのテクノロジを合理的に使用してユーザー入力を検証すると、プログラムのセキュリティと安定性が向上するだけでなく、ユーザー エクスペリエンスも向上します。

以上がVueメソッドでの検査ルールの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。