使用Vue计算属性实时验证输入

Author Avatar
hayato 6月 17, 2017

这个案例实现了客户端实时数据同步，以及在输入的时候通过计算属性实时验证。

准备

本项目已托管在Github
在线地址email_verification

代码

<div id="app">
    <ul is="transition-group">
        <li v-for="user in users" class="user" :key="user['.key']">
            <span>{{user.name}} - {{user.email}}</span>
            <button v-on:click="removeUser(user)">X</button>
        </li>
    </ul>
    <form id="form" v-on:submit.prevent="addUser">
        <input type="text" v-model="newUser.name" placeholder="Username">
        <input type="email" v-model="newUser.email" placeholder="email@email.com">
        <input type="submit" value="Add User">
    </form>
    <ul class="errors">
        <li v-show="!validation.name">Name cannot be empty.</li>
        <li v-show="!validation.email">Please provide a valid email address.</li>
    </ul>
</div>

    let emailRE = /^(([^<>()[\]\\.,;:\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,}))$/;

    // Setup Firebase
    // Initialize Firebase
    const config = {
         apiKey: "AIzaSyAZc5fVRwzPxeV-oVLyyEkRvwfnYU-AFV4",
         authDomain: "excalibur-01.firebaseapp.com",
         databaseURL: "https://excalibur-01.firebaseio.com",
          projectId: "excalibur-01",
          storageBucket: "excalibur-01.appspot.com",
          messagingSenderId: "688446613330"
    };
    firebase.initializeApp(config);


    let db = firebase.database();
    let usersRef = db.ref('users');

    // create Vue app
    let app = new Vue({
        // element to mount to
        el: '#app',
        // initial data
        data: {
            newUser: {
                name: '',
                email: ''
            }
        },
        // firebase binding
        // https://github.com/vuejs/vuefire
        firebase: {
            users: usersRef
        },
        // computed property for form validation state
        computed: {
            validation: function (){
                return {
                    name: !!this.newUser.name.trim(),//双叹号强制转换为布尔值
                    email: emailRE.test(this.newUser.email)
                }
            },
            isValid: function () {
                let validation = this.validation;
                return Object.keys(validation).every(function (key) {
                    return validation[key]
                })
            }
        },
        // methods
        methods: {
            addUser: function () {
                if (this.isValid) {
                    usersRef.push(this.newUser);
                    this.newUser.name = '';
                    this.newUser.email = '';
                }
            },
            removeUser: function (user) {
                usersRef.child(user['.key']).remove()
            }
        }
    })

computed属性

computed中的validation属性会根据newUser返回一个Object，这个Object在isValid属性中被赋值给变量validation。

在属性isValid中，Objectkeys(validation)返回一个数组，对这个数组进行every()测试

    function (key) {
        return validation[key];
     }

当validation中的name和email的值都是true时，以上语句会返回true。

methods属性

methods中的两个方法都是vuefire api中常用方法。具体可以查文档。

本文参考了

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2017/06/17/使用Vue计算属性实时验证输入/