5 ways to use jQuery override form validation examples

Before the " Eko-free asynchronous interaction of Ajax to refresh the understanding of "this article, using the Ajax framework of traditional methods and AjaxGold 2 methods to achieve the" automatically check the form "example of using jQuery's load today eko () method, $. get (),$. post (),$. ajax () and form plugin (Form Plugin) 5 methods were rewritten "Forms Authentication" instance (Ajax without refreshing), and further that Chinese garbled question (ie encoding and decoding issues). To share with you, huh, huh ~

If the traditional method and AjaxGold Ajax framework approach, not very understanding, read the "eko-free asynchronous interaction of Ajax to refresh the understanding of" this article.

If the following example in jQuery is not a cold, see the jQuery Chinese one by one manual control. Download

First, a brief description of coding knowledge, be sure to understand and then see the following code Oh!!

Request to send Chinese characters, if you use get, running normal; and will use the post method garbled. This is due to handling asynchronous XMLHttpRequest object's responseText return when it is encoded by UTF-8 decoding. If your original web page code is gb2312 then, of course, a conflict occurs coding; If your code is the original web page utf-8, it will not appear garbled in Chinese problem.

Appear garbled in Chinese how to do it? The usual solution is to use the escape () to encode the transmitted data, and then return the responseText on the unescape () to decode. However, in the JavaScript programming is usually not recommended to use escape () and unescape (), and recommended encodeURI () and decodeURI (). Consider the following "forms authentication instance", perhaps there is some coding knowledge you learn with the help of oh

First, jQuery's load (url, [data], [callback]) method

Syntax description: url address for the asynchronous request, data is used to transmit request data to the server, is optional. Once the data parameter is enabled, the request process will post the way, otherwise it defaults to get way. If you want to get under way to transfer data is also available in the url address followed by a similar "dataname1 = data1 & dataName2 = data2" approach. Ajax callback to run after a successful load callback function.
Also use the load () method returns the data, eliminating the need to consider a text or XML, jQuery will automatically be processed.

Well, the following immediate use load () method to achieve "automatic form validation" example.

First, html frame, five examples are the same, as follows:

<form>
User nickname: <input type="text" name="User"> <span> </ span> <br />
Enter password: <input type="password" name="passwd1"> <br />
Confirm Password: </ td> <td> <input type="password" name="passwd2"> <br />
<input type="submit" value=" Register ">
<input type="reset" value=" Reset ">
</ Form>

Necessary to state:
1, onblur = "startCheck (this)" This is the JavaScript code (called js)
Text means the text box loses focus from the custom function startCheck (), this is the text refers to the value of the text box.
2, <span> </ span> asynchronous object used to store the results returned.

jQuery code is as follows:

<script language="javascript" src="jquery.min.js"> </ script>
<script language="javascript">
function startCheck (oInput) {
/ / First, determine whether there is input, no input directly back, and prompt
if (! oInput.value) {
oInput.focus (); / / focus the input box to the user name
document.getElementById ("UserResult"). innerHTML = "User cannot be empty.";
return;
}
oInput = $. trim (oInput.value); / / use jQuery's $. trim () method of filtering space around
var sUrl = "action.asp? user =" + oInput;
sUrl = encodeURI (sUrl); / / use encodeURI () code, solve the garbage problem in Chinese
$ ("# UserResult"). Load (sUrl, function (data) {
$ ("# UserResult"). Html (decodeURI (data)); / / use decodeURI () decoding
}
);
}
</ Script>

Necessary to state:
1, the use of jQuery, the file must be loaded jquery.min.js can go to http://jquery.com/ official website to download the latest version.
2, to determine whether there is input, the use of all JavaScript syntax.
3, passed to the "processing page" encodeURI encoding parameters to solve the garbage problem in Chinese.
4, load () function in function is to decode the returned results decodeURI to solve the garbage problem in Chinese.
5, $. Trim (),$("# UserResult "), html and other jQuery syntax does not understand, can refer to the jQuery Chinese manual. Site available for download.

action.asp processing page code is as follows:

<%
if (Request ("user") = "eko") then
Response.Write "Sorry," & Request ("user") & "already exists."
else
Response.Write Request ("user") & "is ok."
end if
%>

Necessary to state:
1, action.asp handling page is encoded in GB2312, if the "Sorry .. already exists .. is ik", etc. English to Chinese, see the following instructions.
2, using the post method garbled, this is because handling asynchronous XMLHttpRequest object's responseText return when it is encoded by UTF-8 decoding.
3, so the post the way, they must save the action.asp page too, the third encoded by the ANST to UTF-8 (Please be sure to remember!!)

