关于表单验证

第一版:纯Js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册表单</title>
    <script type="text/javascript">
    function checkSubmit()
    {
        /*获取值*/
        //用户名
        var name = document.getElementById("txtname").value;
        //性别      document.getElementsByName
        var sexs = document.getElementsByName("sex");
        //密码
        var pwd1 = document.getElementById("pwd1").value;
        //确认密码
        var pwd2 = document.getElementById("pwd2").value;
        //年龄
        var age = document.getElementById("seleage").value;
        //爱好
        var hobbys = document.getElementsByName("hobby");
        //简介
        var txtarea = document.getElementById("txtarea").value;
        
        /*验证*/
        if(name=="")
        {
            alert("用户名不能为空,请重新输入！");
            document.getElementById("txtname").focus();
            return false;
            }
        //获取单选框
        var sex = "";
        for(var i=0;i<sexs.length;i++)
        {
            if(sexs[i].checked)
            {
                sex = sexs[i].value;
                }
            }    
        if(pwd1=="")
        {
            alert("密码不能为空！");
            document.getElementById("pwd1").focus();
            return false;
            }
        if(pwd1.length<2)
        {
            alert("密码必须大于等于2位！");
            return false;
            }
            
        if(pwd2=="")
        {
            alert("确认密码不能为空！");
            document.getElementById("pwd2").focus();
            return false;
            }
        if(pwd2!=pwd1)
        {
            alert("两次输入密码必须一致！");
            document.getElementById("pwd2").focus();
            return false;
            }    
        if(pwd2.length<2)
        {
            alert("确认密码必须大于等于2位！");
            document.getElementById("pwd2").focus();
            return false;
            }
        
        //爱好
        if(hobbys.length==0){
            alert("爱好至少一项");
            return;
            }
            
        var hobby="";
        for(var i=0;i<hobbys.length;i++){
            if(hobbys[i].checked){
                hobby+=hobbys[i].value+"";}
            }
        //验证通过
        document.write("恭喜注册成功");
        document.write("<br />请保管好注册信息");
        document.write("<br />用户名:"+name);
        document.write("<br />性别:"+sex);
        document.write("<br />密码:"+pwd2);
        document.write("<br />年龄:"+age);    
        document.write("<br />爱好:"+hobby);        
        
        if(txtarea==""){
                document.write("<br />简介:这人很懒,什么也没留下");        
            }else{
                document.write("<br />简介:"+txtarea);        
                }
        
        return true;    
    }
    </script>
    </head>

    <body>
    <form name="myform" method="post" onSubmit="return checkSubmit();" action="#">
      <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="3">用户注册</th>
        </tr>
        <tr>
          <td width="100">用户名:</td>
          <td width="200"><input type="text" id="txtname" name="txtname"/></td>
          <td width="200">用户名不能为空</td>
        </tr>
        <tr>
          <td>性别:</td>
          <td>
            <input type="radio" name="sex" id="sexM" value="男"                     checked="checked"/>
            <label>男</label>
            <input type="radio" name="sex" id="sexF" value="女"                     />
            <label>女</label></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>密码:</td>
          <td><input type="password" id="pwd1" /></td>
          <td>密码必须大于等于2位</td>
        </tr>
        <tr>
          <td>确认密码:</td>
          <td><input type="password" id="pwd2" /></td>
          <td>确认密码必须与密码一致</td>
        </tr>
        <tr>
          <td>年龄:</td>
          <td><select id="seleage" name="seleage">
              <option value="10以下" selected="selected">10以下</option>
              <option value="10-20">10-20</option>
              <option value="20-40">20-40</option>
              <option value="40以上">40以上</option>
            </select></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>爱好:</td>
          <td><input type="checkbox" name="hobby" value="音乐" id="chkmusic"/>
            <label>音乐</label>
            <input type="checkbox" name="hobby" value="游戏" id="chkgame"/>
            <label>游戏</label>
            <input type="checkbox" name="hobby" value="其他" id="chkother"/>
            <label>其他</label></td>
          <td>爱好必须一项</td>
        </tr>
        <tr>
          <td height="100">简介:</td>
          <td><textarea id="txtarea" name="txtarea" rows="6"></textarea></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td align="center" colspan="3"><input name="submit" type="submit" value="提交"/>
            &nbsp;&nbsp;&nbsp;
            <input name="reset" type="reset" value="重置"/></td>
        </tr>
      </table>
    </form>
</body>
</html>
纯Js表单验证

第二版:正则表单式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表单</title>
<script type="text/javascript">
  /*
正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/*/
  var reg = {
    user:/^[a-zA-Z]\w{4,9}$/,
    //用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容\w表示字符（数字字母下划线）
    //要求是5-10位字符，所以出去第一位，还需要4-9位的\w
    pwd:/^[\da-zA-Z]{6,18}$/,
    //用来判断密码，html结构中要求是数字字符6到18位，\d表示数字
    tel:/^1[34578]\d{9}$/,
    //用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机
    mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,
    //用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符
    //也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成\.
  }
    //点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位
