Что такое VeeValidate:
VeeValidate — это библиотека проверки для Vue.js, она имеет множество правил проверки и поддерживает пользовательские правила. Он основан на шаблонах, поэтому он похож и знаком с API проверки HTML5. Вы можете проверять ввод HTML5, а также пользовательские компоненты Vue. Он также создан с учетом локализации, на самом деле у нас есть около 44 языков, поддерживаемых и поддерживаемых замечательными членами сообщества.
Эта статья содержит VeeValidate, включая следующие приложения:
- 1. Базовая установка и использование
- 2. Поддержка локализации
- 3. Пользовательские правила и сообщения об ошибках
- 4. Проверка ввода HTML5 и настройка компонентов Vue
- 5. Унифицированная обработка кнопок отправки
Сначала посмотрите на эффект страницы:
Если вам нужен исходный код старого железа этого проверочного кейса, переходите на мой адрес github:Приложение для проверки VeeValidate(Добро пожаловать ★ звезда), может работать. Переходим к теме:
Базовая установка и использование
Использование VeeValidate поддерживает два способа: Один из них: npm/yarn (npm install vee-validate --save), Один из них: CDN.
На эту статью ссылаются в форме 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>
Примечание. Введены четыре файла js, первые два кратко упомянуты, а последние два — это файлы пакетов vee-validata и zh_CN для китайского языка.
часть html-страницы:
<div class="enroll" id="recommend-box">
<div class="title">请填写您要荐购的书籍信息：</div>
<div class="content">
<div class="info infoa">
<div class="group-input">
<span class="a">书 名：</span>
<input v-model="title" v-validate="'required'" data-vv-as="书名" type="text" name="title" placeholder="请输入推荐书名" />
</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">作 者：</span>
<input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="请输入作者" />
</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="出版社" type="text" name="publisher" placeholder="请输入出版社" />
</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="出版年" type="text" name="pubYear" placeholder="请输入出版年" />
</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="语言类型" type="text" name="type" placeholder="语言类型" />
</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">ISBN号：</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>
<textarea v-model="remark" v-validate="'max:200'" data-vv-as="推荐理由" type="text" name="remark" placeholder="请输入推荐理由"></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>
</div>
Примечание. Сюда входят следующие знания VeeValidate:
1. В теге input/textareav-подтвердить, данные-vv-как, имяАтрибуты. (v-model здесь двусторонняя привязка, которой удобно передавать эти параметры в запрос интерфейса, так что особо не буду вводить) 2. В метке сообщения об ошибкеv-show="errors.has('remark')"и **{{ errors.first('remark') }}**
v-validate:
Добавьте директиву v-validate к входным данным, которые вы хотите проверить, и убедитесь, что ваши входные данные имеют атрибут имени, используемый для генерации сообщения об ошибке. Затем передайте директиве строку правил, содержащую список правил проверки, разделенных вертикальной чертой '|'. такие как вышеГод публикацииДля проверки копий используйтеrequiredЭта опция обязательна,pubYearЧтобы указать, что поле должно быть в формате (тут, конечно, быть настроенным), цифры: 4, четыре цифры в длину. Чтобы совместить эти два правила, нам требуется указать строковое значение |pubYear|digits: значение v-validate выражения 4.
data-vv-as:
При создании любого сообщения об ошибке для этого ввода оно будет использовать это значение data-vv-as вместо фактического имени поля, все сообщения об ошибках по умолчанию будут на английском языке, если вы установите это, имя поля сообщения об ошибке будет запрашивать данные. vv-как значение
v-show="errors.has('remark')
Метка сообщения об ошибке по умолчанию не загружена
errors.first('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 + '不能为空' },
}
}
})
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);
####Примечание. Этот приведенный выше код означает1. Измените язык на zh_CN полдень, если вы не меняете приглашение по умолчанию на английском языке. 2. Установите плагин VeeValidate, что также можно понимать как инициализацию
VeeValidate.Validator.localize({
zh_CN: {
messages: {
required: function (name) { return name + '不能为空' },
}
}
})
####Примечание: приведенный выше код изменяет приглашение по умолчанию, атрибут name plus не может быть пустым, то есть непустое суждение о необходимых элементах
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); }
})
####Примечание. Измените пользовательские правила в приведенном выше коде. getMessage : Подсказка. validate: это правило сопоставления, обычно простое.
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
//这里写具体的接口请求
alert("推荐成功！")
return;
}
alert("请输入完整推荐信息！")
}
}
####Примечание. Приведенный выше код создает событие кнопки отправки, отслеживает правильность заполнения параметров и выполняет проверку
Полный случай применения проверки был объяснен здесь, Друзья могут применить его в своих проектах в соответствии со своей реальной ситуацией. Если вам нужно проверить старое железо исходного кода корпуса, переходите на мой адрес github:Приложение для проверки VeeValidate(Добро пожаловать ★ звезда) Если вам нужно более глубокое понимание, вы можете перейти к:Официальный сайт VeeValidate