This time I will show you how to use VeeValidate to perform form verification in the vue project. What are the precautions ? The following is a practical case. Let’s take a look.
What is VeeValidate:
VeeValidate is a verification library for Vue.js. It has manyThis article contains VeeValidate including the following applications:
1. Basic installation and use2. Localization support3. Custom rules and error messages4. Validation of HTML5 input and custom Vue components5. Unified submit button processingTake a look at the page effect first:
If you want to see the gif effect, you can go to my github (Basic installation and use
Usage of VeeValidate Two methods are supported: one is: NPM/yarn (npm install vee-validate --save), the other is: CDN. This article is quoted in the form of CDN:<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="js/vue.min.js" ></script> <script type="text/javascript" src="js/vee-validate.min.js" ></script> <script type="text/javascript" src="js/zh_CN.js" ></script>
<p class="enroll" id="recommend-box"> <p class="title">请填写您要荐购的书籍信息:</p> <p class="content"> <p class="info infoa"> <p class="group-input"> <span class="a">书 名:</span> <input v-model="title" v-validate="'required'" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" /> </p> <p class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</p> </p> <p class="info infoa"> <p class="group-input"> <span class="a">作 者:</span> <input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" /> </p> <p class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</p> </p> <p class="info infoa"> <p class="group-input"> <span class="a">出版社:</span> <input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" name="publisher" placeholder="请输入出版社" /> </p> <p class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</p> </p> <p class="info infob"> <p class="group-input"> <span class="a">出版年:</span> <input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as="出版年" type="text" name="pubYear" placeholder="请输入出版年" /> </p> <p class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</p> </p> <p class="info infob"> <p class="group-input"> <span class="a">语言类型:</span> <input v-model="type" v-validate="'required'" data-vv-as="语言类型" type="text" name="type" placeholder="语言类型" /> </p> <p class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</p> </p> <p class="info infob"> <p class="group-input"> <span class="a">ISBN号:</span> <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN号" type="text" name="isbn" placeholder="ISBN号" /> </p> <p class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</p> </p> <p class="info infob more"> <p class="group-input"> <span class="a">推荐理由:</span> <textarea v-model="remark" v-validate="'max:200'" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></textarea> </p> <p class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</p> </p> <p class="info info-btn"> <p class="btton" @click="validateBeforeSubmit()">提交</p> </p> </p> </p>
v-validate in the input/textarea tag , data-vv-as, name attribute. (v-model is a two-way binding here to facilitate passing these parameters to the interface request, so I won’t introduce too much) 2. v-show="errors.has('remark')" in the error message tag and **{{ errors.first('remark') }}**
v-validate:
v-validate directive is added to the Validate the input and make sure your input has the name attribute used to generate the error message. The directive is then passed a rulesstring containing a list of validation rules separated by a pipe '|'. For example, for the Publication Year copy verification above, use required This option is required, pubYear to indicate that the field must be in the year format (of course here is customized), digits: 4, the number length is 4. To combine these two rules, we specify the value of the v-validate expression with the string value required|pubYear|digits:4.
data-vv-as:
When any error message is generated for this input, it will use that data-vv-as value instead of the actual field name , the default error prompts are all in English. If you set this, the error prompt field name will prompt data-vv-as valuev-show="errors.has('remark')
The default error prompt label is not loadederrors.first('remark')
Get the first information about the current remark js part:<script type="text/javascript"> var IndexPage = "http://localhost:8080/xxxx.html" var AuthCode = "12131"; $(function () { recommend(AuthCode); }) VeeValidate.Validator.localize('zh_CN'); Vue.use(VeeValidate); VeeValidate.Validator.localize({ zh_CN: { messages: { required: function (name) { return 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); } }) function recommend(AuthCode) { var classList = new Vue({ el: '#recommend-box', data: function () { return { title: "", author: "", publisher: "", pubYear: "", type: "", remark: "", isbn: "" } }, methods: { validateBeforeSubmit() { this.$validator.validateAll().then((result) => { if (result) { $.ajax({ url: '/xxxx', 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: 'POST', 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);
VeeValidate.Validator.localize({ zh_CN: { messages: { required: function (name) { return 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); } })
validateBeforeSubmit() { this.$validator.validateAll().then((result) => { if (result) { //这里写具体的接口请求 alert("推荐成功!") return; } alert("请输入完整推荐信息!") } }
注释:上代码创建一个提交按钮事件,监听是否正常填写选项,实现校验
一个完整的校验应用案例到这里已经讲解的差不多了,小伙伴们可以根据自己的实际情况应用在自己的项目中,如果需要深入了解,可以移步到官网https://baianat.github.io/vee-validate/guide/。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of How to use VeeValidate to perform form verification function in vue project. For more information, please follow other related articles on the PHP Chinese website!