简单的表单验证正则表达式

来源:互联网 发布:网站seo外链工具 编辑:程序博客网 时间:2024/06/05 00:54

body里所有内容

<script type="text/javascript">
  function checkAll(){
  var name=document.getElementById("name");
  var password=document.getElementById("password");
  var age=document.getElementById("age");
  var phone=document.getElementById("phone");
  var email=document.getElementById("email");
  var qq=document.getElementById("qq");
 
 
   if(checkName(name)&&checkPw(password)&&checkAge(age)&&checkPhone(phone)&&checkEmail(email)&&checkQq(qq)){
    alert("添加成功");
    return true;
   }else{
   alert("请正确填写");
    return false;
   }
  }
 
  //验证用户名
   function checkName(name){
    var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
    if (!patrn.exec(name.value)){
     document.getElementById("a1").innerHTML="用户名只能输入5-20个以字母开头、可带数字''_ '.'的字串";
     return false;
    }else{
    document.getElementById("a1").innerHTML="正确";
     return true;
    }
   
   }
   
   function checkName1(){
    document.getElementById("a1").innerHTML="";
   }
   
  //验证密码
  function checkPw(password){
   var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
    if (!patrn.exec(password.value)){
     document.getElementById("a2").innerHTML="密码只能输入5-20个以字母开头、可带数字''_ '.'的字串";
     return false;
    }else{
    document.getElementById("a2").innerHTML="正确";
     return true;
   }
  }
  function checkPw1(){
    document.getElementById("a2").innerHTML="";
   }
 
 
  //验证年龄只能输入数字
 
  function checkAge(age){
   var patrn=/^([1-9]|[1-9][0-9]|1[01][0-9])$/;
 
    if (!patrn.exec(parseInt(age.value,10))){
     document.getElementById("a3").innerHTML="年龄必须是1-120之间的正整数";
     return false;
    }else{
    document.getElementById("a3").innerHTML="正确";
     return true;
    }
  }
 
  function checkAge1(){
    document.getElementById("a3").innerHTML="";
   }
 
  //验证电话手机号
 
  function checkPhone(phone){
 
   var patrn= /^\d{3}-\d{8}$/;
  if(!patrn.exec(phone.value)){
  document.getElementById("a4").innerHTML="请正确添写座机号如010-88888888";
  return false;
  }else{
  document.getElementById("a4").innerHTML="正确";
  return true;
  }
 
  }
 
    function checkPhone1(){
    document.getElementById("a4").innerHTML="";
   }
 
  //验证邮箱
   function checkEmail(email){
   var s1= document.getElementById("a5");
   var  patrn= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
 
  if(!patrn.exec(email.value)){
  s1.innerHTML="&times;请按正确的邮箱号输入";
  return false;
  }else{
  document.getElementById("a5").innerHTML="正确";
  return true;
  }
 }
   function checkEmail1(){
    document.getElementById("a5").innerHTML="";
   }
  //验证QQ号
  function checkQq(qq){
  var patrn=/^[1-9]{1}([0-9]){8,9}$/;
 
  if(!patrn.exec(qq.value)){
  document.getElementById("a6").innerHTML="请正确添写QQ号";
  return false;
  }else{
  document.getElementById("a6").innerHTML="正确";
  return true;
  }
 
  }
   function checkQq1(){
    document.getElementById("a6").innerHTML="";
   }
  </script>
  <form action="user!add" method="post" onsubmit="return checkAll()">
   用户名:<input type="text" name="user.name" id="name" onblur="checkName(this)" onfocus="checkName1()" /><span id="a1"></span><br />
  密码:<input tpye="text" name="user.password" id="password" onblur="checkPw(this)" onfocus="checkPw1()" /><span id="a2"></span><br />
  年龄:<input type="text" name="user.age" id="age" onblur="checkAge(this)" onfocus="checkAge1()" /><span id="a3"></span><br />
  电话:<input type="text" name="user.phone" id="phone" onblur="checkPhone(this)" onfocus="checkPhone1()"/><span id="a4"></span><br />
  Email:<input type="text" name="user.email" id="email" onblur="checkEmail(this)" onfocus="checkEmail1()" /><span id="a5"></span><br />
  QQ:<input type="text" name="user.qq" id="qq" onblur="checkQq(this)" onfocus="checkQq1()" /><span id="a6"></span><br />
  <input type="submit" value="提交" />
  </form>

 

有什么意见,大家尽管提,我知道代码写的比较麻烦,优化的也不好因为俺是新手~~~~~