用1-5序号标注代码逻辑顺序，用注释讲解代码运行用途，如有错误欢迎指正。 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/8527.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .ok{color:green} .err{color:red} .hidden{display:none} </style> </head> <body> <form> 密码:<input id="upwd" type="password"> <span id="msgUpwd" class="hidden">必须6位数字</span><br> 生日:<input id="birth"> <span id="msgBirth" class="hidden">必须符合日期格式</span><br> 身份证号:<input id="pid"> <span id="msgPid" class="hidden">必须符合身份证号格式规范</span><br> 手机号:<input id="mobile"> <span id="msgMobile" class="hidden">必须符合手机号格式规则</span><br> 邮箱:<input id="email"> <span id="msgEmail" class="hidden">必须符合邮箱格式规则</span><br> qq:<input id="qq"> <span id="msgQQ" class="hidden">必须符合qq号格式规范</span><br> <input id="btnSubmit" type="button" value="提交"> </form> <script> //4、通过失去焦点时获取的4个数据，进行reg.test(正则.test)判断数据格式并返回状态 function vali(elem,reg,msgSpan,errMsg){ if(reg.test(elem.value)){//如果验证通过 msgSpan.innerHTML="格式正确!"; msgSpan.className="ok"; return true; }else{//否则 msgSpan.innerHTML=errMsg; msgSpan.className="err"; return false; } } function bind(elem,reg,msgSpan,errMsg){ //2、当密码框获得焦点时，通过bind传来的4个数据，对应的显示内容 elem.onfocus=function(){ msgSpan.className=""; msgSpan.innerHTML=errMsg; }; //3、当密码框失去焦点时，调用vali函数，并传入从bind函数传来的4个数据 elem.onblur= elem.onkeyup=function(){ vali(elem,reg,msgSpan,errMsg) } } //1、一开始，就首先就往bind函数中传入对应的4个属性。 bind(upwd,/^\d{6}$/,msgUpwd,"必须是6位数字"); //获得焦点就会显示提示 bind( birth, /^\d{4}\/\d{2}\/\d{2}$/, msgBirth, "必须符合日期格式" ); bind( pid, /^\d{15}(\d{2}[0-9Xx])?$/, msgPid, "必须符合身份证号格式" ); //5、按下提交按钮，再次获取4个数据，并通过返回的状态，全通过才能下一步。 btnSubmit.onclick=function(){ var rUpwd=vali(upwd,/^\d{6}$/,msgUpwd,"请输入6位数字"); //错误时提交会显示提示 var rBirth=vali(birth,/^\d{4}\/\d{2}\/\d{2}$/,msgBirth,"必须符合日期格式"); var rPid=vali(pid,/^\d{15}(\d{2}[0-9Xx])?$/,msgPid,"必须符合身份证号格式"); if(rUpwd&&rBirth&&rPid) alert("提交成功！"); } </script> </body> </html> |