html
<!DOCTYPE html>
<html lang="ja-jp">
{#12创建注册页面#}
{% load static %}
<head>
{# #15 编写注册页面#}
<meta charset="UTF-8">
<title>新規登録</title>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="{% static 'css/reset.css' %}">
<script src="{% static 'js/vue-2.5.16.js' %}"></script>
</head>
<body>
<script>
function check() {
if (form1.username.value == "") {
alert("ユーザIDを入力してください。");
form1.username.focus();
return;
}
else if (form1.password.value == "") {
alert("パスワードを入力してください。");
form1.password.focus();
return;
}else {
form1.submit();
}
}
</script>
<div class="register_con">
{# 左边内容#}
<div class="l_con fl">
<a href="{% url 'index' %}">
<img src="{% static 'img/mark.png' %}">
</a>
<div class="reg_slogan">WELCOME</div>
</div>
{# 右边布局#}
<div class="r_con fr">
{# 第一行的内容#}
<div class="reg_title clearfix">
<h1>新規登録</h1>
<a href="{% url 'login' %}">ログイン</a>
</div>
{# 表单的内容#}
<div id="app" class="reg_form clearfix">
<form method="post" @submit="on_submit">
{# csrf验证漏洞，固定格式#}
{% csrf_token %}
<ul>
<li>
{# 用户名#}
<label>会員ID</label>
<input type="text" name="username" id="username"
v-model="username" @blur="check_username">
<span class="error_tip" v-show="error_username">
[[error_username_message]]</span>
</li>
{# 密码#}
<li>
<label>パスワード</label>
<input type="password" name="password" id="password"
v-model="password" @blur="check_password">
<span class="error_tip" v-show="error_password">
[[error_password_message]]</span>
</li>
{# 确认密码#}
<li>
<label>チャック</label>
<input type="password"
v-model="confirm_password" @blur="confirm_check_password">
<span class="error_tip" v-show="error_confirm_password">
[[error_confirm_password_message]]</span>
</li>
{# 手机号#}
<li>
<label>電話番号</label>
<input type="text" name="phone" v-model="phone"
@blur="check_phone">
<span class="error_tip" v-show="error_phone">
[[error_phone_message]]</span>
</li>
{# 协议#}
<li class="agreement">
<input type="checkbox" name="allow" checked
v-model="allow" @blur="check_allow">
<label>規約に同意する</label>
<span class="error_tip" v-show="error_allow">
[[error_allow_message]]
</span>
</li>
<li class="reg_sub">
<input type="submit" value="登録">
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer no-mp">
<div class="foot_link">
<a href="">サービス</a>
<span>|</span>
<a href="">プライバシー</a>
<span>|</span>
<a href="">ヘルプ・お問い合わせ</a>
</div>
<p>Nintendo,Inc. All Rights Reserved.</p>
</div>
</body>
<script src="{% static 'js/register.js' %}"></script>
</html>
js
new Vue ({
el: '#app',
// vue显示数据的语法和django显示数据语法都是{{}}，避免冲突，修改成[[]]
delimiters: ['[[', ']]'],
data: {
username: '',//v-model数据双向绑定
error_username: false,
error_username_message: '',
password: '',
error_password: false,
error_password_message: '',
confirm_password: '',
error_confirm_password: false,
error_confirm_password_message: '',
phone: '',
error_phone: false,
error_phone_message: '',
allow: 'true',
error_allow: false,
error_allow_message: ''
},
methods: {
//失去焦点的方法
check_username: function () {
var re = /^\w{5,12}$/
//this vue对象访问data字段中的数据
if (re.test(this.username)) {
//满足不显示错误信息
this.error_username = false
} else {
this.error_username = true
this.error_username_message = '会員IDは5-12文字以上'
}
},
check_password: function () {
var re = /^\w{5,12}$/
//this vue对象访问data字段中的数据
if (re.test(this.password)) {
//满足不显示错误信息
this.error_password = false
} else {
this.error_password = true
this.error_password_message = 'パスワードは5-12文字以上'
}
},
//判断密码框和确认密码框是否一致
confirm_check_password: function () {
if (this.password != this.confirm_password){
//不相同
this.error_confirm_password = true
this.error_confirm_password_message='パスワードが不適切です'
}else {
//是相同，不显示错误信息
this.error_confirm_password = false
}
},
check_phone: function () {
// 090 080 开头
var re = /^0[89]0\d{8}$/
if (re.test(this.phone)){
this.error_phone = false
}else {
this.error_phone = true
this.error_phone_message='フォーマットが不適切です'
}
},
check_allow: function () {
if (this.allow){
//用户勾选协议
this.error_allow = false
}else {
this.error_allow = true
this.error_allow_message = '規約に同意する'
}
},
on_submit: function () {
//不满足其中一项 或运算
if (this.error_username == true || this.error_password||
this.error_allow ==true|| this.error_confirm_password ==true
||this.error_phone == true){
//禁止提交
window.event.returnValue = false
}
}
}
})JavaScrip里面的控制判断是""还是none所以
JavaScript获取input给它赋值
let input=.....'#input'
if (input===''||input===none){
//此处写弹窗内容
}
先看你是要在什么情况下触发,例如是在键盘弹起时
判断：
var inputText = document.getElementById("text");
inputText.onkeyup = function () {
if (inputText.value === "") {
alert("none");
}
}