Vue 表单验证

此示例是一个用 Vue 验证表单字段的示例。

表单外观如下图。

register.html代码如下：

    
    
    
    
    
    
    




    
注册页面
    

        

            用户名：

            
            [[ username_msg ]]
            

            密码：

            
            [[ pwd_msg ]]
            

            确认密码：

            
            [[ cpwd_msg ]]
            

            手机号：

            
            [[ phone_msg ]]
            

            
            同意协议
            [[ allow_msg ]]

            
        
    
    

register.js代码如下：

var vm = new Vue({
    el:'#app',
    delimiters:['[[', ']]'],
    data:{
        host:host,
        // 这里对应v-show
        vshow_username:false,
        vshow_pwd:false,
        vshow_cpwd:false,
        vshow_phone:false,
        vshow_allow:false,
        // 这里对应错误信息
        username_msg:'',
        pwd_msg:'',
        cpwd_msg:'',
        phone_msg:'',
        allow_msg:'',

        // 这里的变量对应v-model
        vmodel_username:'',
        vmodel_password:'',
        vmodel_cpwd:'',
        vmodel_phone:'',
        vmodel_allow:true
    },
    methods:{
        // 这里对应@blur
        blur_username:function(){
            // 检查正则匹配
            var re_username = /^[a-zA-Z0-9_-]{5,20}$/;
            if(re_username.test(this.vmodel_username)){
                this.vshow_username = false;
            }
            else{
                this.username_msg = '不符合正则：^[a-zA-Z0-9_-]{5,20}$';
                this.vshow_username = true;
            }
        },
        blur_pwd:function(){
            // 检查正则匹配
            var re_pwd = /^[0-9A-Za-z]{8,20}$/;
            if(re_pwd.test(this.vmodel_password)){
                this.vshow_pwd = false;
            }
            else{
                this.pwd_msg = '不符合正则：^[0-9A-Za-z]{8,20}$';
                this.vshow_pwd = true;
            }
        },
        blur_cpwd:function(){
            // 检查是否与password一样
            if(this.vmodel_password == this.vmodel_cpwd){
                this.vshow_cpwd = false;
            }
            else{
                this.cpwd_msg = 'pwd!=cpwd';
                this.vshow_cpwd = true;
            }
        },
        blur_phone:function(){
            // 检查正则
            var re_phone = /^1[345789]\d{9}$/;
            if(re_phone.test(this.vmodel_phone)){
                this.vshow_phone = false;
            }
            else{
                this.phone_msg = '不符合正则：^1[345789]\d{9}$';
                this.vshow_phone = true;
            }
        },


    }
});

v-model可以实时接收input标签中填入的值。在本示例中，vue对象获取v-model可以获取填入input中的值，然后进行验证。

结果如图：