当前位置:asp编程网>技术教程>Ajax教程>  正文

jquery教程:简单的jquery表单验证

2011-12-01 09:00:28   来源:jqueryajax    作者:小朱   浏览量:2464   收藏
这里介绍一下jquery的用法:jquery表单验证
 //首先加载jquery库文件
<script type="text/javascript" src="jquery.js"></script>
<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}$/))//只处验证和上面一样

{
            $("#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+'会员');
	 });

})
 </script>
  <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>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)


关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网