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

###前端代码

<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("注册成功")