.非空验证 ,相等验证,范围验证,正则验证的实例

<!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>
        <style type="text/css">

        </style>
    </head>

    <body>
    1.非空验证
        2.相等验证
        3.范围验证
        4.正则验证
       定界符  //
        开始 ^
        结尾 $   /^$/
        \转义
        \n \r 换行  \t  制表符  \"  双引号  \'单引号
        * 前面的表达式可以出现n次
        ?  出现一次或是零次
        /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 
        <form action="denglu.html" method="get">
            用户名:<input type="text" name="yhm" id="yhm" />
            密码：<input type="text" name="mm" id="mm" />                  //将所需的文本框及按钮先定义出来，在本程序中因为想要直观的看出密码和确认密码的框用了文本框而没有
            确认密码：<input type="text" name="qm" id="qm" />                 password框
            年龄：<input type="text" name="nianling" id="nianling" />
            邮箱：<input type="text" name="youxiang" id="youxiang" />
            <input type="submit" value="登录" id="dl" onclick="return YanZheng()" />
        </form>
    </body>
    <script type="text/javascript">
//alert("\\");
    function YanZheng()
{
var yhm = document.getElementById("yhm").value;
var mm = document.getElementById("mm").value;  
var qm = document.getElementById("qm").value;       // 将各个的框里的元素get出来以便于为了以后的非空验证和以及各式验证等！
var nl = document.getElementById("nianling").value;
var yx = document.getElementById("youxiang").value;
var zz =  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

if(yhm=="")
{
alert("用户名不能为空！");
return false;
}
else if(mm=="")
{
alert("密码不能为空！");
return false;
}
else if(qm=="")
{
alert("确认密码不能为空！");
return false;
}
else if(mm!=qm)                                       //凡是value==""的全部是进行非空验证，而"mm！=qm"进行的是密码的相等验证，"n1<=18||n1>=80
{                                                       "是对年龄进行的范围验证，"yx.match(zz)==null" 是对邮箱格式进行的正则验证！
alert("密码不一致！");                     
return false;
}
else if(nl=="")
{
alert("年龄不能为空！");
return false;
}
else if(nl<=18 || nl>=80)
{
alert("年龄不符！");
return false;
}
else if(yx=="")
{
alert("邮箱不能为空！");
return false;
}
else if(yx.match(zz)==null)
{
alert("邮箱格式不正确！");
return false;
}
else
{
return true;
}

}
    </script>
</html>

　不过当我写完的时候感觉这个程序的非空验证用了太多的else if 感觉比较冗杂于是就有了以下的进阶版非空验证，用了for循环以及另设一个函数来解决代码冗杂的问题：

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style>
        *{margin:0 auto;}
        </style>
    </head>

    <body>
    <div style="width:500px; height:500px; border:1px solid #000;">
        <form action="lll.html" method="get" id="F">
                <input  type="text" name="yhm" class="qb"/>用户名
                <br />
                <input  type="text" name="mm" class="qb"/>密码
                <br />
                <input  type="text" name="qrmm"/>确认密码                   //与前文一致不再重复
                <br />
                <input  type="text" name="yx" class="qb"/>邮箱
                <br />
                <input  type="text" name="nl" class="qb"/>年龄
                <br />
                <input  type="submit" value="提交" onclick="return dj()"/>
            </form>
        </div>
    </body>
</html>
<script>
var a=["用户名不能为空","密码不能为空","邮箱不能为空","年龄不能为空"];

function dj()
{
var qb=document.getElementsByClassName("qb");
var F=document.getElementById("F");

if(F[1].value!=F[2].value)//密码的相等验证
{
alert("密码不一致!")
return false;                           //将所有的不能为空的地方的中文说明都放到一个数组内；并且利用for循环以及数组在查询元素时是利用索引值进行查询
}                                                  的特性将所有的非空验证都写到一个for循环里。

for(var i=0;i<qb.length;i++)
{
if(qb[i].value=="")
{
 alert(a[i]);
 return false;
}
}

if(F[4].value<18||F[4].value>50)//年龄的范围验证。
{
alert("老了")
return false;
}
}

</script>

秒客网

.非空验证 ,相等验证,范围验证,正则验证的实例

相关文章