表单验证

2019-04-15 20:48:02 作者：互联网

正则表达式的一个简单例子。
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>
  &nbsp&nbsp&nbsp<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>

标签：function,验证,sp1,sp2,value,表单,innerHTML,int2
来源： https://blog.csdn.net/weixin_44884650/article/details/89320321