学习笔记之非空验证，相等，范围，正则验证

Posted 2020-10-12 子言小竹

1.非空验证
2.相等验证
3.范围验证
4.正则验证:/^ 内容$/    定界符  //      开始 ^      结尾 $       \转义：\n \r 换行  \t  制表符  \"  双引号  \‘单引号   * 前面的表达式可以出现n次   ?  出现一次或是零次

 

body：

 <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" />
            年龄：<input type="text" name="nianling" id="nianling" />
            邮箱：<input type="text" name="youxiang" id="youxiang" />
            <input type="submit" value="登录" id="dl" onclick="return YanZheng()" />
        </form>

script：

<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;
            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)
            {
                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>

第二种方法：

style：

margin：0px auto;padding:0px;

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>

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(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;
        }
    }