driving-test-canon
/
login.html

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body>
		<!-- 输入mheader 快速创建头部导航 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登录</h1>
		</header>
		<!-- 输入mbody 快速创建内容区 -->
		<div class="mui-content">
			<!-- 输入mform 快速创建表单 -->
			<div class="mui-input-group login-form list-text" id="loginForm">
				<div class="mui-input-row">
					<label>手机号</label>
					<input type="text" class="mui-input-clear" placeholder="请输入手机号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary btn-block">确认登录</button>
				</div>
			</div>
			<p class="protocol">登录即表示同意用户协议</p>
			<!-- overflow: hidden;清除浮动 -->
			<p style="overflow: hidden;">
				<!-- 左右浮动  mui-pull-left-->
				<button type="button" class="mui-btn-link mui-pull-left">快速注册</button>
				<button type="button" class="mui-btn-link mui-pull-right">忘记密码？</button>
			</p>
		</div>

		<script src="js/mui.js"></script>
		<script src="js/castapp.js"></script>
		<script type="text/javascript">
			ca.init()

			document.getElementsByClassName('btn-block')[0].onclick = function() {
				let check = false
				mui("#loginForm input").each(function() {
					//若当前input为空，则alert提醒
					if (!this.value || this.value.trim() == "") {
						var label = this.previousElementSibling;
						mui.alert(label.innerText + "不允许为空");
						check = false;
						return false;
					}
					// 手机号校验
					if (this.previousElementSibling.innerText == "手机号") {
						let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
						if (!reg_tel.test(this.value)) {
							mui.alert("请正确填写您的手机号码！");
							return false;
						}
					}
					check = true
				});
				//校验通过，继续执行业务逻辑
				if (check) {
					mui.alert('验证通过!')
				}
			}
		</script>
	</body>

</html>