JavaScript form validation Development _javascript tips

This article examples for you to share a JS form verification of the specific code for your reference, the specific content as follows

Online demo:http://www.hui12.com/nbin/csdn/jsinput/demo.html

Effect Chart:

/* Authentication type testname: "Authenticated User", Testpassword: "Password", Testphone: "Mobile number", TESTQQ: "Verify QQ", Testlength: "Verify whether within the specified length",///3 parameters, Min  
and Max Testemail: "Verify Mailbox", Testsame: "Two element comparison is the same",//Accept two parameters TESTWX: "Authentication Micro-letter nickname", Testplane: "Verify the Landline", Testmancard: "Verify ID Card" * * 
 /* Use method * Create Instance object var a = new Testinput (); * Incoming DOM-JQ objects and corresponding detection methods * A.ADD ([$ (". TestName"), "testname"]), in the form of an array * can accept 2 arrays of multiple-pass A.add ([[$ (". TestName"), "testname"], [$ (". TestName"), "testname"]) * Detection method * A.get ($ (". TestName")) gets a single result, returns the result as JSON {result: ' results ', text: ' Prompt '} * a.get ([$ (" . TestName "), $ (". TestName ")]) gets the specified result returned as an array [{obj: ', Result: ', txt: '}, {obj: ', Result: ', txt: '}] * A.get () If you do not pass in the argument, Gets all results, does not contain special verification testlength, Testsame * Special detection * Detects whether the byte length is within the specified range A.get ([$ (". Testlength"), Min, max]) minimum maximum, number type * detection  Two input consistency (2 password confirmation) a.get ([$ (". Testsama"), $ (". Testsama"), "Same"]) the first two are comparison objects, and the third is a fixed required parameter/(function (window, $) {var 
  Proto = {testname:function ($obj) {var str = $obj. val (); 
 if (!this.checknormal (str)) { return {result:false, txt: "Consists of letters, numbers, underscores"}}; 
  if (!this.checklength (str,6,20)) {return {result:false, txt: "Length within 6-20 characters}};" 
  if (!this.checkfirsta (str)) {return {result:false, txt: "The first character cannot be a number"}}; 
 return {result:true, txt: "'}}, Testpassword:function ($obj) {return this.testname ($obj); 
  }, Testphone:function ($obj) {var str = $obj. val (); 
  var re =/^1\d{10}$/; if (Re.test (str)) {return {result:true, txt: ' "}}else{return {result:false, txt:" Mobile number 
  Consists of 11 digits "}}}, Testqq:function ($obj) {var str = $obj. val (); 
  var re =/^\d{5,10}$/; if (Re.test (str)) {return {result:true, txt: '}}else{return {result:false, txt: ' 5~10  Bit number '}}, Testlength:function ($obj, A, b) {if (This.checklength ($obj. Val (), a,b)) {return {result: True}}else{return {Result:false}}}, Testemail:function ($obj) {var re =/^ (\w-*\.*) +@ (\w-?) 
  + (\.\w{2,}) +$/; 
  var str = $obj. val (); 
  if (Re.test (str)) {return {result:true, txt: ""}; 
 }else{return {result:false, txt: "Incorrect mailbox Format"};  
  }, Testsame:function ($obj 1, $obj 2) {if ($obj 1.val () = = $obj 2.val ()) {return {result:true, txt: ""}  
  }else{return {result:false, txt: "Inconsistent"}}, Testwx:function ($obj) {var str = $obj. val (); 
  var reg =/^[a-z_\d]+$/; 
  if (Reg.test (str)) {return {result:true, txt: ""}; 
  }else{return {result:false, txt: "}}}, Testplane:function ($obj) {var str = $obj. val (); 
  var reg =/^\d{3,4}-\d{5,8}$/; if (Reg.test (str)) {return {result:true, txt: ' "}}else{return {result:false, txt:" format 
  : 010-1234567 "}}}, Testmancard:function ($obj) {var str = $obj. val (); var reg =/(^\d{15}$) | (^\d{18}$) | (^\d{17} (\d| 
  X|X) $)/; 
  if (Reg.test (str)) {return {result:true,}}else{return {result:false, text: "Please enter the correct ID number" 
  }},/* Detection method/checkempty:function (str) {if (Str.trim () = = "") {return false; 
  }else{return true; 
  },///detect whether the first letter is a digital checkfirsta:function (str) {var-str.charat (0); 
  if (/\d/.test (a) {return false; 
  }else{return true; },///Detect number + letter Checknormal:function (str) {var reg =/^ ([a-z]+[0-9]+) | ( 
  [0-9]+[a-z]+)] [a-z0-9]*$/i; 
  if (Reg.test (str)) {return true; 
  }else{return false; 
  },//Detect if Checklength:function (str,a,b) {var min = a | | 6 in spec length) var max = B | | 
  20; 
  var length = Str.length; 
  if (length>=a && length <= b) {return true; 
  }else{return false; 
  },//Add:function (arr) {!this.cache && (This.cache = []); 
  var istwo = $.isarray (arr[0]); if (istwo) {This.cache = This.cache.concat(arr); 
  }else{This.cache.push (arr); 
  }; 
 return this; 
  }, Get:function () {var this = this; 
  var args = arguments; 
  if (Args.length = = 0) {//Detect all, return array result var TMP = []; 
   $.each (This.cache, function (i, Val) {var newArr = [].concat (val); 
   Newarr.splice (1,1); 
  Tmp.push (NEWARR); 
  }); 
  Return merges (tmp,10); 
   }else{if ($.isarray (args[0)) {//[obj,obj,obj] var tmp = []; 1. One detection with parameter 2,3 [obj,2,3]//2, one detection, and the other is equal [Obj,obj, ' same ']//3, multiple detections, return multiple results. 
   [Obj,obj], and may appear above 2 kinds of situation if (!isnan (args[0][1)) | |!isnan (ARGS[0][2))) {Tmp.push (args[0]); 
   Return merges (TMP, 1); 
   }; 
   if (args[0][2] = = ' same ') {Args[0].splice (2,1); 
   Tmp.push (Args[0]); 
   Return merges (TMP, 1); 
   }; 
   $.each (Args[0], function (I, Val) {if ($.isarray (val)) {Tmp.push (val); 
   }else{Tmp.push ([Val]); 
   }; 
   }); 
  Return merges (TMP); 
  }else{//General return merges ([[[Args[0]]], 1); 
  } 
  }; function merGES (arr, one) {//arr = [[Obj,a,b], [obj]] var result = []; 
   $.each (arr, function (I, Val) {var oldname = val[0][0]; 
   var tname; 
    $.each (This.cache, function (i2,val2) {if (oldname = = Val2[0][0]) {tname = val2[1]; 
   return false; 
   }; 
   }); 
   var R; 
   if (Tname = = "Testlength" | | | tname = = "Testsame") {r = {tname: "Please get Alone"}; 
   }else{r = this[tname].apply (this, Val); 
   }; 
   }else{r = this[tname].apply (this, Val); 
   }; 
   if (one==1) {Result.push (R); 
   return false; 
   }; 
   R.obj = val[0]; 
  Result.push (R); 
  }); Return one==1? 
  RESULT[0]: result; 
 }; 
 } 
 }; 
 function Test () {return this; 
 }; 
 Test.prototype = Proto; 
 Test.prototype.constructor = Test; Window. 
Test = test;  }) (window, jQuery)

Talking about the idea of the add and get method

Forms and rules correspond, in array form "forms, rules"

Add:function (arr) { 
 !this.cache && (This.cache = []); 
 var istwo = $.isarray (arr[0]); 
 if (istwo) { 
 This.cache = This.cache.concat (arr); 
 } else{ 
 This.cache.push (arr); 
 }; 
 return this; 

Cache is used to save values
Istwo is used to determine whether 2 times array, 2 times array to pass multiple values

Get method

var this = this; 
var args = arguments; 
if (Args.length = = 0) { 
 //detect all, return array result 
 var tmp = []; 
 $.each (This.cache, function (i, Val) { 
 var newArr = [].concat (val); 
 Newarr.splice (1,1); 
 Tmp.push (NEWARR); 
 }); 
 Return merges (tmp,10); 
} 

If there is no value, all results are obtained, and all execution is performed in the merges function, merges the first parameter is a detection element, the structure is a 2-time array, [[[Obj,a,b], [obj]], because there are special detections with parameters, All at once the array is actually the test element and the parameter value to use, the second parameter is a special parameter, the latter is used to judge whether it is all detection, use splice to intercept the second parameter, the second parameter is the detection method, the following is not used, after the interception of the array is "DOM, parameters"

}else{ 
 if ($.isarray (args[0)) {//[obj,obj,obj] 
 var tmp = []; 
 1. One detection with parameter 2,3 [obj,2,3] 
 //2, one detection, and the other is equal [Obj,obj, ' same '] 
 //3, multiple detections, return multiple results. [Obj,obj], and may appear above 2 kinds of situation 
 if (!isnan (args[0][1)) | |!isnan (ARGS[0][2))) { 
  Tmp.push (args[0]); 
  Return merges (TMP, 1); 
 }; 
 if (args[0][2] = = ' same ') { 
  args[0].splice (2,1); 
  Tmp.push (Args[0]); 
  Return merges (TMP, 1); 
 }; 
 $.each (Args[0], function (I, Val) { 
  if ($.isarray (val)) { 
  Tmp.push (val); 
  } else{ 
  Tmp.push ([Val]); 
  } 
 ;}; Return merges (TMP); 
 } else{ 
 //General return 
 merges ([[[Args[0]]], 1); 
 } 
; 

$.isarray (Args[0]) is used to determine whether an array, not an array, is a DOM object, executes the merges ([[Args[0]], 1), and the first parameter is set to a 2-time array, as mentioned above, followed by 1 for the subsequent results, and 1 to return the JSON result directly
For real, there are three more cases, and the relative of the remark

function merges (arr, one) {//arr = [[Obj,a,b], [obj]] var result = [];<span style= "White-space:pre" > </span& gt;//returns results $.each (arr, function (I, Val) {var oldname = Val[0][0];<span style= "White-space:pre" > </span>//va L is 1 times array, get source Dom object var tname;<span style= "White-space:pre" > </span>//Execute Method Name $.each (This.cache, function (i2 , Val2) {if (oldname = = Val2[0][0]) {<span style= "White-space:pre" > </span>//if the incoming DOM is the same as the cache saved DOM, get DOM 
  Execution method tname = val2[1]; 
  return false; 
 }; 
 }); 
 var R; if (one = ten) {<span style= "White-space:pre" > </span>//all obtained, special handling for special detection if (Tname = "Testlength" | | tname = 
  = "Testsame") {r = {tname: "Please get Alone"}; 
  }else{r = this[tname].apply (this, Val); 
 }; 
 }else{<span style= "White-space:pre" > </span>//gets a single detection result r = this[tname].apply (this, Val); 
 }; 
  if (one==1) {<span style= "White-space:pre" > </span>//if 1, only single detection, the result is [{}], and then jump out of Result.push (R);return false; 
 }; R.obj = Val[0];<span style= "White-space:pre" > </span>//did not perform 1 of the judgment, the description is multiple element detection, manually add an obj attribute, convenient return value query, the result is [{},{ 
 }...] 
 Result.push (R); 
 }); Return one==1?
 Result[0]: Result;<span style= "White-space:pre" > </span>//returns different results for incoming parameters};

If you still want to learn more, you can click on two wonderful topics: jquery form verification Encyclopedia JavaScript form Verification Encyclopedia

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.