Vue实现 用户注册功能的实现
**************************************Start**********************************************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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, //立的falg 当每个输入框的验证正确后就改为true
userpwdFlag: false, //立的falg
usertelFlag: false //立的falg
},
methods: {
register() {
if (this.userpwdFlag && this.usernameFlag && this.usertelFlag) { //判断三个注册框中的数据是否都为true
//如果都正确说明可以提交数据了 ,这里我用的是原生的ajax,并没有用封装的
var xhr = new XMLHttpRequest();
xhr.open("get",
`http://127.0.0.1/lesson02/register.php?username=${this.username}&userpwd=${this.userpwd}&usertel=${this.usertel}`
);
xhr.send();
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>
***************************************END**********************************************
***********************************Start**************************************************
这是 config.php页面的程序
<?php
@header("Access-Control-Allow-Origin:*"); //解决跨域问题
mysql_connect("localhost:3306","root","root"); //连接数据的主机 用户名和密码
mysql_select_db("2001"); //连接的数据库
?>
*************************************END***********************************************
**************************************Start***********************************************
这是 注册页面提交的数据处理页面
<?php
@require_once("config.php"); //引入config.php页面的代码
$username = $_GET["username"]; //接受前端页面传过来的数据
$userpwd = $_GET["userpwd"]; //接受前端页面传过来的数据
$usertel = $_GET["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);//输出最终的结果
?>
vue的ajax--Get方式请求之用户注册
最新推荐文章于 2023-05-27 20:53:41 发布