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.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of 5 ways to use jQuery override form validation examples

  • hibernate using c3p0 connection pooling

    Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Spring + Hibernate to use Glassfish Database Connection Pool

    applicationContext.xml file content <? xml version = "1.0" encoding = "UTF-8"?> <beans xmlns = " http://www.springframework.org/schema/beans " xmlns: xsi = " http://www.w3.org/2001/XMLSchema-instance " ...

  • Process migration from tomcat to websphere changes

    Process migration from tomcat to websphere changes Because customers use the web application server software used by different what tomcat5, tomcat6, websphere5.1, websphere6.1, weblogic8, and so on, and the software used inconsistent standards, ibm's

  • JAVA EE JSP_JNDI

    dsfdsa http://lindows.javaeye.com/admin/blogs/213348 Tomcat 6 with the connection pool data source configuration http://www.blogjava.net/ec2008/archive/2008/07/19/216063.html project: test Driver path: D: \ workspace \ test \ WebRoot \ WEB-INF \ lib ...

  • In the servlet use Bean

    According to Sun's definition, JavaBean is a reusable software components. In fact JavaBean is a Java class, through the package into a property and methods of treatment of a function or a business object, referred to as bean. Because JavaBean is ...

  • Servlet brief introduction

    Servlet brief introduction: Servlet is a small application server Are used to complete the B / S architecture, the client requests the response to treatment Platform independence, performance, able to run thread Servlet API for Servlet provides the s ...

  • Spring2.0 + hibernate3.1 + log4j + mysql demo

    applicationContext.xml Non-attachment jar package, necessary friends can send an email to todd.liangt @ gmail.com

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries