下面针对上面三项内容,通过实例来说明一下,更易于理解。(第一个说明: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格式。代码如下:
复制代码 代码如下: