表单验证

来源：互联网发布：招商银行java面试编辑：程序博客网时间：2024/06/08 17:12

第一个简单的js代码：

function biaodan(id) {         return document.getElementById(id);     }          function check(){         var email = biaodan("email").value;         var password = biaodan("password").value;         var repassword = biaodan("repassword").value;         var name = biaodan("name").value;                  if(email == ""){             alert("Email值不能为空");             biaodan("email").focus();            return false;         }          else if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {        //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。            alert("邮箱格式不正确,必须包含@和.");             biaodan("email").focus();             return false;         }        else if(email.indexOf("@")==0||email.indexOf("@")==email.length-1)          {          alert("'@'不能在最前端或最后端");           biaodan("email").focus();          return false;          }          else if(email.indexOf(".")==0||email.indexOf(".")==email.length-1)          {          alert("'.'不能在最前端或最后端");           biaodan("email").focus();          return false;          }          else if(email.indexOf(".")-(email.indexOf("@"))<=0)          {          alert("'.'必须在'@'的后面");           biaodan("email").focus();          return false;          }          else if(email.indexOf(".")-(email.indexOf("@"))<=1)          {          alert("'@'和'.'中间必须有字符");           biaodan("email").focus();          return false;          }                 if(password == "") {             alert("密码不能为空");             biaodan("password").focus();             return false;         }                  else if(password.length < 6) {             alert("密码长度必须大于或者等于6");             biaodan("password").focus();             return false;         }                  else if(repassword != password) {             alert("两次输入的密码不一致");             biaodan("repassword").focus();             return false;         }                  if(name == "") {             alert("姓名不能为空");             biaodan("name").focus();             return false;         }        if (name != "") {          var patt1=new RegExp("[0-9]");          patt1.test(alert("姓名中不能包含数字"));          biaodan("name").focus();          return false;       }             // else if(!(isNaN(name))){       //    //for(var i = 0; i < name.length; i++) {         //     //  var j = name.subString(i , i+1);  //substring() 方法用于提取字符串中介于两个指定下标之间的字符。       //      // if(isNaN(j) == false) {  //isNaN() 函数用于检查其参数是否是非数字值。       //           alert("姓名中不能包含数字");         //           biaodan("name").focus();         //           return false;        //        //}          // }   }

第二个复杂的js代码：

function getLength(str){  // \x00-xff代表单字节字符。  return str.replace(/[^\x00-\xff]/g, "xx").length;} function findStr(str, n){  var tmp = 0;  for (var i = 0; i < str.length; i++){    if(str.charAt(i)==n){      tmp++;    }  }  return tmp;} window.onload=function(){  var aInput = document.getElementsByTagName('input');//getElementsByTagName() 方法可返回带有指定名称的所有元素的一个节点列表。  var oName = aInput[0];  var pwd = aInput[1];  var pwd2 = aInput[2];  var aP = document.getElementsByTagName('p');  var name_msg = aP[0];  var pwd_msg = aP[1];  var pwd2_msg = aP[2];  var count = document.getElementById('count');  var aEm = document.getElementsByTagName('em');  var name_length = 0; //会员名   oName.onfocus = function(){    name_msg.style.display = "inline";    name_msg.innerHTML = '<i class="ati"></i>☺ 5-25个字符，一个汉字为两个字符，推荐使用中文会员名。'  }   oName.onkeyup = function(){    count.style.visibility = "visible";    name_length = getLength(this.value);    count.innerHTML = name_length + "个字符";    if(name_length==0){      count.style.visibility = "hidden";    }  }   oName.onblur = function(){    //含有非法字符                var reg = /[^\w\u4e00-\u9fa5]/g;    // \w代表“数字、字母（不分大小写）、下划线”，\u4e00-\u9fa5代表汉字。      if(reg.test(this.value)){      name_msg.innerHTML = '<i class="err"></i>☹ 含有非法字符！'    }     //不能为空    else if (this.value==""){      name_msg.innerHTML = '<i class="err"></i>☹ 不能为空！'    }     //长度超过25个字符    else if (name_length > 25){      name_msg.innerHTML = '<i class="err"></i>☹ 长度超过25个字符！'    }     //长度少于6个字符    else if (name_length < 6){      name_msg.innerHTML = '<i class="err"></i>☹ 长度少于6个字符！'    }     //OK    else {      name_msg.innerHTML = '<i class="ok"></i>☺ OK！'      count.style.visibility = "hidden";    }  } //密码   pwd.onfocus = function(){    pwd_msg.style.display = "inline";    pwd_msg.innerHTML = '<i class="ati"></i>☺ 6-16个字符，请使用字母加数字或符号的组合密码.'  }   pwd.onkeyup = function(){    //大于5字符为“中”    if(this.value.length>5){      aEm[1].className = "active";      pwd2.removeAttribute("disabled");      pwd2_msg.style.display = "inline";    }    else{      aEm[1].className = "";      pwd2.setAttribute("disabled");      pwd2_msg.style.display = "none";          }     //大于10字符为“强”    if(this.value.length>10){      aEm[2].className = "active";    }else{      aEm[2].className = "";    }  }   pwd.onblur = function(){    var m = findStr(pwd.value, pwd.value[0]);     var reg_n = /[^\d]/g;    var reg_c = /[^a-zA-Z]/g;     //不能为空    if(this.value==""){      pwd_msg.innerHTML = '<i class="err"></i>☹ 不能为空！'    }    //不能用相同字符    else if(m == this.value.length){      pwd_msg.innerHTML = '<i class="err"></i>☹ 不能用相同字符！'    }    //长度应为6-16个字符    else if(this.value.length < 6 || this.value.length > 16){      pwd_msg.innerHTML = '<i class="err"></i>☹ 长度应为6-16个字符！'    }    //不能全为数字    else if(!reg_n.test(this.value)){      pwd_msg.innerHTML = '<i class="err"></i>☹ 不能全为数字！'    }    //不能全为字母    else if(!reg_c.test(this.value)){      pwd_msg.innerHTML = '<i class="err"></i>☹ 不能全为字母！'    }    //OK    else{      pwd_msg.innerHTML = '<i class="ok"></i>☺ OK！'    }  } //确认密码   pwd2.onblur = function(){   pwd2_msg.style.display = "inline";    if(this.value != pwd.value){      pwd2_msg.innerHTML = '<i class="err"></i>☹ 两次输入的密码不一致！'    }    else{      pwd2_msg.innerHTML = '<i class="ok"></i>☺ OK！'    }  }}

还是有些问题，比如反应不灵敏，样式不好看。还在改进中。

阅读全文

0 0