jQuery技术

jquery验证表单很简单的方法

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

jquery验证表单很简单的方法 现在网上有很多jquery验证表单的插件,但都写的比较复杂。一般都有两三个文件。 我今天写一个最简单但是很实用的验证 登录表单的方法。 我基本上只是给

jquery验证表单很简单的方法
现在网上有很多jquery验证表单的插件,但都写的比较复杂。一般都有两三个文件。
我今天写一个

最简单但是很实用的验证登录表单的方法。
我基本上只是给大家提供一种思路。jquery插件一般也是按这个思路写的。
大家可以按这个思路去扩展,不过只要实用越简单越好

代码如下,

“zhuyanrong”的要求 加入radio的验证 其实那个很简单,需要注意的是 radio要用click事件而不能用blur事件

<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+'会员');
	 });

})
 </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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
l