您的位置:首页 > Web前端 > JQuery

jquery.validate中文API和应用实例(一)简单验证

2011-03-09 22:16 489 查看
中文版jquery.validate API下载地址: jQuery_validateAPI中文.rar

查看在简单验证规则的使用,请到jquery.validate中文API和应用实例(二)简单验证-规则的应用

以下是简单应用实例:

1.用class样式进行验证,用法简单,但不能自定义错误信息,只能修改jquery-1.4.1.min.js中的内置消息,也不支持高级验证规则。

<script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery.validate.min.js"></script>
<h2>
ValidateTest</h2>
<form id="loginForm" action="post">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
      <input type="text" id="UserEmail" class="required email" />
</td>
</tr>
<tr>
<td>
      <input type="password" id="Password" class="required" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" onclick="checkInput();" />
</td>
</tr>
</table>

</form>
<script language="javascript" type="text/javascript">
function checkInput() {
if ($("#loginForm").valid()) {
return true;
}
return false;
}
</script>


当然,如果不希望使用onclick事件进行提交验证,也可以在页面加载时加上jQuery的监控,代码如下:

$(document).ready(function () {
jQuery("#loginForm").validate();
});


这时就不需要在提交按钮上加 onclick="checkInput();"这个事件了。

2.使用Json字符串验证,使用该规则验证,必须额外引入jquery.metadata.pack.js文件

修改上面的两个INPUT如下:

<input type="text" id="UserEmail" class="{validate:{ required:true,email:true }}" />
<input type="password" id="Password" class="{validate:{required:true,minlength:6,messages:{required:'请输入密码 ',minlength:'密码至少6位'}}}" />


可以看到,我们已经可以自定义错误消息了。

另外必须在页面中加上以下代码:

$(document).ready(function () {
$("#loginForm").validate({
meta: "validate"
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: