弄了一个注册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号</title>
</head>
<body>
<div id="app">
<el-form :model="register" status-icon :rules="rules" ref="register" label-width="100px" class="demo-register">
<el-form-item label="用户名" prop="username">
<el-input v-model="register.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="register.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="register.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="register.name"></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="IDcard">
<el-input v-model.number="register.IDcard"></el-input>
</el-form-item>
<el-form-item label="来源" prop="source">
<el-input v-model="register.source"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addUser">提交</el-button>
<el-button @click="resetForm('register')">重置</el-button>
</el-form-item>
</el-form>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.register.checkPass !== '') {
this.$refs.register.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.register.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
register: {
username: '',
password: '',
checkPass: '',
name: '',
IDcard: ''
},
rules: {
password: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
}
};
},
methods: {
addUser(){
console.log(this.user);
//发送ajax请求，添加数据
axios({
method:"post",
url:"http://localhost:8080/InstrumentSharing/user/add",
data:_this.user
}).then(function (resp) {
if(resp.data == "success"){
//添加成功
//关闭窗口
_this.dialogVisible = false;
_this.$message({
message: '添加成功',
type:'success'
});
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})
</script>
</body>
</html>
