Jquery验证用户名与密码的实例代码

发布时间:2020-07-11编辑:脚本学堂
本文介绍一个用Jquer实现页面中用户名与密码验证的例子,有需要的朋友,可以参考下。

注意:需要引入外部jquery文件,比如Jquery1.5.2.js。

1、js代码部分

复制代码 代码示例:

<script type="text/javascript">
/**
* Jquery验证用户名、密码
*/
$(function(){
     $("#name").blur(function(){//用户名文本框失去焦点触发验证事件
        if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证不能为空并且只能为英文或者数字或者下划线组成的2-15个字符
        {
            $("#nameTip").html("用户名不能为空且只能为英文或者数字");
        }
        else
        {
            $("#nameTip").html("输入正确");
        }

     });

      $("#pas1").blur(function(){//用户名文本框失去焦点触发验证事件
        if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证和上面一样
        {
            $("#pas1").html("密码不能为空且只能为英文或者数字");
        }
        else
        {
            $("#pas1").html("输入正确");
        }

     });
     $("#pas2").blur(function(){//用户名文本框失去焦点触发验证事件
        if(!$(this).val || $(this).val() != $("#pas1").val() )//只处验证和上面一样
        {
            $("#pas2").html("密码为空或者和上面的密码不致");
        }
        else
        {
            $("#pas2").html("输入正确");
        }

     });

})
</script>

2、页面内容部分

<form action="#">
用户名:<input type="text" id="name" /><span id="nameTip"></span>
密码:<input type="password" id="pas1" /><span id="pas1Tip"></span>
确认密码:<input type="password" id="pas2" /><span id="pas2Tip"></span>
<input type="submit" value="提交" />
</form>