HTML表单验证

浏览数：23 / 时间：2015年06月09日

表单验证：
一、非空验证：
1、内容是不是空的。
判断值的长度是不是0。length属性。压缩空格的函数。

2、内容是不是改变了。

二、对比验证：
1、验证两个控件值的关系（相同，大小）

2、验证控件的值与某个固定值的关系。

三、范围验证：

四、格式验证：
正则表达式。regularexpression
function checkEmail()
{
    var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var txt = document.getElementById("txtEmail").value;
    if(txt.match(reg) == null)
    {
        alert("邮箱格式不正确");
        return false;
    }
    else
    {
        return true;
    }
}
五、其它验证：

例题表单验证

<title>表单验证</title>
</head>

<body>
<form>
<table width="100%">
  <tr>
    <td width="20%">用户名</td>
    <td width="30%"><input type="txt" id="userID"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input type="txt" id="PWD1"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>验证密码</td>
    <td><input type="txt" id="PWD2"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td >邮箱</td>
    <td><input type="txt" id="mail"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>工资</td>
    <td><input type="txt" id="prize"></td>
    <td>&nbsp;</td>
  </tr>
</table>
<input type="submit" value="提交" onclick="return check()" >
</form>
</body>
</html>
<script language="javascript">

var user=document.getElementById("userID");
var pWD1=document.getElementById("PWD1");
var pWD2=document.getElementById("PWD2");
var mail=document.getElementById("mail");
var prize=document.getElementById("prize");
function checkUser()
{
    
    
    if (user.value.length==0)
    {
        return "用户名不能为空\n";
    }
    else
    {
        return "";}
}

function checkPWD1()
{
    
    
    if (pWD1.value.length==0)
    {
        return "密码不能为空\n";
    }
    else
    {
        return "";}
    
}

function checkPWD2()
{
    
    
    if (pWD2.value.length==0)
    {
        return "验证密码不能为空\n";
    }
    else if(pWD1.value.length!=pWD2.value.length)
    {
        return "两次输入的密码不一致\n";
    }
    else
    {
        return "";}
}

function checkmail()
{
    
    var flMail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (mail.value.length==0)
    {
        return "邮箱不能为空\n";
    }
    
    else if(mail.value.match(flMail)== null)
    {
        return "邮箱格式不正确\n";
    }
    else
    {
        return "";
    }
}

function checkprize()
{
    
    
    if (prize.value.length==0)
    {
        return "工资不能为空\n";
    }
    else 
    {
        if(isNaN(prize.value)==false)
        {    
          var PRI=parseInt(prize.value);
          if(PRI<0)
          {
          return "工资不正确";
          }
          else
          {
            return "";
          }
       }
        else
        {
          return "工资只能是数字";
        }
        
    }
}

function check()
{  
    var s="";
    s+=checkUser();
    s+=checkPWD1();
    s+=checkPWD2();
    s+=checkmail();
    s+=checkprize();
    if(s.length==0)
    {
        return true;
    }
    else
    {
      alert(s);    
      return false;
    }
    
    
}


</script>

例题

<title>显示字符数目</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="txt"></label>
  <textarea name="txt" id="txt" cols="45" rows="5" onkeyup="CNT()"></textarea>
<span id="NUM">字数150</span>
</form>
</body>
</html>

<script language="javascript">

function CNT()
{
    var txt=document.getElementById("txt");
    var num=txt.value.length;
    var NUM=document.getElementById("NUM");
    NUM.innerHTML="字数"+(150-num);
    //加上递归调用，可以实现即使用鼠标复制粘贴，也可以统计数字
        window.setTimeout("CNT()",500);
}


</script>

例题

<title>必填选项表单的制作</title>
</head>

<body>
<form>
  <table width="100%">
    <tr>
      <td width="20%">用户名</td>
      <td width="30%" ><input style="color:#999999" type="txt" id="userID" / value="必填" onfocus="doFocus()" onblur="doBlur()"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="txt" id="PWD1" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>验证密码</td>
      <td><input type="txt" id="PWD2" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td >邮箱</td>
      <td><input type="txt" id="mail" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>工资</td>
      <td><input type="txt" id="prize" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <input type="submit" value="提交" onclick="return check()" />
</form>
</body>
</html>
<script language="javascript">
var atTxt=document.getElementById("userID");
c=atTxt.style.color;
//c存储的是一个颜色，不能代表元素的属性
function doFocus()
{
        if (atTxt.value=="必填"&&atTxt.style.color==c)
        {
            atTxt.value="";
           atTxt.style.color="black";
        }
    
}
function doBlur()
{
    if(atTxt.value.length==0)
    {
       atTxt.value="必填";    
       atTxt.style.color=c;
    }
    
}

</script>