【转】注册页面的写法

最新推荐文章于 2023-10-12 20:52:37 发布
最新推荐文章于 2023-10-12 20:52:37 发布
阅读量313 收藏
点赞数

前端页面代码： 

@model aiyuepai.Account_t

<link href="~/Content/Login/Register.css" rel="stylesheet" />

<div id="app">
    <div id="successful">
        <h3 style="text-align: center;margin-top: 80px;margin-bottom: 40px;">注册成功，快去登录吧!</h3>
        <button id="btn" v-on:click="close">取消</button>
        <button v-on:click="login" id="btn">登录</button>
    </div>

    <div class="now_login">我已注册，现在就<button class="btd_login" v-on:click="login">登录</button></div>

    <div id="app1">
        <form action="@Url.Action("Register")" method="post">
            <label>用户名</label><input type="text" placeholder="请设置用户名" v-model="userInfo.user" class="input" onblur="a()"><br>
            <span class="tiShi">{{tiShi.tishi1 }}</span><br>
            <label>设置密码</label><input type="password" placeholder="请设置登录密码" v-model="userInfo.password1" class="input" onblur="b()"><br>
            <span class="tiShi">{{ tiShi.tishi2 }}</span><br>
            <label>确认密码</label><input type="password" v-model="userInfo.password2" class="input" onblur="c()"><br>
            <span class="tiShi">{{ tiShi.tishi3}}</span><br>
            <label>真实姓名</label><input type="text" v-model="userInfo.name" class="input" onblur="d()"><br>
            <span class="tiShi">{{ tiShi.tishi4}}</span><br>
            <label>手机号</label><input type="text" placeholder="请输入手机号码" v-model="userInfo.num" class="input" onblur="e()"><br>
            <span class="tiShi">{{ tiShi.tishi5}}</span><br>
            <label>家庭住址</label><textarea rows="5" cols="26" placeholder="请输入您的家庭住址" v-model="userInfo.address" onblur="f()"></textarea><br>
            <span class="tiShi">{{ tiShi.tishi6}}</span><br>
            <div class="checkbox"><input type="checkbox" style="margin-right: 10px;" v-model="userInfo.checkbox">阅读并接受<a href="">《xxx用户协议》</a></div>
            <input type="text" id="test" name="test" value="美女" />
            <button type="submit" id="btd" v-on:click="flag" v-bind:disabled="btn">立即注册</button>
        </form>
    </div>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isReturn: false,
            btn: false,
            test: 222,
            tiShi: {
                tiShi1: '',
                tishi2: '',
                tishi3: '',
                tishi4: '',
                tishi5: '',
                tishi6: '',
            },
            userInfo: {
                user: '',
                password1: '',
                password2: '',
                num: '',
                name: '',
                address: '',
                checkbox: true,
            },
            userArr: []
        },
        methods: {
            //用户名
            a() {
                this.tiShi.tishi1 = '';
                this.isReturn = true;
                var a = /^[a-z]+$/;//小写字母组成
                if (!this.userInfo.user) this.tiShi.tishi1 = '用户名不能为空';
                else if (!a.test(this.userInfo.user)) {
                    this.isReturn = true;
                    this.tiShi.tishi1 = "由小写字母组成"
                }
            },
            //密码
            b() {
                this.tiShi.tishi2 = '';
                this.isReturn = true;
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password1) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = '密码不能为空';
                }
                else if (!p.test(this.userInfo.password1)) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = "由字母+数字组成，字母开头"
                }
            },
            //第二遍密码
            c() {
                this.tiShi.tishi3 = '';
                this.isReturn = true;
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password2) {
                    this.isReturn = true;
                    this.tiShi.tishi3 = '密码不能为空';
                }
                else if (!p.test(this.userInfo.password2)) {
                    this.isReturn = true;
                    this.tiShi.tishi3 = "由字母+数字组成，以字母开头"
                }
                if (this.userInfo.password1 != this.userInfo.password2) {
                    this.isReturn = true;
                    this.tiShi.tishi3 = '两次密码不一致';
                }
            },
            //真实姓名
            d() {
                this.tiShi.tishi4 = '';
                this.isReturn = true;
                if (!this.userInfo.name) this.tiShi.tishi4 = '姓名不能为空'; this.isReturn = true;
            },
            //手机号
            e() {
                this.tiShi.tishi5 = '';
                this.isReturn = true;
                var n = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                if (!this.userInfo.num) {
                    this.tiShi.tishi5 = '手机号不能为空';
                    this.isReturn = true;
                }
                else if (!n.test(this.userInfo.num)) { this.tiShi.tishi5 = '手机号码格式不正确'; this.isReturn = true; }
            },
            //家庭住址
            f() {
                this.tiShi.tishi6 = '';
                this.isReturn = true;
                if (!this.userInfo.address) { this.tiShi.tishi6 = '请输入您的家庭住址'; this.isReturn = true; }
            },
            flag() {
                //alert(1)
                this.tiShi.tishi1 = '';
                this.tiShi.tishi2 = '';
                this.tiShi.tishi3 = '';
                this.tiShi.tishi4 = '';
                this.tiShi.tishi5 = '';
                this.tiShi.tishi6 = '';
                this.isReturn = false;
                //用户名
                var a = /^[a-z]+$/;//小写字母组成
                if (!this.userInfo.user) {
                    this.tiShi.tishi1 = '用户名不能为空';
                    this.isReturn = true;
                }
                else if (!a.test(this.userInfo.user)) {
                    this.isReturn = true;
                    this.tiShi.tishi1 = "由小写字母组成"
                }
                if (window.localStorage.userArr) {
                    var array = JSON.parse(window.localStorage.userArr);
                } else { array = [] }
                //遍历数组进行匹配
                for (var i = 0; i < array.length; i++) {
                    //判断是否有相同账号
                    console.log(array)
                    /*alert(array[i].username)*/
                    if (this.userInfo.user == array[i].username) {
                        alert('该账号已存在');
                        /*this.tiShi.tiShi1='该账号已存在';*/
                        return;
                    }
                }

                //字母开头 ，由字母+数字组成
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password1) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = '密码不能为空';
                }
                else if (!p.test(this.userInfo.password1)) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = "由字母+数字组成，字母开头"
                }
                //确认密码
                if (!this.userInfo.password2) {
                    this.isReturn = true;
                    this.tiShi.tishi3 = '密码不能为空';
                }
                else if (!p.test(this.userInfo.password2)) {
                    this.isReturn = true;
                    this.tiShi.tishi3 = "由字母+数字组成，以字母开头"
                }
                if (this.userInfo.password1 != this.userInfo.password2) {
                    this.isReturn = true;
                    this.tiShi.tishi3 = '两次密码不一致';
                }
                //姓名
                if (!this.userInfo.name) this.tiShi.tishi4 = '姓名不能为空'; this.isReturn = true;
                //手机号
                var n = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                if (!this.userInfo.num) {
                    this.tiShi.tishi5 = '手机号不能为空';
                    this.isReturn = true;
                }
                else if (!n.test(this.userInfo.num)) { this.tiShi.tishi5 = '手机号码格式不正确'; this.isReturn = true; }
                //家庭住址
                if (!this.userInfo.address) { this.tiShi.tishi6 = '请输入您的家庭住址'; this.isReturn = true; }
                //同意协议
                if (this.userInfo.checkbox != true) { this.btn = false; alert('是否同意该协议'); this.isReturn = true; return }
                //如果有这些提示就return
                if (this.tiShi.tishi || this.tiShi.tishi2 || this.tiShi.tishi3 || this.tiShi.tishi4 || this.tiShi.tishi5 || this.tiShi.tishi6) return;
                //if (this.isReturn) return;
                var box = document.getElementById("successful");
                box.style.display = 'block';
                //创建对象
                var obj = { username: this.userInfo.user, password: this.userInfo.password1, number: this.userInfo.num, name: this.userInfo.name, address: this.userInfo.address, }

                array.push(obj);
                window.localStorage.userArr = JSON.stringify(array);//把内容转换成字符串形式
                /*userInfo =JSON.stringify(window.localStorage.userArr)*/
                localStorage.setItem('userArr', window.localStorage.userArr);
               
                // window.location.href='../登录/登录页面.html';
            },
            login() {
                window.location.href = "Login";
            },
            close() {
                var box = document.getElementById("successful");
                box.style.display = "none";
            }

        }
    })


