jQuery.Validate验证库的使用介绍(4)


下面针对上面三项内容,通过实例来说明一下,更易于理解。(第一个说明:required:true 必须有值 这项就不在举例了,通过上面的示例,已经非常清楚。)

required:"#aa:checked" 的示例如下:

复制代码 代码如下:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery-1.6.1.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.validate.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.metadata.js"></script>
<script>
$().ready(function() {
  $("#signupForm").validate({
    rules:
    {
      firstname: "required",
      email:
      {
        required: "#open:checked",
        email: true
      }
    },
    messages:
    {
      firstname: "请输入姓名",
      email:
      {
        required: "请输入Email地址",
        email: "请输入正确的email地址"
      }
    }
  });
});
//messages处,如果某个控件没有message,将调用默认的信息
</script>
<form method="get" action="">
    <p>
        开关:
        <input type="radio" />
        <label for="open">打开</label>
        <input type="radio" />
        <label for="close">关闭</label>
    </p>
    <p>
      <label for="email">E-Mail</label>
      <input />
    </p>
    <p>
        <input type="submit" value="Submit"/>
    </p>
</form>


当选中“打开”时,则对email进行验证。

required:function(){}的示例如下:

复制代码 代码如下:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery-1.6.1.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.validate.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.metadata.js"></script>
<script>
$().ready(function() {
  $("#signupForm").validate({
    rules:
    {
      firstname: "required",
      email:
      {
        required: function()
        {
          return true;
        },
        email: function()
        {
          return false;
        }
      }
    },
    messages:
    {
      firstname: "请输入姓名",
      email:
      {
        required: "请输入Email地址",
        email: "请输入正确的email地址"
      }
    }
  });
});
//messages处,如果某个控件没有message,将调用默认的信息
</script>
<form method="get" action="">
    <p>
        开关:
        <input type="radio" />
        <label for="open">打开</label>
        <input type="radio" />
        <label for="close">关闭</label>
    </p>
    <p>
      <label for="email">E-Mail</label>
      <input />
    </p>
    <p>
        <input type="submit" value="Submit"/>
    </p>
</form>


经过测试得知,即使email:function(){return false}); 是返回false,但是required:function(){return true;},是返回true,那么,除了验证是否为空外,还验证email格式。也就是说email:function(){reuturn false;}设置无效。进一步测试,去掉required:function(){return true;},只保留:email:function(){reuturn false;},仍然验证email格式。代码如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgfsg.html