正则-用户注册简单版-优化版本.html
<body>
<div style="margin:0 auto">
<h2>用户注册</h2>
<form name="regform" action="">
<div class="mystyle">用户名：<input type="text" value="" id="user" name="user"/><span id="userInfo">请输入4-16位数字或字母</span></div>
<div class="mystyle">密码： <input type="password" id="pass" name="pass"/><span id="passInfo">6-12位数字/字母组成</span></div>
<div class="mystyle">电话： <input type="tel" id="tel" name="tel"/><span id="telInfo">*</span></div>
<input type="submit" value="注册"/>
</form>
</div>
<script>
//获取id元素的函数
function getId(id){
return document.getElementById(id);
}
//判断用户
var userObj = getId('user');
var userInfo = getId('userInfo');
//判断密码
var passObj = getId('pass');
var passInfo = getId('passInfo');
//判断电话号码
var telObj = getId('tel');
var telInfo = getId('telInfo');
function formCheck(obj,objInfo,regRule,tip){
if(regRule.test(obj.value)){
objInfo.innerHTML='√';
objInfo.style.color='limegreen';
objInfo.style.fontSize="30px";
}else{
objInfo.innerHTML=tip;
objInfo.style.color='red';
objInfo.style.fontSize="20px";
}
}
//验证用户名
userObj.onblur=function(){
formCheck(userObj,userInfo,/^[0-9a-zA-Z]\w{3,15}$/,'4-16数字或字母组成');
}
//密码
passObj.onblur=function(){
formCheck(passObj,passInfo,/^\w{6,12}$/,'6-12位数字/字母组成');
}
//电话
telObj.onblur=function(){
formCheck(telObj,telInfo,/^1[3458]\d{9}$/,'非法的电话号码');
}
</script>
</body>
