用vue实现登录页面
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实现登录页面的更多相关文章
- 前端Vue项目——登录页面实现
一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...
- vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容
新建一个Login.vue(登录页面,先把Hello.vue的内容复制过来即可) 然后我们打开router下面的index.js,第一个箭头:(引入vue路由)第二个箭头(引入我们新建的Login.v ...
- Vue.js实现一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- vue实现未登录跳转到登录页面
环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...
- Vue.js写一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
- 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...
- 使用Vue和djangoframwork完成登录页面构建 001
使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...
- Vue之自建管理后台（三）登录页面
在做登录页面之前,我们必须得完成路由的设定... 按照之前的设计我们路由的文件夹是src/router 官方默认的index.js,如下: import Vue from 'vue' import R ...
随机推荐
- Windows系统Unity3D中的快捷键
Windows系统Unity3D中的快捷键 组合键 键 功能 File 文件 Ctrl N New Scene 新建场景 Ctrl O Open Scene 打开场景 Ctrl S Sav ...
- BZOJ3172：[TJOI2013]单词——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3172 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单 ...
- ES6箭头函数总结
1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...
- 一维的Haar小波变换
小波变换的基本思想是用一组小波函数或者基函数表示一个函数或者信号,例如图像信号.为了理解什么是小波变换,下面用一个具体的例子来说明小波变换的过程. 1. 求有限信号的均值和差值 [例] 假设有一幅分辨 ...
- 集成淘宝sdk
204是安全图片的问题, 请先检测以下几点: .请检测百川控制台是否已经申请初级API. .请检测百川控制台“我的产品后台”是否开通电商SDK应用.(重点检测很多用户疏忽这一点) .debug版本的可 ...
- Android滚动栏控件的优化
背景 由于普通TextView的跑马灯效果与焦点获取有关 所以不能直接使用 之前查找到的控件在数据设置方面存在问题 所以通过寻找github上的开源控件 并修改源码 得到一个目前感觉不错的效果 原理 ...
- EF数据更新时候异常情况一
在不熟练EF的时候有时更新数据时候会报以下异常: 错误原因:此时操作的实体不是从数据库里获取的.而是自己new出来的实体然后赋值的.EF此时的存储池中已经有了这个实体,在new一个对象ID相同就不能共 ...
- PHP系统编程--03.PHP进程信号处理
PHP的pcntl扩展提供了信号处理的功能,利用它可以让PHP来接管信号的处理,在开发服务器端守护进程方面,信号处理至关重要. 函数原型 bool pcntl_signal(int $signo ,c ...
- flask 自定义url转换器
from werkzeug.routing import BaseConverter app = Flask(__name__) class TeleConveter(BaseConverter): ...
- 51Nod 1228 序列求和
T(n) = n^k,S(n) = T(1) + T(2) + ...... T(n).给出n和k,求S(n). 例如k = 2,n = 5,S(n) = 1^2 + 2^2 + 3^2 + 4^ ...