正则表达式的一个简单例子。
onfouse 聚焦 事件
onblur 失焦 事件
聚焦时输入
失焦时候判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>案例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#sp1,
#sp2,
#sp3{
font-size: 12px;
color:red;
}
</style>
</head>
<body>
   <span>会员名：</span><input type="text" id="int1" "hym()" "sj()"><span id="sp1">请输入中文会员名</span><br>
<span>登录密码：</span><input type="password" /id="int2" "dlmm()" "dlsj()"><span id="sp2"></span><br>
<span>确认密码：</span><input type="password" /id="int3"><span id="sp3"></span><br>
<button id = "btn">注册提交</button>
</body>
<script type="text/javascript">
var regn = /^[\W\u4e00-\u9fa5]{1,8}$/
int1.onfocus = function(){
sp1.style.display = "inline-block"
if (int1.value == "") {
sp1.innerHTML = "请输入中文会员名"
};
}
int1.onblur = function(){
if (int1.value == "") {
sp1.innerHTML = "会员名不能为空"
}
else if (regn.test(int1.value) == true) {
sp1.style.color = "yellowgreen"
sp1.innerHTML = "格式正确"
}else{
sp1.innerHTML = "请输入正确格式"
}
}
var regp = /^[A-Za-z0-9]{6,18}$/
int2.onfocus = function(){
if (int2.value == "") {
sp2.innerHTML = "请输入密码"
};
}
int2.onblur = function(){
if (int2.value == "") {
sp2.innerHTML = "密码不能为空"
}
else if (regp.test(int2.value) == true) {
sp2.innerHTML = "格式正确"
sp2.style.color = "yellowgreen"
}else{
sp2.innerHTML = "格式错误"
}
}
int3.onfocus = function(){
if (int3.value == "") {
sp3.innerHTML = "请输入与上次一致的密码"
}
}
int3.onblur = function(){
if (int3.value == "") {
sp3.innerHTML = "不能为空"}
else if(int2.value == int3.value){
sp3.innerHTML = "密码正确"
}else{
sp3.innerHTML = "与上次输入密码不一致"
}
}
</script>
</html>