django_01项目 vue实现用户注册数据校验

vue实现用户登录前端数据校验

用户名前端校验

当用户输入用户名前端校验用户名的合法性

1）html

<div id="app">
    <form method="post" class="register_form" @submit="on_submit" v-cloak>
    #加入v-cloak表示页面加载完成再显示，防止页面未加载完显示vue数据标签
        {{ csrf_input }}
        <ul>
            <li>
                <label>用户名:</label>
                <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
                #v-model：双向数据绑定，监听用户的输入事件以更新vue中绑定的数据
                #@blur：v-on的简写，用于事件监听，在指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
                <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
                #v-show：它制作元素样式的显示和隐藏，元素一直是存在的。控制元素的display
            </li>
        </ul>
    </form>
</div>

2）js

let vm = new Vue({
    el: '#app', // 通过ID选择器找到绑定的HTML内容
    // 修改Vue读取变量的语法，默认为{{}}
    delimiters: ['[[', ']]'],
    
    data: { // 数据对象
        // v-model
        username: '',
        
        // v-show
        error_name: false,
    }
    
    methods: { // 定义和实现事件方法
        // 校验用户名
        check_username() {
            // 用户名是5-20个字符，[a-zA-Z0-9_-]
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 使用正则匹配用户名数据
            if (re.test(this.username)) {
                // 匹配成功，不展示错误提示信息
                this.error_name = false;
            } else {
                // 匹配失败，展示错误提示信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }
        }
        on_submit() {
            this.check_username();
            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true) {
                // 禁用掉表单的提交事件
                window.event.returnValue = false;
            }
        },
        
    }
});

Vue绑定页面的套路

1. 导入Vue.js库和ajax请求的库
2. 准备div盒子标签
3. 准备js文件
4. html页面绑定变量、事件等
5. js文件定义变量、事件等