<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="/layui-2.42/css/layui.css">
<link rel="stylesheet" href="/element-ui/2.13.2/theme-chalk/index.css">
<style>
.el-input {
width: 30%;
}
</style>
</head>
<body>
<div id="app">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="10%" class="demo-ruleForm">
<el-form-item label="用户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
<shanyou></shanyou>
</div>
<script type="text/javascript" src="/layui-2.42/layui.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="/element-ui/2.13.2/index.js"></script>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/axios.js"></script>
<script>
var Main = {
data() {
return {
ruleForm: {
name: '',
pass: '',
checkPass: ''
},
rules: {
name: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
],
pass: [
{validator: validatePass, trigger: 'blur', required: true}
],
checkPass: [
{validator: validatePass2, trigger: 'blur', required: true}
]
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//不用qs 也可以 可以用一种原生的方法
//new URLSearchParams() 进行处理
//URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
//出来的结果和 qs 转换过一样
//var data = new URLSearchParams() ;
//data.append('time', 11111111); // 添加数据
var data = new URLSearchParams();
data.append("userName","");
axios.post("/user/userCheck", data, {
headers: {
'C': 'application/x-www-form-urlencoded'
}
}).then(function (response) {
if (response.data === true) {
alert('用户已存在,请登录');
parent.location.href = "/user/login";
}
}).catch(function (error) {
console.log(error);
});
var data = new URLSearchParams();
data.append("userName",this.ruleForm.name);
data.append("passWord",this.ruleForm.pass);
axios.post("/user/userSave", data, {
headers: {
'C': 'application/x-www-form-urlencoded'
}
}).then(function (response) {
if (response.data.code === '200') {
alert('注册成功');
parent.location.href = "/user/login";
} else {
parent.location.href = "/user/register";
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}, cancel() {
parent.location.href = "/";
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>
axios要在上一个请求结束再请求
不然获取不到值