What VeeValidate is:
VeeValidate is a validation library for vue.js that has many validation rules and supports custom rules. It is template-based, so it is similar and familiar to the HTML5 validation API. You can validate HTML5 input as well as customize Vue components. It’s also built around localization, and we actually have about 44 languages supported and maintained by wonderful community members.
VeeValidate contains the following applications:
- 1. Basic installation and use
- 2. Localization support
- Customize rules and error messages
- 4. Validate HTML5 input and customize Vue components
- 5. Unified submission button processing
First look at the page effect:
If you need this validation case source code for the old iron, go to my Github address :VeeValidate validation application (welcome ★star) can be run. Let’s get to the point:
Basic installation and use
Two methods can be used to use VeeValidate: NPM/ YARN (NPM install vee-validate –save) and CDN.
This article is quoted by 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>
Copy the codeNote: Four JS files are introduced, the first two are briefly described, the latter two are vee-validata and zh_CN Chinese language package files respectively
HTML page section:
<div class="enroll" id="recommend-box">
<div class="title"<div > <div class="content">
<div class="info infoa">
<div class="group-input">
<span class="a"> book & have spent < span> <input V-model ="title" v-validate="'required'" data-vv-as="Title" type="text" name="title" placeholder="Please enter a recommended title" />
</div>
<div class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</div>
</div>
<div class="info infoa">
<div class="group-input">
<span class="a"> make & have spent < span> <input v-model="author" v-validate="'required'" data-vv-as="The author" type="text" name="author" placeholder="Please enter author" />
</div>
<div class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</div>
</div>
<div class="info infoa">
<div class="group-input">
<span class="a"< span> <input v-model="publisher" v-validate="'required'" data-vv-as="Publishing house" type="text" name="publisher" placeholder="Please enter publisher" />
</div>
<div class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</div>
</div>
<div class="info infob">
<div class="group-input">
<span class="a"< span> <input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as=Year of publication type="text" name="pubYear" placeholder="Please enter the year of publication" />
</div>
<div class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</div>
</div>
<div class="info infob">
<div class="group-input">
<span class="a"< span> <input V-model ="type" v-validate="'required'" data-vv-as="Language type" type="text" name="type" placeholder="Language type" />
</div>
<div class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</div>
</div>
<div class="info infob">
<div class="group-input">
<span class="a"< span> <input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN" type="text" name="isbn" placeholder="ISBN" />
</div>
<div class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</div>
</div>
<div class="info infob more">
<div class="group-input">
<span class="a"< span> < span style = "max-width: 100%; clear: both; min-height: 1em"remark" v-validate="'max:200'" data-vv-as="Reasons for Recommendation" type="text" name="remark" placeholder="Please enter reasons for recommendation"></textarea>
</div>
<div class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</div>
</div>
<div class="info info-btn">
<div class="btton" @click="validateBeforeSubmit()"</div> </div> </div>Copy the codeNote: This side contains the following VeeValidate points:
1. The V-validate, data-vV-as, and name attributes of the INPUT /textarea tag. Errors. has(‘remark’)” and **{{errors.first(‘remark’)}}**
v-validate:
The V-validate directive is added to the input you want to validate and ensures that your input has the name attribute used to generate the error message. Then passed to the command string rules, including the pipe ‘|’ delimited list of validation rules. For example, for validation of the year of publication above, the required option is required, pubYear is required to indicate that the field must be in the year format (custom here, of course), digits:4, and the number length is 4. Want to combine these two rules, we specify the string value of required | pubYear | who: 4 v – validate the value of the expression.
data-vv-as:
When any error message is generated for this input, it will use the data-vV-as value instead of the actual field name. The default error message is in English. If you set this, the error message field name will indicate the data-vV-AS value
v-show=”errors.has(‘remark’)
The default error tag does not load
errors.first(‘remark’)
Gets the first error message about the current remark
Js:
<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 + 'Cannot be empty' },
}
}
})
VeeValidate.Validator.extend('isbn',{
getMessage: function () { return "Please enter the isBN number in the correct format" },
validate: function (value) { return/^[\d-]*$/.test(value); } }) VeeValidate.Validator.extend('pubYear', {
getMessage: function () { return "Please enter the correct year" },
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("Please enter complete recommendation information!")}); } } }) } </script>Copy the codeOk, so let’s read this code together
VeeValidate.Validator.localize('zh_CN');
Vue.use(VeeValidate);
Copy the code1, change the locale to zh_CN at noon, if you do not change the default prompt is English 2, install VeeValidate plug-in, also can understand the initialization
VeeValidate.Validator.localize({
zh_CN: {
messages: {
required: function (name) { return name + 'Cannot be empty'}}}})Copy the code#### note: the above code changes the default prompt, the name attribute plus can not be empty, that is, the mandatory non-empty judgment
VeeValidate.Validator.extend('isbn',{
getMessage: function () { return "Please enter the isBN number in the correct format" },
validate: function (value) { return/^[\d-]*$/.test(value); } }) VeeValidate.Validator.extend('pubYear', {
getMessage: function () { return "Please enter the correct year" },
validate: function (value) { return/^(19|20)\d{2}$/.test(value); }})Copy the code#### comments: modify the custom rule getMessage: prompt. Validate: the match rule, usually a regular.
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if(result) {// write the specific interface request alert("Successful recommendation!")
return;
}
alert("Please enter complete recommendation information!")}}Copy the code#### note: the above code creates a submit button event, listening to whether the options are filled in normally, to achieve verification
A complete verification application case to here has explained almost, partners can be applied according to their own actual situation in their own project, if you need to verify the case source code of the old iron, move to my github address :VeeValidate verification application (welcome ★star) if you need in-depth understanding, You can go to :VeeValidate