Vue가 vee-validate를 사용하여 양식을 확인하는 단계에 대한 자세한 설명

이번에는 Vue가 vee-validate를 사용하여 양식을 검증하는 단계에 대해 자세히 설명합니다. Vue가 vee-validate를 사용하여 양식을 검증하는 주의 사항은 무엇입니까? 보세요.

Vue 프로젝트에는 양식 검증이 필요합니다. 그렇죠? 저에게 양식 검증은 매우 얽힌 내용이고, 온갖 판단이 너무 지저분합니다. 양식 검증을 위해 jquery의 유효성 검사 플러그인을 사용하는 것이 편리합니다. Vue에 jquery의 유효성 검사 플러그인을 도입할 수도 있습니다(jquery를 도입하는 방법은 이전 블로그 게시물에 소개되어 있습니다. 보려면 클릭하세요). 하지만 우리는 Vue 프로젝트를 진행하고 있기 때문에 해결할 수 없는 경우가 아니면 도입하지 않는 것이 좋습니다. Vue에는 vee-validate라는 자체 양식 유효성 검사 플러그인이 있기 때문입니다.

여기서 Vee-validate의 사용법을 자세히 설명하지는 않고, 프로젝트에서 Vee-validate를 어떻게 사용하는지 빠르게 이해하기 위함입니다. 먼저 플러그인을 만들어본 후 자세한 내용을 이야기해 보시기 바랍니다.

1.npm install vee-validate: npm install vee-validate --save --registry=<a href="//m.sbmmt.com/wiki/373.html" target="_blank ">https://<code>npm install vee-validate --save --registry=<a href="//m.sbmmt.com/wiki/373.html" target="_blank">https://</a>registry.npm.taobao.org --verbose

2.安装成功后在main.js中引入：

3.在你要进行表单验证的input标签加入相关的代码：

注意：

(1)errors打印出来是这样的：{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] }，span标签通过errors的几个方法来进行显示隐藏和提示错误，这里列出几个常用的errors方法： errors.first('field')：当前field的第一个错误信息，字符串 errors.collect('field')：当前field的所有错误信息，数组列表 errors.has('field')：当前filed是否有错误，布尔值 errors.all()：当前表单所有错误，数组列表 errors.any()：当前表单是否有任何错误，布尔值

(2)v-validate="'required | email'"registry.npm.taobao.org --verbose

2. 성공적으로 설치한 후 main.js에 도입하세요.

3. 입력 태그관련 코드 추가:

참고:

jQuery를 사용하여 퍼지 쿼리를 구현하는 단계에 대한 자세한 설명

node Async/Await 비동기 프로그래밍 구현에 대한 자세한 설명

위 내용은 Vue가 vee-validate를 사용하여 양식을 확인하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!