</script>

前端样式：

*{
    margin: 0px;
    padding: 0px;
}

a {
    color: black;
    text-decoration: none;
}

body {
    font-family: "宋体";
    background: url(images/2.jpg) no-repeat;
    background-size: 100%;
    color: black;
}

.now_login {
    font-size: 14px;
    float: right;
}

.btd_login {
    height: 38px;
    width: 50px;
    border: 1px solid silver;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

#app1 {
    width: 300px;
    margin: 100px auto;
}

label {
    display: inline-block;
    width: 70px;
    height: 38px;
    text-align: center;
}

.tiShi {
    font-size: 12px;
    color: red;
    margin: 0 0 10px 70px;
}

.input {
    width: 200px;
    height: 38px;
    border-radius: 4px;
}

textarea {
    resize: none;
    border-radius: 4px;
}

.checkbox {
    font-size: 14px;
    margin-left: 20px;
}

#btd {
    width: 270px;
    height: 38px;
    border-radius: 5px;
    background: #5B8020;
    border: 1px solid silver;
    color: white;
    font-size: 18px;
    cursor: pointer;
    margin-top: 10px;
}

#successful {
    width: 300px;
    height: 200px;
    border: 1px solid silver;
    position: fixed;
    left: 50%;
    bottom: 50%;
    background: #D8D8D8;
    display: none;
}

