jquery validation插件表单验证的一个例子

messages_cn.js <!--验证国际化，中文--> （不引用messages_cn.js是英文的提示，用了是中文）


代码如下:

required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein gültiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension
maxlength: Please enter no more than {0} characters
minlength: Please enter at least {0} characters
rangelength: Please enter a value between {0} and {1} characters long.
range: Please enter a value between {0} and {1}.
max: Please enter a value less than or equal to {0}.
min: Please enter a value greater than or equal to {0}.
<script type="text/javascript">
$(function() {
$("#btnOk").click(function() {
$("#form1").validate({ rules: {
username: { required: true, minlength: 2 },
email: { required: true, email: true },
url: { required: true, url: true },
comment: "required"
}
});
});
});
</script>
<body>
<form id="form1" runat="server" action="" method="get">
<fieldset>
<legend>一个简单的验证带验证评论的例子</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input type="text" id="cusername" name="username" size="25"/>
</p>
<p>
<label for="cemail">邮件</label><em>*</em>
<input type="text" id="cemail" name="email" size="25"/>
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input type="text" id="curl" name="url" size="25"/>
</p>
<p>
<label for="ccomment">你的评论</label><em>*</em>
<textarea id="ccomment" name="comment"cols="22"></textarea>
</p>
<p>
<%--<input type="submit" id="send" value="提交"/>--%>
<asp:Button ID="btnOk" runat="server" Text="提交" onclick="btnOk_Click"/>
</p>
</fieldset>
</form>
</body>

赞 (0)

相关推荐

  • ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

    ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

    先看界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3

  • 支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍

    支持ASP.NET MVC、WebFroM的表单验证框架ValidationSuar使用介绍

    1.支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展) 2.代码简洁 3.调用方便 4.功能齐全 使用方法: 新建初始化类,将所有需要验证的在该类进行初始化,语法相当简洁并且可以统一管理,写完这个类你的验证就完成了70% 函数介绍: Add 默认类型(邮件.手机.qq等) AddRegex 正则验证 在Add无法满足情部下使用 addFunc 使用js函数进行验证,一般用于业逻辑的验证 ,功能非常强大,可以满足各种验证(注意:add

  • ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

    ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

    这里我们举例校验ListBox两个规则: •校验必选项 •选择范围在0~4项 界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadd

  • ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p

  • 表单验证插件Validation应用的实例讲解

    表单验证插件Validation应用的实例讲解

    jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.现在结合实际情况,我把项目中经常要用到的验证整理成一个实例DEMO,本文就是通过讲解这个实例来理解Validation的应用. 本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在). 密码:长度验证,重复输入密码验证. 邮件:邮件地址验证. 固定电话:中国大陆固定电话号码验证. 手机号:中国大陆手机号码验证. 网址:网站URL地址

  • jquery validation验证身份证号,护照,电话号码,email(实例代码)

    validata.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

  • jQuery Validation插件remote验证方式的Bug解决

    不过奇怪的是,最近用下来感觉有些古怪,因为好像有些死板,已有功能的应变能力还不强,甚至还有个奇怪的Bug.任何项目有Bug其实也正常,但这个Bug其实是一个文档上已经记载了,却没有实现的功能,这就有些说不过去了.这个问题便出在remote验证方式上,还好修改起来非常容易,在此记录一下,也方便以后的参考. 在表单验证时,有时候会需要发一个AJAX请求去服务器上进行判断,例如在用户注册时检查用户名是否存在.jQuery Validation插件提供了一种remote方式来实现这一点.例如我可以这样验

  • 修改jQuery Validation里默认的验证方法

    在最近做的一个项目中,使用jQuery Validation验证日期,遇到的问题和一个没有预料到的情况是,在ASP.NET MVC 3的项目中,对于 <input type="date" data-val="true" />的元素,如果调用form的valid方法验证form,虽然我没有添加日期验证的设置,仅仅type="date",但其依然调用了日期验证逻辑来验证日期格式是否正确.这本来是个不错的行为,但问题在于,其支持的日期格式有

  • jQuery Validation实例代码 让验证变得如此容易

    jQuery Validation实例代码 让验证变得如此容易

    使用客户端验证可以有效的减少数据往返服务器和客户端的次数,有利于提高服务器的资源利用路,并且还能够给用户直观,快速的回应. 在Web 2.0时代,这显得尤其重要,我想大家一定和我一样讨厌用基础的javascript写着烦人的验证.现在服务器端的验证有比较好的框架可以解决,ASP.NET MVC就可以很好的完成这样的工作,所以对于.net开发来说,拥有一个好的客户端养正框架对于开发效率的提高起着至关重要的作用. 我们可以通过下面的地址获得这个JS框架 JQuery jQuery Validatio

  • ASP.NET中实现jQuery Validation-Engine的Ajax验证

    ASP.NET中实现jQuery Validation-Engine的Ajax验证

    见下图: 验证的例子:http://www.position-relative.net/creation/formValidator/ 官方地址: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ 这个插件支持大部分的浏览器,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(IE 9 支持圆角效果). 本文主要内容是

  • JQuery的Validation插件中Remote验证的中文问题

    根据上次的经验,我将 复制代码 代码如下: contentType: "application/x-www-form-urlencoded; charset=utf-8", 加入到ajax请求的参数中,结果这次居然不起作用了. 多次观察Fiddler结果,发现无效后,只好打开JQuery.Validation.js寻求答案了. 在remote的代码中,我发现: 复制代码 代码如下: ... var data = {}; data[element.name] = value; $.aja

  • jquery插件validation实现验证身份证号等

    先推荐一个基于bootstrap的jQuery validation插件:http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/ jQuery validation添加验证规则 validata.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

  • jQuery验证插件validation使用指南

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性. 1.jquery.validate插件功能 简单

  • ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

    ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

    页面样式代码: 复制代码 代码如下: <style type="text/css"> .header { background-color: #CCCCCC; color: White; font-size: x-large; } .content { background-color: White; font-weight: lighter; font-size: small; } .content td { text-align: left; } .mandatory

  • JQurey Validation表单验证使用详解

    JQurey Validation表单验证使用详解

    是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.本文就是通过讲解这个实例来理解Validation的应用. 本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在). 密码:长度验证,重复输入密码验证. 邮件:邮件地址验证. 固定电话:中国大陆固定电话号码验证. 手机号:中国大陆手机号码验证. 网址:网站URL地址验证. 日期:标准日期格式验证. 数字:整数.正整数验证,数字范围验证. 身份证:大陆身份证号码验证. 邮政编码:

  • .NET验证组件Fluent Validation使用指南

    认识Fluent Vaidation. 看到NopCommerce项目中用到这个组建是如此的简单,将数据验证从业务实体类中分离出来,真是一个天才的想法,后来才知道这个东西是一个开源的轻量级验证组建.   Fluent Validation 翻译为:流畅验证   开源Codeplex其主页简介:该组件是一个轻量级的.NET类库,使用流畅的接口定义和lambda表达式为构建一个业务类的验证规则(A small validation library for .NET that uses a fluen

  • Jquery Validation插件防止重复提交表单的解决方法

    由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮.CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码.代码如下: js: 代码 复制代码 代码如下: function disableBtn(btnID, newText) { Page_IsValid = null; if (typeo

随机推荐