//电话号码：d{3}-d{8}|d{4}-d{7}  　
//腾讯QQ号：[1-9][0-9]{4,}  　　             
//邮政编码：[1-9]d{5}(?!d)  　　     
//身份证：d{15}|d{18}  　                 　　
//ip地址：d+.d+.d+.d+
//特定数字：
//正整数:^[1-9]d*$　 　 
//负整数: ^-[1-9]d*$ 　
//整数:^-?[1-9]d*$ 　　
//匹配特定字符串：  　　
//26个英文字母: ^[A-Za-z]+$ 　　
//大写:^[A-Z]+$　  　　
//小写:^[a-z]+$  　　
//数字和字母^[A-Za-z0-9]+$　　　
//^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串 
//数字：“^[0-9]*$” 
//n位数字：“^d{n}$”  　　
//n位数字：“^d{n,}$”  　　
//m-n位的数字：“^d{m,n}$”  　　
//零和非零开头的数字：“^(0|[1-9][0-9]*)$”  　　
//有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”  　　
//1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”  　　
//非零的正整数：“^+?[1-9][0-9]*$”  　　
//非零的负整数：“^-[1-9][0-9]*$”  　　
//长度为3的字符：“^.{3}$”  　　
//验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，  　　只能包含字符、数字和下划线。  　　
//是否含有^%&'',;=?$"等字符：“[^%&'',;=?$x22]+”  　　
//汉字：“^[u4e00-u9fa5],{0,}$”  　　
//Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”  　　
//tURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”  　　
//电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”  
//12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”  　　
//一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”  　　正确格式为：“01”“09”和“1”“31”。  　　
//中文字符的正则表达式： [u4e00-u9fa5]  　　
//双字节字符(包括汉字在内)：[^x00-xff]  　　
//空行的正则表达式：n[s| ]*r  　　
//HTML标记的正则表达式：/<(.*)>.*|<(.*) />/  　　
//首尾空格的正则表达式：(^s*)|(s*$)  　　
//Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*  
  
    //regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
/*function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
    if(helpText!=null)
    helpText.innerHTML=helpMessage;
    return false;
    }
    else{
    if(helpText!=null)
    helpText.innerHTML="";
    }
return true;
}*/

/*function validateDate(inputFild,helpText)
{  
    //先检查参数是非空的
    if(!validateNonEmpty(inputFild,helpText))
    {
      return false;
    }
    return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}*/

function checkMail()
{      
　　var regMail=new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/)
　  var mail = document.getElementById("mail").value; 
　　if(!regMail.test(mail))    
　　 { 
       document.getElementById("mail").focus();
　　　　alert("请输入正确的邮箱地址");  
      return false; 
　　 }  
}
</script>
</head>

<body>
<form name="myform" method="post" onSubmit="return checkSubmit();" action="#">
  <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <th colspan="3">用户注册</th>
    </tr>
    <tr>
      <td width="100">用户名:</td>
      <td width="200"><input type="text" id="txtname" name="txtname" onblur=""/></td>
      <td width="200">用户名不能为空</td>
    </tr>
    <tr>
      <td>性别:</td>
      <td><input type="radio" name="sex" id="sexM" value="男"                     checked="checked"/>
        <label>男</label>
        <input type="radio" name="sex" id="sexF" value="女"                     />
        <label>女</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" id="pwd1" /></td>
      <td>密码必须大于等于2位</td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td><input type="password" id="pwd2" /></td>
      <td>确认密码必须与密码一致</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td><select id="seleage" name="seleage">
          <option value="10以下" selected="selected">10以下</option>
          <option value="10-20">10-20</option>
          <option value="20-40">20-40</option>
          <option value="40以上">40以上</option>
        </select></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>爱好:</td>
      <td><input type="checkbox" name="hobby" value="音乐" id="chkmusic"/>
        <label>音乐</label>
        <input type="checkbox" name="hobby" value="游戏" id="chkgame"/>
        <label>游戏</label>
        <input type="checkbox" name="hobby" value="其他" id="chkother"/>
        <label>其他</label></td>
      <td>爱好必须一项</td>
    </tr>
    <tr>
      <td>邮箱:</td>
      <td><input type="text" id="mail" onblur="checkMail()"/></td>
      <td></td>
    </tr>
    <tr>
      <td height="100">简介:</td>
      <td><textarea id="txtarea" name="txtarea" rows="6"></textarea></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center" colspan="3"><input name="submit" type="submit" value="提交"/>
        &nbsp;&nbsp;&nbsp;
        <input name="reset" type="reset" value="重置"/></td>
    </tr>
  </table>
</form>
</body>
</html>
正则验证邮箱

 

posted @ 2018-05-20 23:18  得归  阅读(177)  评论(0)  编辑  收藏  举报