Sharing (recommended) _javascript techniques using remote validation code from bootstrap validator

Source: Internet
Author: User

Here's what you need to say, Bootstrapvalidator's help document is simpler to write, and more so for remote validators, and to know how to use the validator after a multi-party test.

A typical Ajax validation code is as follows:

The server-side validation code (using spring MVC) is as follows:


* * Returns String type result * Checks the legality of the username, returns
False if the user already exists, or returns True (returns the JSON data, in the format {"Valid", true}) *
*
Requestmapping (value = "/checknameexistsmethod1", produces = "application/json;charset=utf-8") Public
@ Responsebody
string checkNameValidMethod1 (@RequestParam string name) {
Boolean result = true;
list<employee> lstemployees = Employeeservice.getallemployees ();
for (Employee employee:lstemployees) {
if (Employee.getname (). Equals (name)) {result
= false;
break;
}
}
map<string, boolean> map = new hashmap<> ();
Map.put ("valid", result);
Objectmapper mapper = new Objectmapper ();
String resultstring = "";
try {
resultstring = mapper.writevalueasstring (map);
} catch (Jsonprocessingexception e) {
E.printstacktrace ();
}
return resultstring;
}

What needs to be explained here is that the return result required by the bootstrap remote validator must be JSON-formatted data:

{"Valid": false}//is illegal, validation does not pass
{"valid": true}//representation is valid, validation passes

If any other value is returned, page validation will not obtain validation results that cannot be validated.

With a complete set of code plus instructions for remotely remote authentication:

$ (function () {/* document loading, executing a functions */$ (' #defaultForm '). Bootstrapvalidator ({message: ' This value isn't valid ', feedbackicons: {/*input state style picture * * valid: ' Glyphicon glyphicon-ok ', invalid: ' Glyphicon glyphicon-remove ', validating: ' Glyphicon Glyphicon-refresh '}, Fields: {/* authentication: Rule/Username: {//Validate input entry: Validation Rule message: ' The username are not valid ', validators: {No Tempty: {//non-null authentication: Prompt message: ' User name cannot be empty '}, Stringlength: {min:6, max:30, message: ' username must be 6 to 30 in length '}, Threshold:6,/ /There are more than 6 characters to send the AJAX request, (input in a character, the plugin will send to the server once, set the limit, more than 6 characters to start) Remote: {//ajax authentication. Server result:{"Valid", True or false} sends the current input name value to the service to obtain a JSON data. Example is correct: {"valid", true} URL: ' exist2.do ',//Verify Address message: ' User already exists ',//prompt messages delay:2000,//each character, send an AJAX request, server pressure is still too large,
Set 2 seconds to send Ajax (default input one character, submit once, server pressure too Large) type: ' Post '//Request mode/** Custom submit data, default value submit current input value * Data:function (validator) { return {password: $ (' [name= ' passwordnameattributeinyourform] '). Val (), Whatever: $ (' [name= ']
Whatevernameattributeinyourform "]). Val ()}; } */}, RegExp: {regexp:/^[a-za-z0-9_\.] +$/, message: ' username is underlined by alphanumeric letters and. Composition '}}, Password: {message: ' Invalid password ', validators: {notempty: {message: ' Password cannot be empty '}, Stringle Ngth: {min:6, max:30, message: ' username length must be between 6 and 30 '}, identical: {///same field: ' Password ',////The input name value message to be compared: ' Two Secondary password inconsistency '}, different: {//cannot be the same as Username field: ' username ',//need to compare input name value message: ' cannot be the same as user name '}, RegExp: {regexp:/^[a-za- Z0-9_\.] +$/, message: ' The username can only consist of alphabetical, number, dot and underscore '}}, Repassword: {message: ' Secret Code invalid ', validators: {notempty: {message: ' User name cannot be empty '}, Stringlength: {min:6, max:30, message: ' username must be 6 to 30 in length '}, Identi Cal: {//same field: ' Password ', message: ' Two password inconsistent '}, different: {//cannot be the same field as Username: ' username ', message: ' cannot be the same as user name '}, regex P: {//matching rule regexp:/^[a-za-z0-9_\.] +$/, message: ' The username can only consist of alphabetical, number, dot and underscore '}}, email: {validators: {No Tempty: {message: ' Mail cannot be empty '}, EmailAddress: {messages: ' Please enter the correct email address such as: 123@QQ.com '}}, Phone: {message: ' The ' phone isn't valid ', validators: {notempty: {message: ' Mobile number cannot be empty '}, Stringlength: {m In:11, max:11, message: ' Please enter 11-digit mobile number '}, RegExp: {regexp:/^1[3|5|8]{1}[0-9]{9}$/, message: ' Please enter the correct mobile number '}}, invite: {message: ' Invitation code ', validators: {notempty: {: ' The invitation code cannot be empty '}, Stringlength: {min:8, max:8, note: ' Please enter the invitation code of the correct length '} , regexp: {regexp:/^[\w]{8}$/, message: ' Please enter the correct invitation code (contains the numeric letters) '}}}}. On (' Success.form.bv ', function (e) {//click submit//
Prevent form submission E.preventdefault ();
Get the form instance var $form = $ (e.target);
Get the Bootstrapvalidator instance var bv = $form. Data (' Bootstrapvalidator '); Use Ajax to submit form data is submitted to the Action,result custom $.post ($form. attr (' action ') in the form label, $form. Serialize (), function (
Result) {//do something ...});
}); });

The above is a small series to introduce the use of Bootstrap validator remote verification experience to share (recommended), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.