Using jQuery.Validate for client-side validation (primary article) Reasons not to use Microsoft validation controls_jquery

主要理由有以下几点：

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其他插件，如Accordion，Autocomplete（我的使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)就是基于这个autocomplete编写的），Tooltip等等（具体的可以上他们的网站查看）。

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

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

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

   

     

Tips: Different from general references, I use Page.ResolveClientUrl to obtain the path of the script. Because in some project development, the codes of different modules will It is operated in different directories, and half of the master page is in the root directory of the website, so in order to ensure that all pages can be referenced, the path needs to be reacquired ( However, there are disadvantages to this. The problem is that you cannot dynamically add things to

in the background code. The compiler will report an error. The solution is to put a literal control in

and re-assemble the string in the background code and assign it to literal. ).

After quoting the basic required scripts, add the script to the master page for verification.

jQuery.Validate monitors the form. Before any form submission operation, jQuery.Validate will check whether the input items in the form meet the rules and only allow submission if they meet the requirements. So

To verify and register the form when jQuery(document).ready()

The specific code is as follows:

Copy the code The code is as follows:

Some people will definitely question here, why should the jQuery.Validate code be written in the of the page? This involves the formulation of verification rules and group verification methods will be discussed in the intermediate and advanced chapters. Explained in the article.
After registering for verification monitoring, we can start writing specific verification code. We create a sub-page through the master page and put several basic input box codes on the page as follows:

Copy code The code is as follows:

<%@ Page Title="Employee Information Management-Primary Authentication" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Base.aspx.cs" Inherits="_Base" %>


















< /tr>

Username
Name
Age	< ;/asp:TextBox>
Email

In the above code, I have completed the verification of username, name, age, and email address. I wonder if you have discovered it. It is the class style in each textbox, where required means required and number means required. It is a number, and email means it must be in email format. If it is written as required email, it means that this field must be filled in and must be in email format.
How about it? Isn’t it quite simple? It eliminates the need for long-winded codes such as dragging controls and specifying validation controls. Just one [style name] is enough. Of course, jQuery.Validate also provides many validation methods, such as date, range, maximum value, and minimum value. , integer, value comparison and other verification methods. At the same time, you can also customize the verification method (of course, this custom verification method will not be available in the elementary chapter, please look forward to the intermediate and advanced chapter).
Okay, let’s click the submit button to see the effect:

Good, the verification was successful, but there is a problem, why is the prompt information all in English?

Let’s check the jQuery.Validate source code. Sure enough, there is a way to define the prompt message on line 236. We can modify the message here to change it to Chinese, or customize a Chinese message jQuery .Validate.message_cn.js, and then use jQuery.extend to overwrite jQuery.Validate’s own message. The code is as follows:

Copy code The code is as follows:

//Define Chinese message
var cnmsg = {
required: "Required field",
remote: "Please correct this field",
email: "Please enter a correct email format",
url: "Please enter a legal URL",
date: "Please enter a legal date",
dateISO: "Please enter a legal date (ISO).",
number: "Please enter legal numbers",
digits: "Only integers can be entered",
creditcard: "Please enter legal credit card numbers",
equalTo: "Please enter the same value again",
accept: "Please enter a string with a legal suffix",
maxlength: jQuery.format("Please enter a string with a length of at most {0} "),
minlength: jQuery.format("Please enter a string with a length of at least {0}"),
rangelength: jQuery.format("Please enter a length between {0} and {1 }"),
range: jQuery.format("Please enter a value between {0} and {1}"),
max: jQuery.format("Please enter A value with a maximum of {0}"),
min: jQuery.format("Please enter a value with a minimum of {0}")
};
jQuery.extend(jQuery.validator.messages , cnmsg);

In this way, you only need to quote jQuery.Validate.message_cn.js in the master page to replace the original English prompt. Both methods are advisable. , if you want to transform jQuery.Validate into a validation control suitable for you, use the first method to directly change the source code. If you just want to use some basic functions without touching the original source code, use the second method.

Then we refreshed the page, and sure enough it was all in Chinese. Take a look at the effect:

Note: The style of the error message here can be defined by yourself. I modified the original style and added an error icon to make it more beautiful. Style definition As follows:

Copy code The code is as follows: