js中 验证 用户名 密码

参考网址
http://www.17sucai.com/preview/1149930/2018-04-14/upload/index.html

我的 html 页面

<link href="./home/else3/css/fabu/home.css" type="text/css" rel="stylesheet" />

<form name="contact" method="post" action="home_reg.html"  enctype="multipart/form-data"   />
        <div class="aui-content-up-form">
            <h2>注 册</h2>
        </div>

        <div class="aui-form-group clear">
            <label class="aui-label-control">
                用户名 <em>*</em>
            </label>
            <div class="aui-form-input">
                <input type="text" name="username" id="name" size="30"  placeholder="请输入用户名" onBlur="checkna()" class="text-input span4" />
                <span class="tips" id="username"></span>
            </div>
        </div>

        <div class="aui-form-group clear">
            <label class="aui-label-control">
                密码 <em>*</em>
            </label>
            <div class="aui-form-input">
                <input type="text" name="password" id="Password" size="30" onBlur="checkpsd1()"  class="text-input span4" />
                <span class="tips" id="phone"></span>

            </div>
        </div>

        <div class="aui-form-group clear">
            <label class="aui-label-control">
                确认密码 <em>*</em>
            </label>
            <div class="aui-form-input">
                <input type="text" name="password2" id="Password2" size="30" value="" onBlur="checkpsd()" class="text-input span4" />
                <span class="tips" id="pass"></span>
            </div>
        </div>
     <div class="aui-btn-default">
        <input type="submit" id="button" class="aui-btn aui-btn-account" value="注册" />
    </div>
</form>

//  js  中验证

<script type="text/javascript">

//验证用户名
function checkna(){

	 // 表单名.用户名 input 框 .name 值
    na=contact.username.value;

    if( na.length <1 || na.length >6)
    {
        username.innerHTML='<font class="tips_false">长度是1~6个字符</font>';
    }else{
        username.innerHTML='<font class="tips_true">输入正确</font>';
    }
}

//验证密码
function checkpsd1(){
    na=contact.password.value;
    if( na.length <6 || na.length >8)
    {
        phone.innerHTML='<font class="tips_false">必须是6~8位的数字</font>';
    }else{
        phone.innerHTML='<font class="tips_true">输入正确</font>';
    }
}

// 前台 验证 两次密码不一致
function checkpsd()
{
    pass1=contact.password.value;
    pass2=contact.password2.value;	   

    if( pass1 != pass2)
    {
        pass.innerHTML='<font class="tips_false">两次密码不一致</font>';
    }else{
        pass.innerHTML='<font class="tips_true">输入正确</font>';        
    }

}

</script>

猜你喜欢

转载自blog.csdn.net/qq_39835505/article/details/85164003