jquery验证插件validate用法举例

发布时间:2020-06-15编辑:脚本学堂
有关jquery验证插件validate用法的例子,validate是一款不错的表单验证插件,本节介绍下这个小插件的用法,对表单输入进行验证。

jquery validate表单验证插件

1、前台页面:
 

复制代码 代码示例:
<form id="form1" runat="server">
<div class="divFrame">
<div class="divTitle">
输入资料信息:
</div>
<div class="divContent">
<div>
用户名:<br />
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
*<br />
<span></span>
</div>
<div>
邮箱:<br />
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
*<br />
<span></span>
</div>
</div>
<div class="divBtn">
<asp:Button ID="Button1" runat="server" Text="提交" />
</div>
</div>
</form>

2、jquery脚本代码:
 

复制代码 代码示例:
<script type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="Scripts/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
 $(function () {
     $("#form1").validate(
{
    /*自定义验证规则*/
    rules: {
 txtUsername: { required: true, minlength: 6 },
 txtEmail: { required: true, email: true }
    },
    /*错误提示位置*/
    errorPlacement: function (error, element) {
 error.appendTo(element.siblings("span"));
    }
}
     );
 })
</script>

说明:
jquery.validate.messages_cn.js用于将提示信息用中文显示。
写验证规则时请注意,用控件的id属性与规则进行关联。