vue和mui一起完成登录页面（在hbuilder编辑器）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title>vue做登录页面</title>

		<link href="css/mui.min.css" rel="stylesheet" />

		<link rel="stylesheet" href="font_319767_xof0t45qf9qhyqfr/iconfont.css" />

		<style>

			#app {

				background: #ffcc33;

				width: 100%;

				padding: 20px;

			}

			.content {

				width: 100%;

				background: #ff6666;

				padding: 20px;

			}

			.form-group {

				position: relative;

				width: 100%;

				height: 45px;

				margin-bottom: 10px;

			}

			label {

				position: absolute;

				left: 8px;

				top: 10px;

			}

			label i {

				color: #ff6666;

			}

			.iconfont {

				font-size: 24px;

			}

			.form-group input {

				margin-bottom: 0;

				padding-left: 40px;

			}

			.form-group:nth-child(4) input{

				width: 60%;

			}

			.mui-btn-warning {

				float: right;

				width: 35%;

				height: 40px;

				font-size: 16px;

			}

			.mui-btn-primary {

				width: 100%;

				height: 40px;

				font-size: 16px;

				border-radius: 5px;

			}

		</style> 

	</head>

	<body>

		<div id="app">

			<div class="content">

				<div class="form-group">

					<label>

						<i class="iconfont icon-yonghurenzheng"></i>

					</label>

					<input type="text" placeholder="请输入姓名" v-model.trim="name "/>

				</div>

				<div class="form-group">

					<label>

						<i class="iconfont icon-shenfenzheng"></i>

					</label>

					<input type="text" placeholder="请输入身份证号码" v-model.trim="number"/>

				</div>

				<div class="form-group">

					<label>

						<i class="iconfont icon-lianxifangshi"></i>

					</label>

					<input type="text" placeholder="请输入手机号码" v-model.trim="photo"/>

				</div>

				<div class="form-group">

					<label>

						<i class="iconfont icon-duanxin"></i>

					</label>

					<input type="text" placeholder="请输入验证码" v-model.trim="code"/>

					<button type="button" class="mui-btn mui-btn-warning" id="getTel">获取验证码</button>

				</div>

				<div class="form-group">

					<button type="button" class="mui-btn mui-btn-primary" @tap="btn">登录</button>

				</div>

			</div>

		</div>

	</body>

	<script src="js/mui.min.js"></script>

	<script src="js/vue.js"></script>

	<script>

		new Vue ({

			el: "#app",

			data: {

				name: "",

				number: "",

				photo: "",

				code: ""

			},

			methods: {

				btn() {

					name: this.name;

					number: this.number;

					photo: this.photo;

					card: this.card;

					if(this.name == ""){

						mui.toast("请输入姓名");

						return;

					}

					//身份证验证

					var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

					// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X

					if(this.number == ""){

						mui.toast("请输入身份证号码");

						return;

					}else if(!regIdNo.test(this.card_no)){

						  mui.toast('身份证号填写有误');

						    return false;

					}

					var regphoto = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;

					if(this.photo == ""){

						mui.toast("请输入手机号码");

						return;

					}else if(!regphoto.test(this.tel)){

						mui.toast("手机号填写有误");

						return false;

					}

					if(this.code == ""){

						mui.toast("请输入验证码");

						return;

					}

					mui.ajax(index.html,{

						data: {

							name: this.name,

							number: this.number,

							photo: this.photo,

							card: this.card,

						},

						success:function(){

							mui.alert("登录成功")

						}

					})

				}

			}

		})

	</script> 

</html>

用vue实现登录页面的更多相关文章

  1. 前端Vue项目——登录页面实现

    一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...

  2. vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容

    新建一个Login.vue(登录页面,先把Hello.vue的内容复制过来即可) 然后我们打开router下面的index.js,第一个箭头:(引入vue路由)第二个箭头(引入我们新建的Login.v ...

  3. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  4. vue实现未登录跳转到登录页面

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...

  5. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  6. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  7. 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  8. 使用Vue和djangoframwork完成登录页面构建 001

    使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...

  9. Vue之自建管理后台（三）登录页面

    在做登录页面之前,我们必须得完成路由的设定... 按照之前的设计我们路由的文件夹是src/router 官方默认的index.js,如下: import Vue from 'vue' import R ...

随机推荐

  1. Android 内核--Context对象

    Context(在Android中翻译为场景):一个Activity就是一个Context,一个Service也是一个Context,应用程序中有多少个Activity或者Service,就会有多少个 ...

  2. 洛谷 P2323 [HNOI2006]公路修建问题 解题报告

    P2323 [HNOI2006]公路修建问题 题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 思路: 二分答案 然后把每条能加的大边都加上,然后加小边 但在洛谷的题 ...

  3. 51nod 1196 字符串的数量（DP+数论？）

    这题好像是神题...V1 V2 V3分别涵盖了51nod 5级算法题 6级算法题 难题 讨论区的曹鹏神牛好强啊...一种做法切了V1 V2 V3,而且做法是一步一步优化的 还没去看优化的部分,未优化已 ...

  4. [LOJ 6159] 最长树链

    看到要求gcd不为1所以肯定在这条答案链上都是一个质数的倍数,所以就会产生一个很暴力的想法 没错,正解就是这样的暴力 只让走是i(素数)倍数的点,作最长链 最长链可以树形dp或两遍bfs,一遍找端点, ...

  5. 【并查集】【P1525】关押罪犯

    传送门 Description Input Output Sample Input Sample Output Hint Solution 非常显然的并查集题目,在本题中,对于每个罪犯i,维护两个信息 ...

  6. The database cluster was initialized with RELSEG_SIZE 1048576, but the server was compiled with RELSEG_SIZE 8388608

    由于一次误操作,将线上机器的数据库程序目录删除,虽然不影响程序的正常使用,数据也未丢失,但后面如果出现服务器宕机或数据库宕机,数据库将无法启动,而且数据库对应的编译参数也已无法查看,所以征得开发同意后 ...

  7. HDU 5249 离线树状数组求第k大+离散化

    KPI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. [LeetCode][Facebook面试题] 通配符匹配和正则表达式匹配，题 Wildcard Matching

    开篇 通常的匹配分为两类,一种是正则表达式匹配,pattern包含一些关键字,比如'*'的用法是紧跟在pattern的某个字符后,表示这个字符可以出现任意多次(包括0次). 另一种是通配符匹配,我们在 ...

  9. LightOJ 1062 - Crossed Ladders 基础计算几何

    http://www.lightoj.com/volume_showproblem.php?problem=1062 题意:问两条平行边间的距离,给出从同一水平面出发的两条相交线段长,及它们交点到水平 ...

  10. [SDOI2011] 染色(Luogu 2486)

    题目描述 输入输出格式 输入格式: 输出格式: 对于每个询问操作,输出一行答案. 输入输出样例 输入样例#1: 6 5 2 2 1 2 1 1 1 2 1 3 2 4 2 5 2 6 Q 3 5 C ...