js注册登录校验

最新推荐文章于 2024-08-31 11:30:55 发布

BryantLmm

最新推荐文章于 2024-08-31 11:30:55 发布

阅读量900

点赞数

分类专栏： javaweb 文章标签： javascript

本文链接：https://blog.csdn.net/BryantLmm/article/details/53510654

版权

javaweb 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

先上代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form表单提交</title>
<script type="text/javascript">
var flag1=false;
var flag2=false;
function display(obj){
    var currentVal=$(obj.id).value;
    if(currentVal=="")
        {
        $(obj.id).value=obj.defaultValue;
        }
    else{
        $(obj.id).value=currentVal;
        if(currentVal.length<6)
        {
            $("info1").innerText="用户名称太短,应为6-10个字符";
        }
        else if(currentVal.length>10)
        {
            $("info1").innerText="用户名称太长，应为6-10个字符";
        }
        else {
            var myreg=/[a_zA_z0-9_-]+/gi;
            if(!myreg.test(currentVal))
            {
                $("info1").innerText="用户名不能为除下划线之外的特殊字符";
            }
            else {
                flag1=true;
                }
             }
        }
        $("b3").disabled=false;
}
function dispass(obj){
var currentVal=$(obj.id).value;
    if(currentVal=="")
        {
        $(obj.id).value=obj.defaultValue;
        }
    else{
        $(obj.id).value=currentVal;
        if(currentVal.length<6)
        {
            $("info2").innerText="密码太短";
        }
        else if(currentVal.length>16)
        {
            $("info2").innerText="密码太长";
        }
        else {
            var myreg=/[a_zA_z]+[0-9]+/gi;
            if(!myreg.test(currentVal))
            {
                $("info2").innerText="密码应该为字母和数字的组合";
            }
            else {
                flag2=true;
            }
        }
    }
        $("b3").disabled=false;
}
function confirm(obj){
var flag=flag1&&flag2;
if(!flag)
{
    $("b3").disabled=true; 
    return false;
}
return true;

}
function doclear(obj)
{

    var currentVal=$(obj.id).value;
    if(currentVal==obj.defaultValue)
        {
        $(obj.id).value="";
        }
    else{
        $(obj.id).value=currentVal;
    }
}

function $(id)
{
    return document.getElementById(id);
}
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
<form action="" onsubmit="return confirm(this)">


        <!--value 就是默认值 可以通过 this.defaultValue来访问-->
         <input type="text" value="用户邮箱/手机号/用户名"  onfocus="doclear(this)" onblur="display(this)" id="b1"/><span id="info1"></span><br>
         <input type="password" value="请输入密码" onfocus="doclear(this)" onblur="dispass(this)" id="b2"/><span id="info2"></span><br>
         <input type="submit" value="登陆"  id="b3"/><br>



</form>
</body>
</html>