Vue-verify — это простой плагин для проверки данных в Vue, совместимый с Vue.js 0.12.0+.
<script src="vue.min.js"></script>
<script src="vue-verify.js"></script>
<script>
Vue.use(vueVerify,options);
</script>
Создайте экземпляр Vue и вызовите $verify(rules) в хуке жизненного цикла created.
new Vue({
el: "#app",
data: {
name: null,
age: 0
},
created: function () {
//Vue.prototype.$verify(rules)
this.$verify({
name: {
required: true,
maxLength: 16
},
age: {
min: 15,
max: 80
}
})
}
})
Шаблонный код:
<div id="app">
<p>
<input v-model="name">
<template v-if="verify.name.$dirty">
<span v-if="verify.name.required">name reqiured</span>
<span v-if="verify.name.maxLength">please enter no more than 16 characters</span>
</template>
</p>
<p>
<input v-model="age">
<template v-if="verify.age.$dirty">
<span v-if="verify.age.min">age must greater than or equal to 16</span>
<span v-if="verify.age.max">age must smaller than or equal to 80</span>
</template>
</p>
<p>
<button type="button" v-if="verify.$dirty&&verify.$valid">submit</button>
</p>
</div>
new Vue({
...
created:function(){
this.$verify({
modelPath:{
//встроенные методы проверки:
required:true,//приоритет: 1
minLength:3,// приоритет: 2
maxLength:10,// приоритет: 3
min:1,//priority: 4
max:888,//priority: 5
pattern:"/^1[3578][0-9]{9}$/",//priority: 6
equalTo:"ABC"//priority: 7
}
})
}
})
Примечание: дополнительную информацию можно получить из примеров.
Vue.use(vueVerify, {
namespace: "validator",
methods: {
email: {
priority: 10,//по умолчанию 100
fn: function (val) {
//возвращает логическое значение
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
}
},
exist: function (val) {
//возвращает функцию обещания для асинхронной проверки
return function (resolve, reject) {
$.ajax({
url: "URL для проверки на стороне сервера",
data: {name: val},
success: function (json) {
json.valid ? resolve() : reject()
},
error: function (xhr) {
reject()
}
})
}
}
}
});
Также можно указать параметры проверки для экземпляра.
new Vue({
el: "#app",
data: {...},
created: function () {
this.$verify({...})
},
//указать параметры верификатора
verifier: options
})
По умолчанию — «verify». Нельзя указывать в параметрах экземпляра начиная с версии 0.6.0.
Указать пользовательские методы проверки.
Можно указать опции глобально через
Vue.use(vueVerify,options)
.
Результаты проверки можно сбросить с помощью метода $verifyReset()
экземпляра Vue.
npm install vue-verify --save-dev
var Vue = require("vue")
var VueVerify = require("vue-verify")
Vue.use(VueVerify)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )