Comment écrire des règles d'inspection dans la méthode vue

Vue est un framework JavaScript populaire couramment utilisé pour créer des applications SPA (Single Page Application). Dans les applications Vue, la validation des entrées utilisateur est une partie très importante. Dans Vue, vous pouvez vérifier la validité des entrées utilisateur en définissant certaines règles et méthodes pour vous assurer qu'elles répondent aux besoins de l'application et garantissent la sécurité des données.

Vue fournit des règles de validation intégrées, telles que : obligatoire, e-mail, numérique, etc. Vous pouvez effectuer une liaison de données avec des éléments d'entrée et de formulaire, lier des règles de validation directement aux éléments correspondants et lier des données aux données d'instance Vue via la directive v-model. De plus, vous pouvez également personnaliser les règles et méthodes de validation des données.

1. Les règles de validation intégrées

1 obligatoire

required sont utilisées pour déterminer si la zone de saisie est vide. vide, la vérification échoue.

Utilisé dans les modèles :

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

Utilisé dans les instances Vue :

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

2, email

email règles La fonction est de déterminer si la saisie est dans un format de courrier électronique légal.

Utilisé dans les modèles :

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

Utilisé dans les instances Vue :

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

3, numérique

règles numériques La fonction est de déterminer si l'entrée est au format purement numérique.

Utilisé dans les modèles :

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

Utilisé dans les instances Vue :

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

2. Règles personnalisées

En plus de en utilisant les règles intégrées fournies par Vue, vous pouvez également personnaliser les règles pour valider les entrées de l'utilisateur. Les règles personnalisées peuvent être personnalisées en fonction des besoins de l'application. Par exemple, les données d'entrée doivent se situer dans une plage spécifique, doivent être conformes à des expressions régulières spécifiques, doivent respecter certains formats de données, etc. Des règles personnalisées peuvent être implémentées à l'aide de la méthode Vue.directive. Il suffit de transmettre une fonction de vérification lors de la liaison.

L'utilisation du modèle de règles personnalisées est similaire aux règles intégrées. Définissez d'abord une instruction de vérification dans le modèle, puis transmettez l'instruction de règle personnalisée à l'instruction v-bind de l'élément d'entrée, afin que cela puisse être. Des règles personnalisées sont déclenchées lorsque la zone de saisie est floue.

Implémentation de règles personnalisées :

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)
    }
  }
})

Utilisez des règles personnalisées dans le modèle et transmettez my-rule à la directive de règle personnalisée dans la directive v-bind :

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

3. Méthode personnalisée

La méthode personnalisée peut également être utilisée pour la vérification des données, principalement en écrivant une fonction pour déterminer si l'entrée est conforme aux règles, puis dans le modèle lier l'événement correspondant via l'instruction v-on et appelez la méthode personnalisée dans le code qui lie l'événement.

Écriture de méthodes personnalisées dans Vue :

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

Appel de méthodes personnalisées dans des modèles :

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

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

Résumé :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!