#btn {
    width: 50px;
    height: 30px;
    display: inline-block;

    
    margin-right: 15px;
}

 

 

子龙之枪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如何轻松的写一个注册网页？
yeao_naiwohe的博客
06-04 569
因为注册网页有点像列表的样子，所以我们采用列表标签来完成设计， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia.
用js编写简单的注册页面
qq_41380430的博客
09-10 8058
用js编写简单的注册页面 效果图 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;
注册页面的编写
weixin_30633949的博客
09-16 173
简易注册页面 <!doctype html><html><head><meta charset="utf-8"><title>Register Form</title></head> <body><!-- 居中--> <center><!-- 欢迎行--><h...
HTML基础学习（二）---注册页面书写
知有的博客
06-28 1953
HTML基础学习（二）注册页面基本内容1.页面标题2.注册后跳转页面到index.html3.用户名、密码、确认密码4.手机号、邮箱5.性别6.爱好7.所在城市8.用户协议9.注册 查看网页源代码：F12 附百度彩蛋： 注册页面基本内容 1.页面标题 <title>BLM(BLM.COM)-及时配送，宅男必备，饱了么等你加入！</title> 2.注册后跳转页面到ind...
css 文本图标对齐与定位二三事
qq_27084325的博客
08-15 273
文本图标对齐与定位二三事 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } a { color: #50B6E5; } .constr { width: 1200px; margin-left: auto; margin-right: auto; } .regist-head { he
前端登录注册页面html代码（4套珍藏）
12-01
4套好看的登录注册页面，有账号密码登录的，也有手机号邮箱登录的样式，其中有三套是自适应移动端的，平时在做网站登录注册时可以拿来用，也可以用来练习一下html前端代码的写法。总之比较实用，免费推荐给大家。
注册验证的写法
03-21
利用javascript页面技术实现注册登录验证
MySql网络验证登陆注册源码 带MD5写法
06-01
在这个源码中，"MySql网络验证登陆注册源码 带MD5写法" 提供了一种实现用户登录注册功能的方式，它涉及到的主要知识点包括MySQL数据库操作、网络编程以及密码安全处理。 1. **MySQL数据库操作**： - 数据库设计：...
JavaScript中点击事件的写法
10-22
DOM2级事件处理提供了更灵活的事件注册和移除方式，支持添加多个事件监听器，并且可以控制事件冒泡。 ```javascript btn.addEventListener('click', function() { alert('hello world'); }, false); btn....
ASP.NET 页面中加添加用户控件的写法
01-02
一：在页面前台中添加注册控件 代码如下: <%@ Register Src=”~/Controls/IndexTop.ascx” TagName=”IndexTop” TagPrefix=”uc_top” %> 二：在页面需要添加控件的地方添加控件内容 代码如下: ”IndexTop1...
关于注册登录写法
u011614679的博客
12-21 1097
配置好相关的实体类 我们要明确请求方式，请求路径，请求参数，返回类型 请求方式是get 后面是路径，有2个参数，返回布尔类型 1:@RestController,注入service. 2:因为请求方式是GET请求所以我们用@GETMapping后面跟上路径 3：因为请求参数是都是占位符所以使用@PathVariable（“占位符名字”）声明参数的类型 参数名 4：直接返回ok，在里面调用ser...
编写登陆与注册界面
最新发布
m0_75073812的博客
10-12 2949
注册登陆页面，使用JSP 指令和动作标签，request等内置对象。
web前端——表单注册页面设计（注册信息）
weixin_65997960的博客
03-18 4853
在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入。除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；个选项，默认选择“成都”；
使用原生js写一个简单的注册登录页面
一步一个脚印，踏实努力，向着目标前进
07-04 4225
在register()函数中，我们通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。在login()函数中，我们也是通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。需要注意的是，上述代码只是一个简单的示例，没有进行实际的注册和登录操作。在实际的应用中，我们需要将注册和登录的逻辑与后端服务器进行交互，进行真正的注册和登录操作。在注册和登录函数中，我们分别获取注册和登录表单中的用户名和密码，并进行相应的处理。// 切换到登录页面。
HTML实现简单的注册页面
oiadkt的博客
03-07 6218
使用HTML实现一个简单的注册页面
【Java 进阶篇】Java Web 编写注册页面案例
繁依Fanyi的博客
10-11 3091
注册页面是许多Web应用程序的关键组成部分，它允许用户创建自己的账户，以便访问应用程序的功能。在这个示例中，我们将创建一个简单的注册页面，涵盖了用户提供的基本信息，如用户名、密码和电子邮件地址。通过这个详细的教程，你现在应该能够创建一个基本的Java Web注册页面，包括HTML表单、CSS样式、Servlet处理和数据库连接。请记住，实际的应用可能需要更多的安全性、错误处理和数据验证，但这个示例可以帮助你入门Web开发中的关键概念。希望你能够继续学习和改进这个示例，以创建更复杂和功能强大的Web应用程序。
超详细编写登录注册页面（内含验证码登录）
热门推荐
m0_57448314的博客
04-21 1万+
登录、注册、验证码的代码都有，并且详细讲解。
制作注册页面（HTML）
wujianrenn的博客
10-23 9659
本项目考察的是对于表格、列表（无序）、表单标签的综合运用，首先我们要写把这个整体看做是一个大表格，每行两列，分很多行我们的所有步骤都是基于一个表格每行两列的情况下，开始的所以我们可以先写出整个大框架，一个大表格，之后再往里面细填东西。
vue2 登录注册写法完整代码展示
06-13
以下是一个简单的 Vue 2 登录注册页面的完整代码展示。其中使用了 Vue Router 管理路由，使用了 Vuex 管理状态，使用了 axios 发送网络请求。 ```html <template> <div> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> </template> <script> import Vue from 'vue'; import VueRouter from 'vue-router'; import Vuex from 'vuex'; import axios from 'axios'; Vue.use(VueRouter); Vue.use(Vuex); const routes = [ { path: '/login', component: { template: ` <div> <h2>登录</h2> <form @submit.prevent="login"> <label> 用户名： <input v-model="username" type="text" required> </label> <label> 密码： <input v-model="password" type="password" required> </label> <button type="submit">登录</button> </form> </div> `, data() { return { username: '', password: '', }; }, methods: { async login() { try { const response = await axios.post('/api/login', { username: this.username, password: this.password, }); this.$store.commit('login', response.data); this.$router.push('/'); } catch (error) { window.alert('登录失败，请检查用户名和密码是否正确。'); } }, }, }, }, { path: '/register', component: { template: ` <div> <h2>注册</h2> <form @submit.prevent="register"> <label> 用户名： <input v-model="username" type="text" required> </label> <label> 密码： <input v-model="password" type="password" required> </label> <button type="submit">注册</button> </form> </div> `, data() { return { username: '', password: '', }; }, methods: { async register() { try { const response = await axios.post('/api/register', { username: this.username, password: this.password, }); this.$store.commit('login', response.data); this.$router.push('/'); } catch (error) { window.alert('注册失败，请检查用户名是否已经被注册。'); } }, }, }, }, ]; const router = new VueRouter({ routes, }); const store = new Vuex.Store({ state: { user: null, }, mutations: { login(state, user) { state.user = user; }, logout(state) { state.user = null; }, }, }); const app = new Vue({ router, store, }).$mount('#app'); </script> ``` 在这个例子中，我们使用了 Vue Router 来管理路由，使用了 Vuex 来管理状态。在登录和注册页面中，我们使用了 axios 发送网络请求。在登录成功和注册成功时，我们使用 Vuex 中的 mutations 来更新用户状态，并使用 Vue Router 跳转到首页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值