正则-注册简单版本.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>
//判断用户名
var userObj = document.getElementById('user');
var userInfo = document.getElementById('userInfo');
userObj.onblur=function(){
//1:判断输入的内容跟是否合法，用正则表达式
val = userObj.value;
patt = /^[0-9a-zA-Z]\w{3,15}$/
var res = patt.test(val);
if(res){
//2:修改提示信息
userInfo.innerHTML='√';
userInfo.style.color='limegreen';
userInfo.style.fontSize="18px";
}else{
userInfo.innerHTML='请输入4-16位数字或字母'
userInfo.style.color='red';
}
}
//判断密码
var passObj =document.getElementById('pass')
var passInfo=document.getElementById('passInfo')
passObj.onblur=function(){
val1=passObj.value
patt1=/^[0-9a-zA-Z]\w{5,11}$/
var res1=patt.test(val1)
if (res1) {
passInfo.innerHTML='√'
passInfo.style.color='limegreen'
passInfo.style.fontSize="18px"
} else{
passInfo.innerHTML='6-12位数字/字母组成'
passInfo.style.color='red'
}
}
//判断电话号
var telObj=document.getElementById('tel')
var telInfo=document.getElementById('telInfo')
telObj.onblur=function(){
val2=telObj.value
patt2=/^[1][3,4,5,7,8][0-9]{9}$/
var res2=patt2.test(val2)
// console.log(res2)
if (res2) {
telInfo.innerHTML='√'
telInfo.style.color='limegreen'
passInfo.style.fontSize="18px"
} else{
telInfo.innerHTML='非法的电话号码'
telInfo.style.color='red'
}
}
</script>
</body>
