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:
CopyCode The 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 code The 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 (...) returnCopy 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