{% 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>Title</title> </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>