使用jQuery 验证客户端验证(初级)不使用微软验证控件的原因

主要原因如下：1。拖动控件太麻烦了，这是微软常用的控制方式。如果你想使用一个控件，你必须把它从工具栏拖到页面上(当然，你不必拖手写)。2.您必须指定验证对象。验证控件与其他textbox和dropdownlist控件的区别在于，它验证其他控件的输入是否有效，因此必须指定已验证的对象。3.影响整个页面的美观。比如有些管理系统总是需要大量的用户输入验证，这样可能会导致一个页面上几十个验证控件严重影响到原页面中的东西，看起来很不舒服。4.ajax验证不方便。如今系统越来越注重客户的用户体验，所以ajax验证是必要的。但是微软的验证控件不提供ajax验证(当然也可以使用微软的UpdatePanel)，所以需要自己扩展。说了这么多，我只是想说微软的验证控件不是很好用，所以这时候我就在想有没有好用的验证控件。有两种方法：1。自己写一个(考虑到自己水平没那么高，想想还是算了)；2.找到一个完美的验证控件(这个是可靠的，毕竟我做不到，但是别人还是可以做到的)。因此，根据我的要求：1。不要拖动控件；2.不影响页面代码；3.去网络进行简单的AJAX验证，发现两种类型：1。自编ASP.NET求证。虽然封装了很多功能，但还是不能满足我的需求。2.javascript类型验证函数库更可靠。毕竟js可以从页面代码中分离出来(不影响页面代码)，只需要调用函数库中的验证码就可以验证指定的对象(不需要拖动控件)。同时，ajax的本质还是要靠javascript来调用(AJAX验证)，所以根据上面的第二条线索，我搜索了验证库——jQuery。Validate用javascript编写，这是jQuery的一个插件，由foundation.de编写，Bassistance.de还提供了很多其他的jQuery插件，比如Accordion，Autocomplete(我用jQuery模仿淘宝产品的搜索功能。自动完成(改善键盘上下选择的体验)就是基于这个自动完成)、Tooltip等。(详情可以在他们的网站上查看)。决定使用jQuery。验证下载其JS插件：进入http://foundation . de/jquery-plugins/jquery-plugin-validation/select DownLoad，里面有很多例子供我们学习。然后我们开始正式使用它，并建立了一个基础网站。建立一个母版页(这里使用母版页是因为在一些特定的项目中会有一个母版页来存储一些常见的东西，为了模拟一个真实的环境，这里建立了母版页。如果觉得没有必要，可以直接建立页面而不建立)。然后介绍jQuery和jQuery。验证到母版页：Script src=' %=page . resolve lien URL(' ~/scripts/jquery-1 . 4 . 1 . js ')% ' type=' text/JavaScript '/Script src=' %=Page . resolve lien URL(' ~/scripts/jquery . validate 1 . js ')% ' type=' text/JavaScript '/Script提示：与一般引用不同，我使用Page。获取脚本的路径。因为在一些项目开发中，不同模块的代码会在不同的目录下进行操作，而且有一半的母版页都在网站的根目录下，所以为了保证所有的页面基本都可以被引用，所以需要重新获取路径(但是这样做有一些缺点，就是不能在后台代码中动态的给页眉添加一些东西，编译器会报错。解决方法是在标题中放一个文字控件，并在背景代码中重新拼写字符串，将其赋给文字)。在引用基本的必需脚本后，将脚本添加到母版页进行验证。JQuery。Validate是一个监控表单。在提交表单的任何操作之前，jQuery。Validate会检查表单中的输入项是否符合规则，只有符合要求才能提交。

