Maison > Article > interface Web > Partage de code de vérification du formulaire Vue from-validate
Cet article vous présente principalement l'exemple de code de vérification du formulaire Vue à partir de la validation. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Avant-propos
La vérification des données du formulaire est requise. HTML5 était à l'origine utilisé pour terminer la vérification, mais l'effet était médiocre et pas assez flexible, il était donc nécessaire. à personnaliser. Pour la validation du formulaire, les plug-ins en ligne sont trop volumineux et le projet n'a pas autant d'exigences.
Alors écrivons-en un nous-mêmes !
Préparation des connaissances
Instructions personnalisées de vue
Pour plus de détails, veuillez consulter le manuel officiel, le lien est le suivant : https:/ /vuejs.org /v2/guide/custom-directive.html
En général, cela peut vous aider à accéder à votre fonction dans la fonction hook spécifiée, les paramètres (el, liaison, vnode)
el : dom lié
binding : divers attributs de la directive
vnode : compilation Vue Le nœud virtuel généré
Démarrer
1. Déclaration de la commande
Il est à noter que les paramètres sont à l'arrière Après la liaison, il ne sera pas bloqué, utilisez donc la méthode de fermeture
Vue.directive('validate', { // 在指令第一次背绑定上时调用 bind(el, binding, vnode) { } }
<form id="red-package" @submit.prevent="submit" v-validate.formData="validate"> ... <button type="submit" class="save">保存</button> </form>
2 Analyser les paramètres
Vue.directive('validate', { // vm对象,就是组件 const vm = vnode.context; // 获得参数绑定的参数,就是规则对象 const validate = binding.value; // 获得数据的key const dataKey = Object.keys(binding.modifiers)[0]; });
Vérifiez les règles lors de l'entrée. modifications du contenu
el.addEventListener('change', (e) => { try { // 事件触发的input标签名 const changeElName = e.srcElement.name; // 如果未设定规则不验证 if (validate[changeElName]) { // 把表单的所有参数传入 validate[changeElName](vm[dataKey]); // 检验成功添加成功的class Util.removeClass(e.srcElement, 'success'); } } catch (err) { // 抛出异常添加失败的class Util.addClass(e.srcElement, 'error'); } });
4. Vérifiez toutes les données lors de la soumission
// 有更好的方案 el.getElementsByTagName('button')[0].addEventListener('click', (e) => { try { // 遍历对象 Object.keys(vm[dataKey]).forEach((item) => { if (validate[item]) { validate[item](vm[dataKey]); } }); } catch (err) { // 抛出错误提示 vm.loading({ text: '请检查参数', }); vm.loaded(1000); // 阻止submit e.preventDefault(); } });
5 Exemples de règles de vérification
amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) { if (amountRandomUpper < 1) { throw new Error('过小'); } if (amountRandomUpper < amountRandomLower) { throw new Error('过小'); } if (amountRandomUpper > budget) { throw new Error('过小'); } }
Fin
Il y a encore de nombreux problèmes ici. J'espère que vous pourrez signaler de bonnes suggestions. Recommandations associées :vue, vue-validator implémente la fonction de vérification de formulaire
Explication détaillée de la fonction de vérification de formulaire Bootstrap
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!