Jquery验证用户名和密码的代码举例

发布时间:2020-05-03编辑:脚本学堂
本文介绍下,Jquery实现验证用户名与密码的一个例子,简单而实用的验证登录表单的方法,加入了radio的验证。有需要的朋友,参考下吧。

今天写了一个最简单但很实用的验证登录表单的代码。 
加入radio的验证,需要注意的是 radio要用click事件而不能用blur事件。

1、jquery代码部分
 

复制代码 代码示例:
<mce:script type="text/javascript"><!-- 
     //首先要加载jquery库文件,因为这里只是给大家演示,所以我就不加载了。 
     //下面为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}$/))//只处验证和上面一样 
            { 
                $("#pas1Tip").html("密码不能为空且只能为英文或者数字"); 
            } 
            else 
            { 
                $("#pas1Tip").html("输入正确"); 
            } 
         }); 
         $("#pas2").blur(function(){//用户密码确认框失去焦点触发验证事件 
            if(!$(this).val || $(this).val() != $("#pas1").val() )//此处验证和上面一样 
            { 
                $("#pas2Tip").html("密码为空或者和上面的密码不致"); 
            } 
            else 
            { 
                $("#pas2Tip").html("输入正确"); 
            } 
         }); 
         $("input[name=ustype]").click(function(){ 
            var ustype = $(this).val(); 
            var ustypemsg = (ustype==1)?'企业':'个人'; 
            $("#ustypeTip").html("您选择的是"+ustypemsg+'会员'); 
         }); 
    }) //www.jb200.com      
    // --></mce: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="radio" value="0" name="ustype" checked="checked" /> 个人 <input type="radio" value="1" name="ustype" /> 企业 <span id="ustypeTip"></span> 
<input type="submit" value="提交" /> 
</form>