注册界面模型
- 可以对各个输入属性进行检查
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;
}
}
register.html:
<!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>
- 运行效果图
外观待改进~
^_^