Second, the use of $. Get (url, [data], [callback]) and $. Post (url, [data], [callback]) method

Syntax Description: Despite the load () method can get and post in two ways, but often developers still hope to send a specified way, and deal with the value returned by the server. jQuery provides the $. get () and $. post () two methods, respectively, for both the request method. One, url address for the request, data request data for the list is an optional parameter, callback is requested after the success of the callback function, the function takes two arguments, the first parameter is the data returned from the server, the second parameter is server status, is optional. $. Post () the type is the type of request data, which can be html, xml, json, etc.

"Automatic verification form instance" of the jQuery code is as follows, html as described above.

<script language="javascript" src="jquery.min.js"> </ script>
<script language="javascript">
function createQueryString () {
var username =$("# User "). val ();
/ / Combined into the form of the object
var queryString = {user: username};
return queryString;
}
function startCheck (oInput) {
/ / First, determine whether there is input, no input directly back, and prompt
if (! oInput.value) {
oInput.focus (); / / focus the input box to the user name
document.getElementById ("UserResult"). innerHTML = "User cannot be empty.";
return;
}
oInput = $. trim (oInput.value); / / use jQuery's $. trim () method of filtering space around
$. Get ("action.asp", createQueryString (),
function (data) {
$ ("# UserResult"). Html (data);
});
}
</ Script>

Necessary to state:
1, $. Trim (),$("# UserResult "), html, val () and other jQuery syntax does not understand, can refer to the jQuery Chinese manual. Site available for download.
2, custom function createQueryString (), is introduced "processing page" parameters, for processing. A conventional method.
3, as is the way to get treatment, indicating that there is no need for encoding and decoding. To post the following manner, you need to encode and decode the code below

function createQueryString () {
/ / Use encodeURI () code to solve garbage problem in Chinese
var username = encodeURI ($("# User "). val ());
/ / Combined into the form of the object
var queryString = {user: username};
return queryString;
}
function startCheck (oInput) {
/ / First, determine whether there is input, no input directly back, and prompt
if (! oInput.value) {
oInput.focus (); / / focus the input box to the user name
document.getElementById ("UserResult"). innerHTML = "User cannot be empty.";
return;
}
oInput = $. trim (oInput.value); / / use jQuery's $. trim () method of filtering space around
$. Post ("action.asp", createQueryString (),
function (data) {
$ ("# UserResult"). Html (decodeURI (data));
});
}
</ Script>

Third, use $. Ajax () method

Syntax Description: Despite the load (),$. get () and $. Post () is very convenient and practical, but can not control the details of the error and a lot of interaction, these 3 methods can be said that the controllability of the poor Ajax. jQuery provides a powerful function of $. ajax (options) to set all the details of Ajax to access the server, its syntax is very simple to set various options for Ajax, and then specify the appropriate value. "Automatic verification form" example code as follows:

<script language="javascript" src="jquery.min.js"> </ script>
<script language="javascript">
function createQueryString () {
/ / Use encodeURI () code to solve garbage problem in Chinese
var username = encodeURI ($("# User "). val ());
/ / Combined into the form of the object
var queryString = {user: username};
return queryString;
}
function startCheck (oInput) {
/ / First, determine whether there is input, no input directly back, and prompt
if (! oInput.value) {
oInput.focus (); / / focus the input box to the user name
document.getElementById ("UserResult"). innerHTML = "User cannot be empty.";
return;
}
oInput = $. trim (oInput.value); / / use jQuery's $. trim () method of filtering space around
$. Ajax ({
type: "GET",
url: "action.asp",
data: createQueryString (),
success: function (data) {
$ ("# UserResult"). Html (decodeURI (data));
}
});
}
</ Script>

Necessary to state:
1, the code is basically the same, except $. Ajax (options) is slightly different, for its parameters can refer to jQuery Chinese do not understand the manual.
2, Jigejianyi, either way get or post methods are used to encode the Chinese to avoid a garbled question.
3 Again, no matter which program, if you encounter a problem, you can refer to the relevant manual explains that this is necessary for establishment of the station.

The above example uses jQuery's load () method, $. Get (),$. post (),$. ajax () of the 4 methods, we must consider the problem of Chinese garbled, following a method recommended to further simplify the jQuery code, hehe.

Fourth, the form plugin

Form Plugin (Form Plugin) is a very powerful plug-in jQuery official website is currently recommended for the 4 stars, you can http://plugins.jquery.com/project/form find relevant information, download the jquery.form.js file. The plug-in provides access to form data, reset the form item, use Ajax to submit the data and a series of features by the developer's favorite.

