目的：使用Vue.js双向绑定实现用户交互和页面局部刷新的效果
步骤
1. 用户注册页面绑定Vue数据
- 准备盒子标签：首先使用
<div>标签将body里面的内容全部包裹。使vue.js的作用域为全部。
<div id="app">
<body>
......
</body>
</div>
-
对
post里面的细节进行操作：- 绑定用户名输入框：
v-model="username" - 然后对事件鼠标光标从框中消失焦点进行监听
@blur='check_username' - 由于用户名这里可能出现两种错误，因此需要控制两种展示方法。即
v-show="error_name"
<li> <label>用户名:</label> <input type="text" v-model="username" name="username" @blur="check_username" id="user_name"> <span class="error_tip" v-show="error_name">{ { error_name_message }}</span> </li> <li> <label>密码:</label> <input type="password" v-model="password" @blur="check_password" name="password" id="pwd"> <span class="error_tip" v-show="error_password">请输入8-20位的密码</span> </li> <li> <label>确认密码:</label> <input type="password" name="password2" v-model="password2" @blur="check_password2" id="cpwd"> <span class="error_tip" v-show="error_password2">两次输入的密码不一致</span> </li> <li> <label>手机号:</label> <input type="text" name="mobile" v-model="mobile" @blur="check_mobile" id="phone"> <span class="error_tip" v-show="error_mobile">{ { error_mobile_message }}</span> </li>- vue处理勾选信息
<li class="agreement"> <input type="checkbox" name="allow" v-model="allow" @change="check" id="allow"> <label>同意”在线商城用户使用协议“</label> <span class="error_tip" v-show="error_allow">请勾选用户协议</span> </li>- vue处理递交事件, 使用v-cloak解决渲染页面有延迟后，会将大胡子语法内容打印下来的问题(影响美观)。
<form method="post" class="register_form" @submit="on_submit" v-cloak>- 表单中如果是
post请求，django将会做后台验证，因此需要在form中增加一条：{ { csrf_input}}, 防止跨站请求伪造。否则由于安全机制，django后台框架将会报错。
- 绑定用户名输入框：
2. register.js实现用户交互
- 导入vue.js库和实现ajax的请求库
<script type="text/javascript" src="{
{ static('js/vue-2.5.16.js') }}"></script>
<script type="text/javascript" src="{
{ static('js/axios-0.18.0.min.js') }}"></script>
- 将
register.js绑定到register.html中
新建一个register.js 并将其绑定到register.html中：
<script type="text/javascript" src="{
{ static('js/register.js') }}"></script>
绑定html内容
由于需要同时使用到jinja2和vue.js, 因此需要重新定义vue.js读取变量的语法，这里将{
{ }}修改为[[ ]]。
let vm = new Vue({
// 通过id绑定
el: '#app',
// 修改Vue读取变量的语法
delimiters: ['[[', ']]'],
data: {
username: '',
password: '',
password2: '',
mobile: '',
allow: '',
error_name: false,
error_password: false,
error_password2: false,
error_mobile: false,
error_allow: false,
error_name_message: '',
error_mobile_message: '',
},
methods: {
// 校验用户名
check_username(){
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;
}
},
// 校验密码
check_password(){
let re = /^[0-9A-Za-z]{8,20}$/;
if (re.test(this.password)) {
this.error_password = false;
} else {
this.error_password = true;
}
},
// 校验确认密码
check_password2(){
if(this.password != this.password2) {
this.error_password2 = true;
} else {
this.error_password2 = false;
}
},
// 校验手机号
check_mobile(){
let re = /^1[3-9]\d{9}$/;
if(re.test(this.mobile)) {
this.error_mobile = false;
} else {
this.error_mobile_message = '您输入的手机号格式不正确';
this.error_mobile = true;
}
},
// 校验是否勾选协议
check_allow(){
if(!this.allow) {
this.error_allow = true;
} else {
this.error_allow = false;
}
},
// 监听表单提交事件
on_submit(){
this.check_username();
this.check_password();
this.check_password2();
this.check_mobile();
this.check_allow();
if(this.error_name == true || this.error_password == true || this.error_password2 == true
|| this.error_mobile == true || this.error_allow == true) {
// 禁用表单的提交
window.event.returnValue = false;
}
},
}
实现效果
由下图可知，该js文件套路书写正确：能达到预期效果。
