1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/tai-vue-verify

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Введение

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
})

Namespace

По умолчанию — «verify». Нельзя указывать в параметрах экземпляра начиная с версии 0.6.0.

methods

Указать пользовательские методы проверки.

Можно указать опции глобально через Vue.use(vueVerify,options).

Сброс

Результаты проверки можно сбросить с помощью метода $verifyReset() экземпляра Vue.

Применение в nodejs

npm install vue-verify --save-dev
var Vue = require("vue")
var VueVerify = require("vue-verify")
Vue.use(VueVerify)

Лицензия

Apache-2.0

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Плагин для валидации в Vue. Развернуть Свернуть
Apache-2.0
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/tai-vue-verify.git
git@api.gitlife.ru:oschina-mirror/tai-vue-verify.git
oschina-mirror
tai-vue-verify
tai-vue-verify
master