Use the form plugin, once again rewrite the "form validation example," complete code is as follows:

<form action="action.asp">
User nickname: <input type="text" name="User"> <input type="button" value=" Check "> <span> </ span> <br />
Enter password: <input type="password" name="passwd1"> <br />
Confirm Password: </ td> <td> <input type="password" name="passwd2"> <br /> <br />
<input type="submit" value=" Register "> <input type="reset" value=" Reset ">
</ Form>

html frame plus a "check" button (using the manual calibration method), jQuery is as follows:

<script language="javascript" src="jquery.min.js"> </ script>
<script language="javascript" src="jquery.form.js"> </ script>
<script language="javascript">
function startCheck (oInput) {
/ / First, determine whether there is input, no input directly back, and prompt
if (! oInput.value) {
oInput.focus (); / / focus the input box to the user name
document.getElementById ("UserResult"). innerHTML = "User cannot be empty.";
return;
}
}
$ (Function () {
$ ("Input [type = button]"). Click (function () {
var options = {
target: "# UserResult"
};
/ / Ajax form of
$ ("# Myform"). AjaxSubmit (options);
});
});
</ Script>

Necessary to state:
1, use the form plugin, the file must be loaded jquery.form.js.
2, according to Ajax submission of data, you can use the form plugin ajaxSubmit (options) to direct the manner in accordance with Ajax submit the form or use ajaxform (options) method, usually performed when the page loaded, used to form a unified Ajax technology, and submit the form still use the traditional submit button, only for the Ajax submission. Where the parameters options and $. Ajax (options) the same parameters, see jQuery manual.

分类:Java 时间:2011-04-25 人气:217
分享到:
blog comments powered by Disqus

相关文章

  • jQuery Form Plugin: AJAX submission form complete programs 2011-01-08

    Translated: http://www.malsup.com/jquery/form/ Introduction jQuery Form Plugin can be easily and implicitly to improve the HTML form using AJAX (Form). The main function ajaxForm and ajaxSubmit collect information from the form element and then decid

  • Ajax get form value of passing to the Servlet design 2009-07-02

    Now JavaWeb area, MVC framework for an increasing number of relatively well-known are Struts, Struts2, SpringMVC, WebWork and so on. The Ajax, as a specific dynamic Web programming language (such as Java, C #, PHP) unrelated to technology, but also h

  • Buffalo of the bind, reply, ajax, view, form applications (1) 2010-04-01

    Development Environment: JDK1.5 + Tomcat6.0.24 Send object and receive an object (a simple conversion example) A background class (entity type, service class) public class User implements Serializable ( private static final long serialVersionUID = 1L

  • Buffalo of the bind, reply, ajax, view, form applications (2) 2010-04-01

    Buffalo of the bind, reply, ajax, view, form applications (1) http://liuzidong.javaeye.com/blog/629893 Three data binding, provides the background html element and attribute values with binding Bean 1 html code <TABLE Border="1" jheight="

  • Buffalo of the bind, reply, ajax, view, form applications (3) 2010-04-01

    Preview article: Buffalo of the bind, reply, ajax, view, form applications (2) http://liuzidong.javaeye.com/blog/629898 4 and spring integration 1 spring version: spring-1.2.3.jar web.xml configuration code <context-param> <param-name> context

  • Chinese garbled jQuery form validation issue 2010-07-22

    Chinese garbled jQuery form validation issue Problem description: Form using jQuery for client-side validation, expected when the input is empty, in the text box behind the display to the corresponding Chinese tips. The results appear garbled, but wh

  • jquery实现ajax提交form表单的方法总结 2014-12-10

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", d

  • js.ajax submit the form, or return the object, the data (used to solve the problem ajax upload attachments) 2010-09-11

    Directly to the <script type="text/javascript"> $ (Document). Ready (function () ( $ ('# MyForm'). AjaxForm (function () ( )); )); </ Script> Required to return the object, the data: <script type="text/javascript"> $

  • Ajax and the XMLHttpRequest object 2009-03-13

    XMLHttpRequest object components are XMLHttp through this object, Ajax can be the same as desktop applications with the server only the exchange of data layers without having to refresh every time interface, the data do not have to deal with each of

  • AJAX - XMLHttpRequest Object Browser Support 2010-12-03

    AJAX is the XMLHttpRequest object points. Create a different browser XMLHttpRequest object is different. IE browser uses the ActiveXObject, while other browsers use the name The built-in JavaScript XMLHttpRequest object. For a different browser to cr

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.559 (s). 12 q(s)