欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中 验证 用户名 密码

程序员文章站 2022-06-13 21:04:04
...

参考网址
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>

上一篇: 小程序接口配置

下一篇: Spring MVC