注册页面添加失去焦点事件

###前端代码

<template>   <div>     <!-- 获取表单中的数据 -->     <!-- 验证文本框输入的数据是否符合要求 当鼠标移开时判断是否符合 失去焦点事件 -->     <!-- 失去焦点事件 当鼠标在文本框时叫获取焦点事件 鼠标离开文本框叫失去焦点事件 -->     <!-- checkName是自己定义的时间名 -->     <p>         账户<input type="text" v-model="obj.ruser" @blur="checkName">         {{tip.name}}     </p>     <p>         密码<input type="text" v-model="obj.rpwd" @blur="checkPwd">         {{tip.pwd}}     </p>     <p>         手机<input type="text" v-model="obj.rphone" @blur="checkPhone">         {{tip.phone}}     </p>     <p><button @click="btn">注册</button></p>   </div> </template>
<script> import Axios from "axios" export default {     data(){         return{             obj:{                 ruser:"",                 rpwd:"",                 rphone:''             },             tip:{                 name:"",                 pwd:"",                 phone:""             }         }     },     methods:{         checkName(){             // 设定用户名规则 验证我们输入的用户名是否符合规范             // 规则:js正则表达式 和python中正则类似 正则:正确的规则             // 1.定义用户名的正则表达式             var nameReg=/^[a-zA-Z]\w{4,15}$/             // 2.验证输入的用户名obj.ruser是否符合规则 !不等于             // 函数如果不指明状态 一直都是undefined(不是错的)             if(!nameReg.test(this.obj.ruser)){                 // 如果验证失败                 this.tip.name='用户名格式不正确'                 // 指明状态                 return false             }             // 验证成功             this.tip.name="用户名格式正确"             return true         },         checkPwd(){             var pwdReg=/^[a-zA-Z]\w{4,15}$/             if(!pwdReg.test(this.obj.rpwd)){                 this.tip.pwd="密码格式不正确"                 return false             }             this.tip.pwd="密码格式正确"             return true         },         checkPhone(){             var phoneReg=/^1[3-9][0-9]{9}$/             if(!phoneReg.test(this.obj.rphone)){                 this.tip.phone="手机号格式不正确"                 return false             }             this.tip.phone="手机号格式正确"             return true         },         btn(){             // 判断用户名 密码 手机号是否验证成功 失败return             // 点击按钮向注册的接口发起请求 并携带参数             Axios.post("http://127.0.0.1:8000/register/",this.obj)             .then(result=>{                 console.log(result)                 // 如果code是407 用户名已存在                 if(result.data.code==407){                     alert(result.data.msg)                 }                 this.$router.push("/demo2")             }).catch(err=>{                 console.log(err)             })         }     } } </script>
<style>
</style> ###后端视图

class RegisterView(APIView):
    def post(self,request):
        user1=request.data.get("ruser")
        pwd1=request.data.get("rpwd")
        phone1=request.data.get("rphone")
        if Register.objects.filter(user=user1):
            return Response({"code":407,"msg":"用户名已存在"})
        Register.objects.create(user=user1,pwd=pwd1,phone=phone1)
        return Response("注册成功")

标签：用户名,return,tip,phone,添加,注册,obj,data,页面
来源： https://www.cnblogs.com/lwl66/p/16449915.html