html表单元素非空、正则校验

来源：互联网发布：matlab em算法编辑：程序博客网时间：2024/06/04 18:52

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        fieldset{            width: 300px;            margin: 100px auto;        }        .span1{            display: none;            font-size: 13px;            color: red;        }    </style></head><body><fieldset>    <legend>注册</legend>    <form action="demo01_test.html" onsubmit=" return res();">        <input type="text" name="username" placeholder="用户名" id="inp1"/>        <span class="span1">用户名不符合规范</span>        <br/>        <br/>        <input type="password" name="pwd" placeholder="密码" id="firstpwd"/>        <span class="span1">密码不符合规范</span>        <br/>        <br/>        <input type="password" name="pwd" placeholder="确认密码" id="secondpwd"/>        <span class="span1">两次密码不一致</span>        <br/>        <br/>        <!---->        <label>国籍：</label>        <select name="" id="sel">            <option value="choose">请选择</option>            <option value="usa">美国</option>            <option value="china">中国</option>            <option value="japan">日本</option>            <option value="germany">德国</option>        </select>        <span class="span1">请选择国籍</span>        <br/>        <br/>        <label for="">爱好：</label><br/>        <label for="">足球</label>        <input type="checkbox" name="hobby"/>        <label for="">排球</label>        <input type="checkbox" name="hobby"/>        <label for="">球</label>        <input type="checkbox" name="hobby"/>        <span class="span1">请选择爱好</span>        <br/>        <label for="">性别：</label><br/>        <label for="">男</label>        <input type="radio" name="gender"/>        <label for="">女</label>        <input type="radio" name="gender"/>        <span class="span1">请选择性别</span>        <br/>        <input type="submit" value="提交"/>    </form></fieldset><script>    //核对用户名    var oinp= document.getElementById("inp1");    function checkUsername(){        var res = /^[a-zA-Z0-9]{3,10}$/;        var ospan1= document.getElementsByClassName("span1")[0];        if(!res.test(oinp.value)){            ospan1.style.display = "inline";            return false;        }else{            ospan1.style.display = "none";            return true;        }    }    oinp.onblur = checkUsername;    //核对第一次密码    var opwd1 = document.getElementById("firstpwd");    function checkFirstPassword(){        var res = /^[a-zA-Z]{1}[0-9]{5}$/;        var ospan1 = document.getElementsByClassName("span1")[1];        if(!res.test(opwd1.value)){            ospan1.style.display = "inline";            return false;        }else{            ospan1.style.display = "none";            return true;        }    }    opwd1.onblur = checkFirstPassword;    //核对第二次密码    var opwd2 = document.getElementById("secondpwd");    function checkSecondPassword(){        var ospan1 = document.getElementsByClassName("span1")[2];        if(opwd2.value !== opwd1.value){            ospan1.style.display = "inline";            return false;        }else{            ospan1.style.display = "none";            return true;        }    }    opwd2.onblur = checkSecondPassword;    //核对国籍    var osel = document.getElementById("sel");    function checkNation(){        var ospan1 = document.getElementsByClassName("span1")[3];        if(osel.value == "choose"){            ospan1.style.display = "inline";            return false;        }else{            ospan1.style.display = "none";            return true;        }    }    osel.onblur = checkNation;    //核对爱好    var ocb = document.getElementsByName("hobby");    function checkHobby(){        var ospan1 = document.getElementsByClassName("span1")[4];        if(!ocb[0].checked && !ocb[1].checked && !ocb[2].checked){            ospan1.style.display = "inline";            return false;        }else{            ospan1.style.display = "none";            return true;        }    }    ocb.onblur = checkHobby;    //核对性别    var ora = document.getElementsByName("gender");    function checkGender(){        var ospan1 = document.getElementsByClassName("span1")[5];        if(!ora[0].checked && !ora[1].checked){            ospan1.style.display = "inline";            return false;        }else{            ospan1.style.display = "none";            return true;        }    }    ora.onblur = checkGender;

//表单中每一个元素满足条件为真时整体返回true即可提交成功    function res(){        var boo0 =  checkUsername();        var boo1 = checkFirstPassword();        var boo2 = checkSecondPassword();        var boo3 = checkNation();        var boo4 = checkHobby();        var boo5 = checkGender();        if(boo0 == true && boo1 == true && boo2 == true && boo3 == true && boo4 == true && boo5 == true){            return true;        }else{            return false;        }    }</script></body></html>

0 0