Ajax Form Verification implementation code

Compatible with: opera 9.6 + chrome 2.0 + FF 3 + IE 6
Effect: verification is performed on the input side.
 
Environment: ruby 1.8.6 + rails 2.1.0 + windows
Core code:
Html:
The prompt message is displayed when the browser disables javascript:
Copy codeThe Code is as follows:
<Noscript>
<Div style = "color: red"> your browser does not support javascript and some functions cannot be used </div>
</Noscript>

When the browser disables JS, the submit button is unavailable for client verification!
Copy codeThe Code is as follows:
<Div id = "js_support" style = "display: none">
<P id = "pSubmit"> <input type = "submit" name = "registerform" value = "" onclick = "return submitform (); "/> </p>
</Div>
<Script type = "text/javascript">
$ ("Js_support"). style. display = "block ";
</Script>

Use onfocus and onkeyup in javascript to listen to form fields:
<Input type = "text" class = "textbox" onfocus = "checkLogin (this);" onkeyup = "checkLogin (this);" style = "width: 120px;"/>
Automatic ajax verification: a bp. js object is an encapsulated xmlhttprequest object, which can be downloaded to my project below
Copy codeThe Code is as follows:
Function checkLogin (node ){
ClearError ();
If (bp. String. trim (node. value )! = ""){
Var url = "/test/response_validate ";
Var params = [];
Params ["command"] = "logincheck ";
Params ["login"] = encodeURI (bp. String. trim (node. value ));
Var v = validatePath ("login", params ["login"]);
If (v = ""){
Bp. Io. XhrGet ({
Url: url,
MimeType: "text/json ",
Params: params,
Load: function (type, data, e ){
If (data = true ){
LoginError = document. getElementById ("valstatus"). innerHTML = 'login name already exists ';
Document. getElementById ("loginValidate"). className = "icon_cross ";
Node. className = "input_error ";
LoginValid = false;
} Else {
LoginError = "";
Document. getElementById ("loginValidate"). className = "icon_ OK ";
Node. className = "textbox ";
LoginValid = true;
}
},
Error: function (type, data, e ){}
});
} Else {
LoginError = document. getElementById ("valstatus"). innerHTML = v;
Document. getElementById ("loginValidate"). className = "icon_cross ";
Node. className = "input_error ";
LoginValid = false
}
} Else {
LoginError = validatePath ("login ","");
Document. getElementById ("loginValidate"). className = "";
Node. className = "textbox ";
}
}

Background:
This is the background of rails. It returns data to the client through render: partial. Of course, it can be on any platform. For example, the servlet out can be used on the java platform. println (...) return
Copy codeThe Code is as follows:
Def response_validate
If params [: login]
Name = params [: login]
Puts name
If name = "aaaaaa"
@ Value = true
Render: partial => 'show _ info'
Else
@ Value = false
Render: partial => 'show _ info'
End
End
End

Download the complete source code:
Jsvalidate.rar