1. Existing problems As I mentioned in the previous article, the verification prompt intends to display the prompt message in two ways: text and style. Both of these prompts can only be used alone, so Some extensions have been made to the new and new content so that both can be used together. The verification of required fields written in the previous article only applies to the two form elements Text and TextArea. In the new extension, the two elements radio and checkbox are also supported.
2. Design of verification parameters Based on the consideration of multiple selections, some necessary parameters have been expanded. The parameter list is as follows: required: Whether it is required, true and false, true represents a required item (*) onFocusText: text prompt to obtain focus onFocusClass: style after obtaining focus onErrorText: text prompt for verification error onErrorClass: verification error Style prompt onSuccessText: Verification success text prompt onSuccessClass: Verification success style prompt targetId: The ID number of the prompt information element
has been modified compared to the previous one. I have seen it As you will know from previous articles, I separated styles and text separately, before they were mixed together. This is also a step considered for expansion needs. Then changed the name of the error message prompt parameter.
3. Source code analysis jQuery form validation extension’s verification whether it is a required item source code
$.fn.extend({ checkRequired:function(inputArg){ //Only required fields will be verified, non- Required items are meaningless if(inputArg.required){ //Verify whether it is an input box form if($(this).is("input") || $(this).is ("textarea")){ //Get the focus prompt $(this).bind("focus",function(){ //If the text exists, do not replace the prompt style if ($(this).val() != undefined && $(this).val() != "") { //Display the correct information text addText(inputArg.targetId,inputArg.onSuccessText); //Switch style addClass(inputArg.targetId,inputArg.onSuccessClass); }else{ //Display the focus text addText(inputArg.targetId,inputArg.onFocusText); //Switch style addClass(inputArg.targetId,inputArg.onFocusClass); } }); //Lost focus prompt $(this).bind(" blur",function(){ if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){ var name=$(this).attr("name"); var items=$('input[@name="" name ""][checked]'); if(items.length> ;0){ addMessage(true,inputArg); }else{ addMessage(false,inputArg); } }else{ if($(this). val()!=undefined && $(this).val()!=""){ addMessage(true,inputArg); }else{ addMessage(false,inputArg); } } }); } } } }); /** * Determine based on the different types of input boxes * @param {Object} flag * @param {Object} inputArg */ function addMessage(flag,inputArg) { if(flag){ //Display the correct information text addText(inputArg.targetId,inputArg.onSuccessText); //Switch style addClass(inputArg.targetId,inputArg. onSuccessClass); }else{ //Display error message text addText(inputArg.targetId,inputArg.onErrorText); //Switch style addClass(inputArg.targetId,inputArg. onErrorClass); } } /** * Add displayed text information to the target control * @param {Object} targetId target control id * @param {Object} text text information to be displayed */ function addText(targetId,text){ if(text==undefined){ text=" "; } $("#" targetId).html(" " " text); } /** * Switch style * @param {Object} targetId target control id * @param {Object} className Displayed style name */ function addClass(targetId,className){ if(className!=undefined && className!=""){ $("#" targetId).removeClass(); $("#" targetId).addClass(className); } }
Everyone who has used jQuery knows that jQuery is a very easy-to-extend framework, which provides functions for extending the core library. This form validation is extended based on this extension function. Some code reusability issues are also considered here, and common code is separated, which greatly reduces the final code. jQuery form validation extension required common method extraction
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn