First, the string length limit
通过“maxlength ”限制：<input type="text" name="lname" maxlength="5" /><br /> 通过“JavaScript事件 ”限制：<input type="text" data-length='5' id='limitLength' data-model='Ch' name="lname"/><br />
. 1 the window.onload = function () { 2 var limitLength = document.getElementById ( "limitLength"), // Get the restriction target . 3 clearNonumber = function (tThis) { // erase digits . 4 var _V = tThis.value, . 5 _vLen = _v.length, . 6 dataLength = tThis.getAttribute ( "Data-length"), // get the length of the attribute . 7 the dataModel = tThis.getAttribute ( "Model-Data" ), . 8 subLen = dataLength; 9 if (_vLen > dataLength) tThis.value = _v.substr(0, subLen); //判断长度 10 if (remainingCharacters) { 11 self.showRemainingCharacters(!_vLen ? dataLength : (_vLen > 12 dataLength ? 0 : dataLength - _vLen), remainingCharacters); 13 } 14 }; 15 limitLength.onfocus = function () { //获取焦点事件 16 clearNonumber(this); 17 } 18 = limitLength.onkeyup function () { // keyboard events . 19 clearNonumber ( the this ); 20 is } 21 is limitLength.onblur = function () { // loses focus events 22 is clearNonumber ( the this ); 23 is } 24 };
Second, identification password strength
< H2 > password strength verified in real-time </ H2 > < INPUT ID = "passwordStrength" Data-hint = 'Please input password' type = "password" > < span ID = "showStrength" > </ span >
1 window.onload = function(){ 2 function setCss(_this, cssOption){//设置样式 3 if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) { 4 return; 5 } 6 for(var cs in cssOption){ 7 _this.style[cs] = cssOption[cs]; 8 } 9 return _this; 10 } 11 12 function trim(chars){//The spaces around the removal string 13 is return (chars || "") .replace (/ ^ (\ S | \ u00A0) + | (\ S | \ u00A0) + $ / G, "" ); 14 } 15 16 function passwordStrength (passwordStrength, showStrength) { . 17 var Self = the this ; 18 is / * characters weight: 19 the number 1, the letter 2, other characters 3 20 is when the password is less than 6 do not meet the standards, 21 great length = 6 strength of less than 10 , weak intensity 22 , a length greater strength = 6> = 10 <15, intensity, 23 a length greater strength = 6> = strong 15 * / 24 passwordStrength.onkeyup = function () { 25 var _Color = [ "Red", "Yellow", "Orange", "Green" ], 26 is Msgs = [ "short code", "weak", "medium", "strong" ], 27 _strength = 0 , 28 = _V TRIM (passwordStrength.value) 29 _vL = _v.length, 30 I = 0 ; 31 is 32 var charStrength = function ( char ) { // calculate a single strength character 33 is IF ( char > = 48 && char <= 57) { // number 34 return . 1 ; 35 } 36 IF ( char > = 97 && char <= 122) { // lowercase 37 [ return 2 ; 38 is } the else { 39 return . 3; // special characters 40 } 41 is } 42 is 43 is IF (_vL <. 6) { // calculation mode 44 is showStrength.innerText = Msgs [0 ]; 45 setCss (showStrength, { 46 is "color":_color[0] 47 }) 48 }else{ 49 for( ; i < _vL ; i++){ 50 _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i)); 51 } 52 if(_strength < 10){ 53 showStrength.innerText = msgs[1]; 54 setCss(showStrength, { 55 "color":_color[1] 56 }) 57 } 58 if(_strength >= 10 && _strength < 15){ 59 showStrength.innerText = msgs[2]; 60 setCss(showStrength, { 61 "color":_color[2] 62 }) 63 } 64 if(_strength >= 15){ 65 showStrength.innerText = msgs[3]; 66 setCss(showStrength, { 67 "color":_color[3] 68 }) 69 } 70 } 71 } 72 } 73 passwordStrength( 74 document.getElementById("passwordStrength"), 75 document.getElementById("showStrength")); 76 };
Third, the carriage return submitted
<input type="text" id="enterSubmit" value="回车提交">
1 window.onload = function(){ 2 document.getElementById("enterSubmit").onkeyup = function(e){ 3 e = e || window.event; 4 var keycode = e.keyCode || e.which ||e.charCode; 5 if(keycode === 13){ 6 alert("回车提交成功"); 7 } 8 9 } 10 };
Fourth, a common verification
<h2> common validation rules </ H2> <P> <INPUT type = "text" value = 'name verification' data-reg = 'Chinese' data-smsg = ' by √' data-emsg = 'Enter Chinese 'ID =' regUser 'Data-TMSG =' msgU '/> <span ID =' msgU '> </ span> </ P> <P> <INPUT type = "text" value =' mail verification 'data-reg = 'email' data-smsg = ' by √' data-emsg = 'Please enter the mailbox' id = 'regEmail' data- tmsg = 'msgE' /> <span id = 'msgE'> </ span> </ p > <P> <iNPUT type = "text" value = 'phone verification' data-reg = 'phone' data-smsg = ' by √' data-emsg = 'enter phone' id = 'regPhone' data- tmsg = 'msgp' /> <span ID = 'msgp'> </ span> </ P> <P> <INPUT type = "text"value = 'digital certificates with decimal places' data-reg = 'decimalNumber' data-smsg = 'by √' data-emsg = 'Please enter a decimal number' id = 'regNumber' data-tmsg = 'msgN' /> < span id = 'msgN'> </ span> </ p>
. 1 the window.onload = function () { 2 var getRegular = function (RSTR) { . 3 var Regdata = {}; // regular data storage domain . 4 regData.rtrim = / ^ (\ S | \ u00A0) + | (\ S | \ u00A0) + $ / G; // removing regular spaces . 5 regData.Chinese = / [\ u4e00- \ u9fa5] / G; // Chinese . 6 regData.nonumber = / \ D / G; // number . 7 Regdata = .nochinese / [^ \ u4e00- \ u9fa5] / G; // non Chinese 8 regData.email = /^\s*[a-zA-Z0-9]+(([\._\-]?)[a-zA-Z0-9]+)*@[a-zA-Z0- 9] +. ([_ \ -] [a-zA-Z0-9] +) * (\ [a-zA-Z0-9] + ([_ \ -] [a-zA-Z0-9] + ) *) + \ $ S * /; // message . 9 ? regData.phone = / ^ (([0 \ +] \ D {2,3} -) (0 \ D {2,3}) -) ( \ D {7, 8}) (- (\ D {. 3,})) {0,} $ /; // telephone 10 regData.decimalNumber = /^\d+(\.\d+)+$/; // numbers with decimal places . 11 regData.htmlTags = / <[\ / \!] * [^ <>] *> / IG; // HTML 12 is 13 is return Regdata [RSTR]; 14 15 }, 16 forElementArr = function (_elementArr , callBack) { . 17 var arr =_elementArr, 18 self = this 19 ; 20 21 if(!(_elementArr instanceof Array)) { 22 arr = [_elementArr]; 23 }; 24 for(var i= 0,arrLen = arr.length ;i<arrLen;i++){ 25 var arrI = arr[i]; 26 if(typeof arrI == "string"){ 27 arrI = self.getElement(arrI); 28 } 29 callBack && callBack(i, arrI); 30 } 31 }, 32 verification = function(str, reg){ 33 return getRegular(reg).test(str); 34 }, 35 setCss = function(_this, cssOption){ 36 if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) { 37 return; 38 } 39 for(var cs in cssOption){ 40 _this.style[cs] = cssOption[cs]; 41 } 42 return _this; 43 }; 44 45 forElementArr([ 46 document.getElementById("regUser"), 47 document.getElementById("regEmail"), 48 document.getElementById("regPhone"), 49 document.getElementById("regNumber") 50 ], function(index, _this){ 51 52 = _this.onkeyup function () { 53 is var _V = the this .value.replace (/ ^ (\ S | \ u00A0) + | (\ S | \ u00A0) + $ / G, ""), // acquires processed element value 54 is the _reg = the this .getAttribute ( "Data-REG"), // Get regular 55 __reg = _reg.indexOf ( ",")> 0 _reg.split ( ","):? [the _reg], // If containing, "" it is converted into a plurality of groups 56 is _regLen = __reg.length, // length of the array 57 is _emsg = the this .getAttribute ( "Data-emsg"), // error message is displayed 58 = _smsg the this .getAttribute ( "SMSG-Data"), // by the information display 59 _target = document.getElementById ( the this .getAttribute ( "Data-TMSG")), // acquires the display element information 60 I = 0 ; 61 is for (; I <_regLen; I ++ ) { 62 is IF (! the Verification (_V, __reg [I])) { 63 is _target.innerHTML = _emsg; 64 setCss (_target, { 65 "Color": "Red" 66 }) 67 return; 68 } 69 } 70 _target.innerHTML = _smsg ; 71 setCss(_target, { 72 "color":"green" 73 }) 74 } 75 }); 76 };
Fifth, radio
<h2> determines whether the check box is selected </ H2> <INPUT type = "Radio" name = 'Sex' ID = 'sexman' = the checked "the checked"> M /> <br <INPUT type = "Radio" name = 'sex' id = 'sexWoman' > female
1 window.onload = function(){ 2 var sexMan = document.getElementById("sexMan"), 3 sexWoman = document.getElementById("sexWoman"); 4 if(sexMan.checked){ 5 console.log("sexMan 被选中") 6 }else{ 7 console.log("sexMan 未被选中") 8 } 9 10 if(sexWoman.checked){ 11 console.log("sexWoman 被选中") 12 }else{ 13 is the console.log ( "sexWoman unselected" ) 14 } 15 };