js高级编程------------使用prototype仿java对象实现表单验证

来源：互联网发布：宏景软件编辑：程序博客网时间：2024/04/29 19:35
<!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><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">var $ = document.getElementById;function Check(formId, fieldNum, submitId, validImg, invalidImg) {//currentSelector属性指向需要验证的表单this.currentSelector = '';//currentForm属性指向表单所在的formthis.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的属性srcfunction 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://textif(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><bodyonload="ck=new Check('liveForm',5,'submit','images/1.png','images/2.png');"><form id="liveForm" action="" method="post"onsubmit="if(!ck.allFieldsChecked()) return false;"><fieldset><div style="float: right;">* 为必填字段</div><legend>测试验证框架</legend><p>姓名：*<br /><input type="text" id="name" name="name" onblur="ck.check(this);"maxlength="10"></p><p>密码：*<br /><input type="password" id="pwd" name="pwd"onblur="ck.check(this,'pwd');" maxlength="10"></p><p>Email：*<br /><input type="text" id="email" name="email"onblur="ck.check(this,'email');" maxlength="40"></p><p>省份：*<br /><select id="pro" onchange="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"onblur="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>
验证用到的两张图片。