vue的ajax--模拟formDate方式请求之用户注册

最新推荐文章于 2024-04-02 04:04:01 发布

经年未远

最新推荐文章于 2024-04-02 04:04:01 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/qq_42628504/article/details/106793814

版权


 Vue模拟form实现用户注册
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之post方式注册</title>
    <script src="js/vue.js"></script>
    <style>
        .error {
            color: red
        }

        .success {
            color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        用户名:<input v-model="username" placeholder="长度6到12位字母数字组成首字母不能是0"><span
            :class="usernameclass">{{usernametip}}</span> <br />
        密码:<input v-model="userpwd" placeholder="长度6到10位数字字母组成">
        <span :class="userpwdclass">{{userpwdtip}}</span><br />
        电话:<input v-model="usertel" placeholder="常用的11位手机号">
        <span :class="usertelclass">{{userteltip}}</span><br />
        <button @click="register">注册</button>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            username: "",
            userpwd: "",
            usertel: "",
            usernametip: "*",
            userpwdtip: "*",
            userteltip: "*",
            usernameclass: "error",
            userpwdclass: "error",
            usertelclass: "error",
            usernameFlag: false,
            userpwdFlag: false,
            usertelFlag: false
        },
        methods: {
            register() {
                if (this.userpwdFlag && this.usernameFlag && this.usertelFlag) {



                    /**********************此处代码是模拟formdata代替post请求头************************************/
                    var formData = new FormData();
                    formData.append("username", this.username);
                    formData.append("userpwd", this.userpwd);
                    formData.append("usertel", this.usertel);
                    /**********************此处代码是代替post请求头************************************/
                    var xhr = new XMLHttpRequest();

                    xhr.open("post", `http://127.0.0.1/lesson02/register1.php`);

                    // xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                    /**********************此处代码是代替post请求头************************************/
                    xhr.send(formData);
                    /**********************此处代码是代替post请求头************************************/
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var result = xhr.responseText;
                            var obj = JSON.parse(result);
                            if (obj.code == 1) {
                                window.location.href = "login.html";
                            } else {
                                alert(obj.msg);
                            }
                        }
                    }
                } else {
                    alert("失败 请注意红色提示");
                }
            },
            checkContentByReg(reg, content, tip, classname) {
                if (reg.test(content)) {
                    this[tip] = "√";
                    this[classname] = "success";
                    return true;
                } else {
                    this[tip] = "请检查格式";
                    this[classname] = "error";
                    return false;
                }
            }
        },
        watch: {
            username: function (content) {
                var reg = /^[1-9a-z][0-9a-z]{5,11}$/ig;
                this.usernameFlag = this.checkContentByReg(reg, content, "usernametip", "usernameclass")
            },
            userpwd: function (content) {
                var reg = /^[0-9a-z]{6,10}$/ig;
                this.userpwdFlag = this.checkContentByReg(reg, content, "userpwdtip", "userpwdclass");
            },
            usertel: function (content) {
                var reg = /^1[356789][0-9]{9}$/ig;
                this.usertelFlag = this.checkContentByReg(reg, content, "userteltip", "usertelclass");
            }
        }
    })
</script>

</html>


*******************************************************************************************

<?php
@require_once("config.php");

$username  = $_POST["username"];

$userpwd  = $_POST["userpwd"]; 

$usertel = $_POST["usertel"];

//2:选择数据*
$sql1 = "select count(*) from  userinfo where username='$username' or usertel = '$usertel'";
$resultList =mysql_query($sql1);//是结果集
$item = mysql_fetch_array($resultList);//获取里面的第一条数据

$result = array();
if($item[0]>0){//表示用户名存在
    $result["code"]=0;
    $result["msg"]="表示该用户名或者手机号已存在";
}else{
    //用户名不存在
    //做刚才的新增
    $sql = "insert into  userinfo(username,userpwd,usertel)  values('$username','$userpwd','$usertel')";
    //3:准备好sql语句
    mysql_query($sql);
    //4:执行
    $count = mysql_affected_rows();
    //5:受影响的行数
    if($count>0){
       $result["code"] = 1;
       $result["msg"] ="成功";
    }else{
       $result["code"] =0;
       $result["msg"] = "失败";
    } 
}

echo  json_encode($result);//输出最终的结果
?>

经年未远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的ajax--模拟formDate方式请求之用户注册

Vue模拟form实现用户注册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue之post方式注册</title> <script src="j..
复制链接

扫一扫