因此，您需要使用jQuery(文档)。什么时候？ready()，验证并注册表单。具体代码如下：复制代码如下：正文表单ID=' Form 1' Runat=' Server ' DivASP 3360内容占位符ID='内容占位符1 ' Runat=' Server '/asp: content placeholder/div/form脚本类型='text/javascript' jQuery(文档)。ready(function(){ jQuery(' # %=form 1。client id“% 1”)。validate()；});/script /body说到这里，肯定有人会疑惑为什么是jQuery。Validate应该写在页面的正文部分，其中涉及到制定验证规则和分组验证的方法，将在中级和高级文章中进行说明。注册验证监控后，我们就可以开始编写具体的验证码了。我们通过母版页创建一个子页。在页面上放几个基本的输入框代码如下：复制代码如下： %@ Page Title='员工信息管理-初级验证' language=' c# ' master Page file=' ~/master Page . master ' AutoEventWireup=' true ' CodeFile=' Base . aspx . cs ' Inherits=' _ Base ' % asp3360 content ID=' content 1 ' content placeholderid=' head ' runat=' S erver '/asp3360 content asp: content ID=' TDASP : TextBox ID=' txt name ' run at=' server ' CSS类=' required '/ASP 3360 TextBox/TD/Tr t page/TDASP : TextBox ID=' text box 1 ' run at=' server ' CSS类=' number '/ASP 3360 TextBox/TD/Tr t mailbox/TD TD TD ASP : TextBox ID=' TextBox 2 ' run at=' server ' CSS类=' email '/ASP : 我不知道你是否找到了。它是每个文本框中的类样式，其中必选表示必选，数字表示必须是数字，电子邮件表示必须是电子邮件格式。如果按照要求的电子邮件格式书写，则必须填写此字段，并且必须采用电子邮件格式。最近怎么样？是不是相当简单，省略了拖动控件、指定验证控件等繁琐的代码，只能做一个【样式名】？当然，jQuery。Validate还提供了许多验证方法，如日期、范围、最大值、最小值、整数、值比较等。同时还可以自定义验证方式(当然这种自定义验证方式在第一章不会有，请期待中级和高级章节)。好了，我们点击提交按钮，看看操作效果：。

是的，确实，验证是成功的，但是有一个问题。如何提示信息都是英文的？查看jQuery的源代码。Validate，第236行有一个定义提示消息的方法，所以我们可以修改这里的消息变成中文的方式，或者定制一个中文消息jQuery。Validate.message_cn.js，然后使用jQuery.extend覆盖jQuery的消息。自我验证。代码如下：复制代码如下： //定义中文消息var cnmsg={ required: '必填字段'、remote: '请更正此字段'、email: '请输入格式正确的电子邮件'、url: '请输入合法网站'、 '请输入合法日期'、日期ISO: '、合法日期(ISO)。'，number: '，合法数字'，digits: '，仅限整数'，以及creditcard: '，请输入合法的信用卡号码'。EqualTo:“请再次输入相同的值”，accept:“请输入带合法后缀的字符串”，maxlength3360jquery.format('请输入最大长度为{0} '的字符串)。Minlength: jQuery.format('请输入最小长度为{0} '的字符串)，rangelength: jQuery.format('请输入长度在{0}和{1}之间的字符串')。Range: jQuery.format('请输入介于{0}和{1}之间的值')、max: jQuery.format('请输入最大值{0} ')、min: jQuery.format('请输入最小值{ 0 } ')}；jquery . extend(jquery . validator . messages，cnmsg)；这样，您只需要引用jQuery。Validate.message_cn.js在母版页中替换原来的英文提示。这两种方法都是可取的。如果要转换jQuery。验证成适合自己的验证控件，应该直接用第一种方法修改源代码，如果只是想用一些基本函数，不想用原来的源代码，应该用第二种方法。然后我们再次刷新页面，全部变成了中文。看效果：

注意：这里错误消息的样式可以自己定义，所以我修改了原来的样式，增加了一个错误图标，让它看起来更好。样式定义如下：复制代码如下：样式类型=' Text/CSS '/* * * * * * * * * jQuery。验证插件样式以* * * * * * * * * * * *标签开头。错误{背景： URL。颜色：红色；左填充left: 20px} input.error { border:虚线1px红色；}/* * * * * * * * * * jQuery。验证插件样式结束* * * * * * * * * * * * * * * * * *样式。之后，是使用jquery进行客户端验证的初级章节。验证完成。您可以下载以下源代码来查看具体的代码。请期待中级。PS: 1。在代码中，jquery.validate.js是正式版本，而jquery.validate1.js是我的修改版本。我将在中级和高级文章中谈论修改的内容。2.jQuery。Validate只能进行客户端验证，但不能代替服务器端验证。出于系统安全性的考虑，仍然需要服务器端验证。源代码下载：点击我下载作者：京优。