search
HomeWeb Front-endJS TutorialUsing 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其他插件,如AccordionAutocomplete(我的使用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:





asp:ContentPlaceHolder>





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:

CodeFile="Base.aspx.cs" Inherits="_Base" %>























Username


td>

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:
Using jQuery.Validate for client-side validation (primary article) Reasons not to use Microsoft validation controls_jquery
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:
Using jQuery.Validate for client-side validation (primary article) Reasons not to use Microsoft validation controls_jquery
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:


At this point, the basic chapter on using jQuery.Validate for client-side verification is finished. You can download the source code below to view the specific code. Please look forward to the intermediate and advanced chapters. articles.
PS: 1. jquery.validate.js in the code is the official version, and jquery.validate1.js is my modified version. I will talk about the modifications in the intermediate and advanced chapters.
2. jQuery.Validate can only be used for client-side verification and cannot replace server-side verification. For the sake of system security, server-side verification is still required.
Source code download: Click here to download

Author: kyo-yo
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software