JS写个网易云音乐注册页面
时间: 2023-08-12 17:10:07 浏览: 66
以下是一个简单的网易云音乐注册页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网易云音乐注册</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" label-width="80px" class="form">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="form.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">注册</el-button>
</el-form-item>
</el-form>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
form: {
email: '',
password: '',
confirmPassword: ''
}
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('注册成功');
} else {
alert('表单验证失败');
return false;
}
});
}
}
});
</script>
</body>
</html>
```
这个页面使用了 Vue.js 和 Element UI 框架来构建。
在这个页面中,用户需要输入邮箱、密码和确认密码来注册网易云音乐账号。使用 Element UI 的表单组件来实现输入框和提交按钮,同时使用表单验证来确保用户输入的信息符合要求。如果表单验证通过,则会提示注册成功。