js高级编程------------使用prototype仿java对象实现表单验证-优快云博客

本文介绍了一个使用JavaScript实现的简单表单验证框架。该框架能够对不同类型的表单输入进行有效性检查，包括文本框、密码框、电子邮件、下拉列表和电话号码等。它还支持正则表达式验证，并在通过验证时显示绿色勾号图标，在未通过验证时显示红色叉号图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>xmlT5-JS高级编程</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .imgs{ width:20px; height:20px; } </style>  <script type="text/javascript"> var $ = document.getElementById; function Check(formId, fieldNum, submitId, validImg, invalidImg) { //currentSelector属性指向需要验证的表单 this.currentSelector = ''; //currentForm属性指向表单所在的form this.currentForm = formId; this.num = 0 ; this.numToValid = fieldNum; this.submit = submitId; this.validImg = validImg; this.invalidImg = invalidImg; $(formId).reset(); } Check.prototype.preload=function(selector){ if(selector){ if(!this.currentSelector.validImg && !this.currentSelector.invalidImg){ this.currentSelector.validImg=createNode('img',{src:this.validImg}); this.currentSelector.invalidImg=createNode('img',{src:this.invalidImg}); } if(this.currentSelector.isValid==undefined){ this.currentSelector.isValid=false; } } } //e为要添加的html元素，例如IMG.obj是要创建的元素的属性集合。例如img的属性src function createNode(e,obj){ var newNode=document.createElement(e); //newNode.setAttribute=obj;不知道为什么不行。只能这样了。 newNode.src=obj['src']; newNode.className="imgs"; return newNode; } function removeNode(node){ if(node.parentNode!=null){ node.parentNode.removeChild(node); } } //parent需要添加元素的父元素，newNode需要添加的元素，refNode需要添加元素的相关元素，决定添加元素的位置 function InsertAfter(parent,newNode,refNode){ if (parent.lastChild == refNode) { // 如果最后的节点是目标元素，则直接添加。因为默认是最后 parent.appendChild(newNode); } else { //如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。 parent.insertBefore(newNode,refNode.nextSibling); } } Check.prototype.check=function (selector,inputType){ //this指向Check类的某个对象 this.currentSelector=selector; this.preload(selector); var isCheck=false; switch(selector.type){ case 'undefined': break; case 'radio': for(var x=0;x<selector.length;x++){ if(selector[x].checked==true){ isCheck=true; break; } } case 'select-one': if(selector.length>0){ isCheck=true; break; } case 'select-multiple': for(var x=0;x<selector.length;x++){ if(selector[x].selected==true){ isCheck=true; break; } } case 'checkbox': if(selector.checked==true){ isCheck=true; break; } default://text if(selector.value.length>0){ if(selector.value.length<=selector.maxLength){ switch(inputType){ case 'email': isCheck=this.checkEmail(); break; case 'name': isCheck=this.checkName(); break; case 'pwd': isCheck=this.checkPwd(); break; case 'telPhone': isCheck=this.checkTelPhone(); break; default: isCheck=true; break; } } else{ break; } } else{ break; } } if(isCheck){ this.valid(); }else{ this.invalid(); } } Check.prototype.checkEmail=function(){ var str=this.currentSelector.value; var reg=new RegExp("^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@(([0-9a-zA-Z])+([-\w]*[0-9a-zA-Z])*\.)+[a-zA-Z]{2,9}){1}quot;); if(reg.test(str)) { return true; } return false; } Check.prototype.checkPwd=function(){ var str=this.currentSelector.value; var reg=new RegExp("^[a-zA-Z\d]{6,16}"); if(reg.test(str)) { return true; } return false; } Check.prototype.checkName=function(){ var str=this.currentSelector.value; var reg=new RegExp("^[a-zA-Z]{1}[\w]{4,16}[a-zA-Z0-9]{1}"); if(reg.test(str)) { return true; } return false; } Check.prototype.checkTelPhone=function(){ var str=this.currentSelector.value; var reg=new RegExp("^[0-9]{11}{1}quot;); if(reg.test(str)) { return true; } return false; } Check.prototype.valid=function(){ removeNode(this.currentSelector.invalidImg); InsertAfter(this.currentSelector.parentNode,this.currentSelector.validImg,this.currentSelector); if(!this.currentSelector.isValid){ this.num++; } if(this.allFieldsChecked()){ $(this.submit).disabled=null; } //在preload方法中添加的属性 this.currentSelector.isValid=true; } Check.prototype.invalid=function(){ removeNode(this.currentSelector.validImg); InsertAfter(this.currentSelector.parentNode,this.currentSelector.invalidImg,this.currentSelector); if(this.currentSelector.isValid){ this.num--; } $(this.submit).disabled="disabled"; //在preload方法中添加的属性 this.currentSelector.isValid=false; } Check.prototype.allFieldsChecked=function(){ //如果验证全部通过 if(this.num==this.numToValid){ return true; } return false; } </script> </head> <body οnlοad="ck=new Check('liveForm',5,'submit','images/1.png','images/2.png');"> <form id="liveForm" action="" method="post" οnsubmit="if(!ck.allFieldsChecked()) return false;"> <fieldset> <div style="float: right;"> * 为必填字段 </div> <legend> 测试验证框架 </legend> <p> 姓名：* <br /> <input type="text" id="name" name="name" οnblur="ck.check(this);" maxlength="10"> </p> <p> 密码：* <br /> <input type="password" id="pwd" name="pwd" οnblur="ck.check(this,'pwd');" maxlength="10"> </p> <p> Email：* <br /> <input type="text" id="email" name="email" οnblur="ck.check(this,'email');" maxlength="40"> </p> <p> 省份：* <br /> <select id="pro" οnchange="ck.check(this,'pro');" name="pro"> <option>湖北省</option> <option>湖南省</option> <option>河北省</option> <option>河南省</option> </select> </p> <p> 电话号码：* <br /> <input type="text" id="telPhone" name="telPhone" οnblur="ck.check(this,'telPhone');"> </p> </fieldset> <div id="innerFieldset"> <noscript> <input id="submit" type="submit" value="Register" class="action" /> </noscript> </div> <script type="text/javascript"> $('innerFieldset').innerHTML='<input id="submit" type="submit" value="Register" disabled="disabled" />'; </script> </form> </body> </html>

验证用到的两张图片。