注册界面模型

可以对各个输入属性进行检查

RegisterModel.javascript:

function initCheck(spankind,msg){
	var _span = document.getElementById(spankind);
	_span.innerHTML = msg;
}

function checkUsername(){
	var _span = document.getElementById("uname_span");
	var _uValue = document.getElementById("username").value;
	if(_uValue.length<6 || _uValue.length>12){
		_span.innerHTML = "用户名长度不规范"
		return false;
	}
	else{
		_span.innerHTML = "ok";
		return true;
	}
}
function checkPassword(){
	var _span = document.getElementById("pword_span");
	var _pvalue = document.getElementById("password").value;
	if(_pvalue.length==0){
		_span.innerHTML="密码不能为空"
		return false;
	}else{
		_span.innerHTML="ok";
		return true;
	}
	
}
function checkVerifyPassword(){
	var pword = document.getElementById("password").value;
	var vpword = document.getElementById("verify_password").value;
	var _span = document.getElementById("vpword_span");
	if(vpword.length==0){
		_span.innerHTML="密码不能为空"
		return false;
	}
	else if(pword==vpword){
		_span.innerHTML="ok";
		return true;
	}
	else{
		_span.innerHTML= "两次密码不一致";
		return false;
	}
}

function checkEmail(idEmail){      
	var strEmail = document.getElementById(idEmail).value; 
	var _span = document.getElementById("email_span");
	var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
	if ( emailReg.test(strEmail) ) {
		_span.innerHTML="ok";
		return true;
	}
	else {
		_span.innerHTML="邮箱格式不正确";
		return false;
	}
	
}
function checkMobile(idtel){	
	var strMobile = document.getElementById(idtel).value;
	var _span = document.getElementById("tel_span");
	var regu = /^[1][358][0-9]{9}$/;
	var re = new RegExp(regu);
	if (re.test(strMobile)) {
		_span.innerHTML="ok";
		return true;
	}
	else {
		_span.innerHTML="号码格式不正确";
		return false;
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src = "js/RegisterModel.js" type="text/javascript"></script>
		<style>
			.reminder{
				color:grey;
				font-size:8px;
			}
		</style>
		
	</head>
	<body>
		
		用户名:<input type = "text" id = "username" onfocus = "initCheck('uname_span','用户名长度为6到12位')"
				  onkeyup = "checkUsername()"/>
		<span id = "uname_span" class="reminder"></span>
		<br/>
		密码:<input type = "password" id = "password" onfocus = "initCheck('pword_span','密码不能为空')"
				  onblur = "checkPassword()"/>
		<span id = "pword_span" class = "reminder"></span>
		<br/>
		确认密码:<input type = "password" id = "verify_password" 
		onfocus = "initCheck('vpword_span','两次密码应一致')" onblur = "checkVerifyPassword()"/>
		<span id = "vpword_span" class = "reminder"></span>
		<br/>
		邮箱:<input type="text" id = "email" onkeyup="checkEmail('email')"  />
		<span id = "email_span" class = "reminder"></span>
		<br/>
		手机号码:<input type = "text" id = "tel" onfocus = "initCheck('tel_span','请填写11位手机号码')" onkeyup="checkMobile('tel')"/>
		<span id = "tel_span" class = "reminder"></span>
	</body>
</html>

运行效果图

外观待改进~

^_^

posted on 2018-12-09 19:26 kongieg 阅读(231) 评论(0) 收藏举报