zoukankan      html  css  js  c++  java
  • JavaScriptDay2-简单网页表单验证

    Html部分

     1 <!--
     2    注册表单
     3          1-用户名    text
     4          2-密码      password
     5          3-确认密码  password
     6          4-性别      radio
     7          5-爱好      hobby
     8          6-籍贯      select-option
     9          7-留言      textarea
    10          8-提交 重置  submit reset
    11 -->
    12 <body>
    13 <form action="" method="post" onsubmit="return formCheck()">
    14         <p>
    15             <label for="username">用户名</label>
    16         </p>
    17     <p>
    18         <input type="text" id="username" onblur="unameCheck()" placeholder="请输入用户名"/>
    19         <label  id="unaemelabel"></label>
    20     </p>
    21        <p>
    22            <label for="pwd">密码</label>
    23        </p>
    24     <p>
    25         <input type="password" id="pwd" onblur="pwdCheck()"/>
    26         <label for="" id="ulabelpwd"></label>
    27     </p>
    28    <p>
    29        <label for="repwd">确认密码</label>
    30    </p>
    31     <p>
    32         <input type="password" id="repwd" onblur="repwdCheck()"/>
    33         <label for="" id="labelrepwd"></label>
    34     </p>
    35     <p>
    36         <label for="">性别</label>
    37     </p>
    38     <p onmouseover="genderCheck()">
    39         <input type="radio" name="gender" id="g1"/>男
    40         <!--获取焦点-->
    41         <label for="g1"></label>
    42         <input type="radio" name="gender" id="g2"/>女
    43         <label for="g2" id="genderlabel"></label>
    44     </p>
    45     <p>
    46         <label>爱好</label>
    47     </p>
    48     <p onmouseover="hobbyCheck()">
    49         <input type="checkbox" name="hobby" id="chi" value="吃"/>吃
    50         <input type="checkbox" name="hobby" id="he" value="喝"/>喝
    51         <input type="checkbox" name="hobby" id="wan" value="玩"/>玩
    52         <label for="" id="hobbylabel"></label>
    53     </p>
    54     <p>籍贯</p>
    55     <p>
    56         <select name="" id="jiguan" onblur="jiguanCheck()">
    57             <option value="">--请选择--</option>
    58             <option value="jia">家</option>
    59             <option value="xue">学</option>
    60             <option value="fan">饭</option>
    61         </select>
    62         <label for="" id="jiguanlabel"></label>
    63     </p>
    64     <p>留言</p>
    65     <p>
    66         <textarea name="" id="liuyan" cols="30" rows="10" onblur="textheck()"></textarea>
    67         <label for="" id="textlabel"></label>
    68     </p>
    69     <p>
    70         <input type="submit" value="提交"/>
    71         <input type="reset" value="重置"/>
    72     </p>
    73 
    74 </form>
    75 </body>

    Css部分

        <script>
            //用户名验证
            function unameCheck(){
                //1-获取
                var uname = document.getElementById("username").value;
                var ulabel = document.getElementById("unaemelabel");
                //2-不能为空
                if(uname == null || uname == ""){
                    //给出提示信息
                    ulabel.innerHTML="对不起";
                    ulabel.style.color="red";
                    return false;
                }else{
                    ulabel.innerHTML="<span class='fa fa-heart'></span>";
                    ulabel.style.color="green";
                    return true;
                }
            }
            //密码验证
            function pwdCheck(){
                //1-获取
                var upwd = document.getElementById("pwd").value;
                var ulabel = document.getElementById("ulabelpwd");
                //2-不能为空
                if(upwd == null || upwd == ""){
                    //给出提示信息
                    ulabel.innerHTML="对不起";
                    ulabel.style.color="red";
                    return false;
                }else{
                    ulabel.innerHTML="<span class='fa fa-heart'></span>";
                    ulabel.style.color="green";
                    return true;
                }
            }
            //确认密码验证
            function repwdCheck(){
                //1-获取
                var upwd = document.getElementById("pwd").value;
                var repwd = document.getElementById("repwd").value;
                var labelrepwd = document.getElementById("labelrepwd");
                //2-不能为空
                if(repwd == null || repwd == ""){
                    //给出提示信息
                    labelrepwd.innerHTML="对不起";
                    labelrepwd.style.color="red";
                    return false;
                }else if(upwd!=repwd){
                    labelrepwd.innerHTML="不一致";
                    labelrepwd.style.color="red";
                }
                else{
                    labelrepwd.innerHTML="<span class='fa fa-heart'></span>";
                    labelrepwd.style.color="green";
                    return true;
                }
            }
            //性别验证
            function genderCheck(){
                //1-获取 根据全部radio  document.getElementsByName
                var gendername = document.getElementsByName("gender");
                var genderlabel = document.getElementById("genderlabel");
                //判断
                var rs = false;
                for(var i=0; i < gendername.length; i++){
                    if(gendername[i].checked){
                        rs = true;
                        break;
                    }
                }
                if(rs){
                    genderlabel.innerHTML="<span class='fa fa-heart'></span>";
                    genderlabel.style.color="green";
                    return true;
                }else{
                    genderlabel.innerHTML="请选择性别";
                    genderlabel.style.color="red";
                }
            }
            //爱好验证
            function hobbyCheck(){
                //1-获取 根据全部hobby  document.getElementsByName
                var hobbyname = document.getElementsByName("hobby");
                var hobbylabel = document.getElementById("hobbylabel");
                //判断
                var count = 0;
                for(var i=0; i < hobbyname.length; i++){
                    if(hobbyname[i].checked){
                        count++;
                    }
                }
                if(count >= 2){
                    hobbylabel.innerHTML="<span class='fa fa-heart'></span>";
                    hobbylabel.style.color="green";
                    return true;
                }else if(count == 1){
                    hobbylabel.innerHTML="至少选两个";
                    hobbylabel.style.color="red";
                } else{
                    hobbylabel.innerHTML="请选择爱好";
                    hobbylabel.style.color="red";
                }
            }
            //籍贯验证
            //获取
            function jiguanCheck(){
                var jiguan = document.getElementById("jiguan").value;
                var jiguanlabel = document.getElementById("jiguanlabel");
                //验证
                if(jiguan == "" || jiguan == null){
                    jiguanlabel.innerHTML="未选择";
                    jiguanlabel.style.color="red";
                    return false;
                }else{
                    jiguanlabel.innerHTML="<span class='fa fa-heart'></span>";
                    jiguanlabel.style.color="green";
                    return true;
                }
            }
            //文本域验证
            function textheck(){
            var textname = document.getElementById("liuyan").value;
            var textlabel = document.getElementById("textlabel");
            //验证
            if(textname == "" || jiguan == null){
                textlabel.innerHTML="未选择";
                textlabel.style.color="red";
                return false;
            }else{
                textlabel.innerHTML="<span class='fa fa-heart'></span>";
                textlabel.style.color="green";
                return true;
            }
            }
            //表单提交验证
            function formCheck(){
                var rs1 = unameCheck();
                var rs2 = pwdCheck();
                var rs3 = repwdCheck()
                var rs4 = genderCheck();
                var rs5 = hobbyCheck();
                var rs6 = jiguanCheck();
                var rs7 = textheck();
                if(rs1&&rs2&&rs3&&rs4&&rs5&&rs6&&rs7){
                    return true;
                }else{
                    return false;
                }
            }
        </script>

    总结

      最初使写的简单验证方法吧,主要结合在每个表单属性中加入鼠标时间,再有JavaScript编写 验证 更改等信息。

    具体是利用document.getElementById()或者document.getElementsByName()获得表单属性中值,随后对属性值进行非空判断(但是例如单选框radio,多选框checkbox是利用获得属性者的大小在由chenk属性判断是否以点击)。

  • 相关阅读:
    C语言利用按位与、按位或转换大小写字母
    综合布线知识点总结
    C语言 计算阶乘
    C语言位运算符详解
    docker-compose的flask自动部署
    redis集群的布置
    fatal: unable to auto-detect email address (got 'CC@LAPTOP-UPQ1N1VQ.(none)')
    使用ImagesPipeline时候报错为:ModuleNotFoundError: No module named 'scrapy.contrib'
    多任务
    json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes: line 1 column 2 (ch
  • 原文地址:https://www.cnblogs.com/dapengnb/p/10225226.html
Copyright © 2011-2022 走看看