django+vue实现数据校验

{% load static %}
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{% static 'js/vue-2.5.16.js' %}">script>
    <script src="{% static 'js/jquery-1.12.4.min.js' %}">script>
    <title>Titletitle>

head>
<body>
<div id="app">
    <form action="" method="post">
        <h1>登录h1>
        <input type="text" name="username" v-model='username' @blur='usernames'>
        <span v-show="error_name" style="color: red">[[error_name_msg]]span>
        <input type="text" name="password" v-model='password' @blur='passwords'>
        <span v-show="error_pwd" style="color: red">[[error_pwd_msg]]span>
    form>
    <button @click="sub">登录button>
div>

<script>
    var app = new Vue({
        el: '#app',
        delimiters: ['[[', ']]'],
        data: {
            username: '',
            password: '',
            error_pwd: false,
            error_name: false,
            error_name_msg: '',
            error_pwd_msg: '',
        },
        methods: {
            usernames: function () {
                var re = /^[-_a-zA-Z0-9]{4,16}$/;
                if (re.test(this.username)) {
                    this.error_name = false;
                } else {
                    this.error_name = true;
                    this.error_name_msg = '请输入4到16位，有效用户名';
                }
            },
            passwords: function () {
                var re = /^[-_a-zA-Z0-9]{4,16}$/;
                if (re.test(this.password)) {
                    this.error_pwd = false;
                } else {
                    this.error_pwd = true;
                    this.error_pwd_msg = '请输入最少3位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符';
                }
            },
            sub: function () {
                this.usernames();
                this.passwords();
                var that = this
                if (this.error_pwd == false && this.error_name == false) {
                    $.ajax({
                        url: '{% url 'login' %}',
                        type: 'post',
                        data: {
                            username: that.username,
                            password: that.password,
                        },
                        success: function (resp) {
                            console.log(resp)
                            if (resp.code == 400) {
                                that.error_pwd = true;
                                that.error_pwd_msg = resp.msg;

                            }else {
                                location.href = {% url 'index' %}
                            }
                        }
                    })
                }

            }
        }
    })
script>
body>
html>
django+vue实现数据校验

相关

标签
