Compatible: Opera 9.6 + Chrome 2.0 + FF 3 + IE 6
Effect: Validation is achieved while entering one side
Environment: Ruby 1.8.6 + rails 2.1.0 + windows
Core code:
Html:
Display a message when the browser disables javascript:
Copy Code code as follows:
<noscript>
<div style= "color:red" > your browser does not support JavaScript, some features are not available </div>
</noscript>
When the browser disables JS, the Submit button is not available to implement client-side validation!
Copy Code code as follows:
<div id= "Js_support" style= "Display:none" >
<p id= "Psubmit" ><input type= "Submit" "Name=" Registerform "value=" registered "onclick=" return SubmitForm (); /></p>
</div>
<script type= "Text/javascript" >
$ ("Js_support"). Style.display = "block";
</script>
Listening for form fields through JavaScript onfocus and onkeyup:
<input type= "text" class= "textbox" onfocus= "Checklogin (This)," onkeyup= "checklogin (this);" style= "width:120px;" >
Ajax Automatic Verification: one of the bp.js, is already encapsulated XMLHttpRequest object, can be downloaded to my project below
Copy Code code 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, through the render:p artial return data to the client, of course, can be any platform, such as the Java platform can use the servlet out.println (...) Return
Copy Code code as follows:
def response_validate
If Params[:login]
name = Params[:login]
Puts name
If name = = "AAAAAA"
@value = True
Render:p artial => ' Show_info '
Else
@value = False
Render:p artial => ' Show_info '
End
End
End
Full source Download:
Jsvalidate.rar