ホームページ  >  記事  >  ウェブフロントエンド  >  クライアント側の検証に jQuery.Validate を使用する (主な記事) Microsoft 検証を使用しない理由 control_jquery

クライアント側の検証に jQuery.Validate を使用する (主な記事) Microsoft 検証を使用しない理由 control_jquery

WBOY
WBOYオリジナル
2016-05-16 18:24:18955ブラウズ

主要理由有以下几点:

1、拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写)。

2、必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象。

3、影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服。

4、ajax验证不方便,现在的系统越来越注重客户的用户体验,所以ajax验证必不可少,但是微软的验证控件并没有提供ajax验证(当然你也可以通过微软的UpdatePanel来进行),需要自己去扩展。

 

说了上面那么多,我只是表明我的意思,微软的验证控件不太好用,所以这时候我就在想有没一些好用点的验证控件呢?

有2个方法:1、自己编写一个(考虑到自己水平还没那么高,想想还是算了)

                2、去找一个已经完善的验证控件(这个比较靠谱,毕竟我做不到,别人还是能做到的)

所以按照我的要求:1、不用拖控件

                       2、不影响页面代码

                       3、简单的AJAX验证

去网络搜寻找到了2种类型的:1、自己编写的ASP.NET验证控件,虽然封装了比较多的功能但是还是满足不了我需求

2、javascript类型的验证函数库,这个比较靠谱,毕竟js可以和页面代码分离(不影响页面代码),只需要调用函数库里的验证代码就可以进行指定对象的验证了(不用拖控件),同时ajax本质还是要靠javascript来调用(AJAX验证)

所以我根据上面第2条线索就搜索使用javascript编写的验证库——jQuery.Validate,这个验证库是属于jQuery的插件,是由bassistance.de编写的,bassistance.de还提供许多jQuery其他插件,如AccordionAutocomplete(我的使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)就是基于这个autocomplete编写的),Tooltip等等(具体的可以上他们的网站查看)。

决定使用jQuery.Validate首先下载其JS插件:

进入http://bassistance.de/jquery-plugins/jquery-plugin-validation/选择DownLoad下载,里面包含了许多示例可供我们学习

接下来我们就开始正式使用了,建立一个基本的网站,建立好一个母版页(这边使用母版页是因为具体的一些项目中都会有一个母版页来存放一些公用的东西,这边为了模拟一个真实的环境,所以建立母版页,如果觉得不需要可以不建立直接建立页面即可),然后把jQuery和jQuery.Validate都引入母版页:

   

     

ヒント: プロジェクト開発によっては異なるモジュールのコードが動作するため、一般的なリファレンスとは異なり、Page.ResolveClientUrl を使用してスクリプトのパスを取得します。マスター ページの半分は Web サイトのルート ディレクトリにあるため、すべてのページを確実に参照できるようにするには、パスを再取得する必要があります ( ただし、デメリットもあります)問題は、バックグラウンド コードで

に動的に追加できないことです。解決策は、リテラル コントロールを
に配置することです。コードを作成し、それをリテラルに割り当てます。

基本的に必要なスクリプトを引用した後、検証のためにスクリプトをマスター ページに追加します。

jQuery.Validate はフォームを監視します。フォーム送信操作の前に、jQuery.Validate はフォーム内の入力項目がルールを満たしているかどうかを確認し、要件を満たしている場合にのみ送信を許可します。だから

jQuery(document).ready() のときにフォームを検証して登録するには

具体的なコードは次のとおりです:


コードをコピーします コードは次のとおりです:


;