<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body, button, input, legend{margin: 0;padding: 0;font: 16px "微软雅黑";}
.m-form{margin: 150px auto;width: 325px;border: 1px solid #ddd;}
.m-form legend{width: 100%;line-height: 30px;text-indent: 1em;color: #fff;background-color: #2d2d2d;}
.m-form fieldset{border: none;padding: 20px;}
.m-form div{margin: 20px;}
.m-form button{width: 100%;height: 30px;color: #fff;border: 1px solid #ddd;cursor: pointer;background-color: #2d7dca;}
.m-form .msg{margin:5px;text-align:center;display:none;}
.m-form .tip{padding-left:6em;font-size:12px;color:#C0C0C0;}
.m-form .j-err{display:block;color:red;}
.m-form .j-suc{display:block;color:#158226;}
.m-form .u-txt{width: 160px;padding: 3px;border:1px solid #aaa;}
.m-form .j-error{border-color: red;background-color: #FFE7E7;}
.m-form .j-disabled{cursor: default;background-color: #ddd;}
</style>
</head>
<body>
<form action="./login" class="m-form" name="loginForm" target="result" autocomplete="off">
<legend>手机号码登录</legend>
<fieldset>
<div class="msg" id="message"></div>
<div>
<label for="telephone">手机号：</label>
<input id="telephone" name="telephone" type="tel" class="u-txt" maxlength="11"
required pattern="^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$"><br/>
<span class="tip">11位数字手机号码</span>
</div>
<div>
<label for="password">密 码：</label>
<input id="password" name="password" type="password" class="u-txt"><br/>
<span class="tip">至少6位，同时包含数字和字母</span>
</div>
<div><button name="loginBtn">登 录</button></div>
</fieldset>
</form>
<iframe name="result" id="result" style="display:none;"></iframe>
<script>
var form = document.forms.loginForm;
var message = document.getElementById('message');
//接口：有参数传入时展示相关信息，没有时则无内容
function showMessage(class_name,text){
if(!class_name){
message.innerHTML = '';
message.classList.remove('j-suc');
message.classList.remove('j-err');
}
else{
message.innerHTML = text;
message.classList.add(class_name);
}
}
// 登录按钮状态控制接口
function disableSubmit(flag){
form.loginBtn.disabled = !!flag;
if(flag){
form.loginBtn.classList.add('j-disabled');
}
else{
form.loginBtn.classList.remove('j-disabled');
}
}
//表单验证错误时接口
function invalidInput(ele,text){
showMessage('j-err',text);
ele.classList.add('j-error');
ele.focus();
}
//表单验证成功时接口
function clearInvalid(ele){
showMessage();
ele.classList.remove('j-error');
}
//手机号码验证错误时
form.telephone.addEventListener('invalid',function(event){
var event = event || window.event;
event.preventDefault();
var input = document.getElementById('telephone');
invalidInput(input,'请输入以1起始的11位手机号');
});
//输入时移除错误报告的信息，按钮恢复可以按的状态
form.addEventListener('input',function(event){
var event = event || window.event;
clearInvalid(event.target);
disableSubmit(false);
});
form.addEventListener('submit',function(event){
var event = event || window.event;
var input = form.password;
var psw = input.value;
var message = '';
if(psw.length < 6){
message = '密码的长度必须大于6位';
}else if(psw.length > 16){
message = '密码的长度必须小于16位';
}else if(!/\d/.test(psw)||!/[a-z]/i.test(psw)){
message = '密码必须同时包含数字和字母';
}
//密码验证不通过
if(!!message){
event.preventDefault();
invalidInput(input,message);
return;
}
//密码格式符合要求，提交前禁用提交按钮
disableSubmit(true);
});
var frame = document.getElementById('result');
frame.addEventListener('load',function(event){
var event = event || window.event;
try{
var result = JSON.parse(frame.contentWindow.document.body.textContent);
disableSubmit(false);
if(result.code === 200){
showMessage('j-suc','登录成功！');
form.reset();
}
}
catch(ex){
//ignore
}
});
</script>
</body>
</html>
