js实现表单验证

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="application/javascript">

        //验证码

        function createCode(){

            var code =  Math.floor(Math.random()*9000+1000)

            var span = document.getElementById("codeSpan")

            span.innerHTML=code

            return code

        }

        //验证用户名

        function codeUser(){

            return codedata("user",/^[\u4e00-\u9fa5]{2,4}$/)

        }

        //验证密码

        function codePassword(){

            return  codedata("password",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/)

            return codePassword2()

        }

        //校验密码

        function codePassword2(){

            //获取第一次密码

            var pwd =document.getElementById("password").value

            //获取第二次密码

            var pwd2 =document.getElementById("password2").value

            //比较两次密码是否相同

            var span =document.getElementById("password2Span")

            if(pwd2==""||pwd2==null){

                span.innerHTML="确认密码不能为空"

                return false

            }else if(pwd2=pwd){

                span.innerHTML="ok"

                return true

            }else{

                span.innerHTML="两次密码不一致"

                return false

            }

        }

        //验证手机号

        function codePhone(){

            return codedata("phone",/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/)

        }

        //验证邮箱

        function codeEmail(){

             return codedata("email",/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)

        }

        //封装

        function codedata(a,reg1){

            //获取用户的用户信息

            var user = document.getElementById(a).value

            var span = document.getElementById(a+"Span")

            var alt = document.getElementById(a).alt

            //创建校验规则

            var reg=reg1;

            //校验

            if(user==""|| user==null){

                span.innerHTML=alt+"不能为空"

                return false

            }else if(reg.test(user)){

                span.innerHTML=alt+"ok"

                return true

            }else{

                span.innerHTML=alt+"不符合规则"

                return false

            }

        }

        //验证籍贯

        function codeCity(){

            //获取用户选择的数据

            var sel=document.getElementById("city").value;

            //获取span

            var span=document.getElementById("citySpan");

            //校验

            if(sel!=0){

                span.innerHTML="籍贯选择成功"

                return true

            }else{

                span.innerHTML="籍贯不能为空"

                return false

            }

        }

        //验证爱好

        function codeHobby(){

            //获取爱好

            var hobbys = document.getElementsByName("hobby")

            var span = document.getElementById("hobbySpan")

            for(var i =0;i<hobbys.length;i++){

                if(hobbys[i].checked){

                    span.innerHTML="选择爱好成功"

                    return true

                }

            }

            span.innerHTML="爱好至少选择一项"

            return false

        }

        //校验是否同意公司协议

        function checkAgree(){

            document.getElementById("zc").disabled=!document.getElementById("agree").checked;

        }

        //提交判断

        function checkSub(){

            codeUser();

            codePassword();

            codePassword2();

            codePhone();

            codeEmail();

            codeCity();

            codeHobby();

            return codeUser()&&codePassword()&&codePassword2()&&codePhone()&&codeEmail()&&codeCity()&&codeHobby();

        }

    </script>

</head>

<body onload="createCode()">

    <div>

        <form name="" action="demo01.html" onsubmit="return checkSub()">

            用户名：<input type="text" name="user" id="user" value="" onblur="codeUser()" alt="用户名"><span id="userSpan"></span><br>

            密码：<input type="password" name="password" id="password" onblur="codePassword()" alt="密码"><span id="passwordSpan"></span><br>

            确认密码：<input type="password" name="password2" id="password2" onblur="codePassword2()"><span id="password2Span"></span><br>

            手机号：<input type="text" name="phone" id="phone" alt="手机号" onblur="codePhone()" alt="手机号"><span id="phoneSpan"></span><br>

            邮箱：<input type="text" name="email" id="email" alt="邮箱" onblur="codeEmail()"><span id="emailSpan"></span><br>

            性别： 男<input type="radio" name="sex" id="man" checked="checked"> &nbsp;&nbsp;

                女<input type="radio" name="sex" id="feman"><br>

            籍贯：<select id="city" name="city" onchange="codeCity()">

                    <option value="0">-请选择-</option>

                    <option value="1">广州</option>

                    <option value="2">上海</option>

                    <option value="3">北京</option>

                 </select><span id="citySpan"></span><br>

            爱好：<input type="checkbox"name="hobby" value="lol" onclick="codeHobby()">LOL &nbsp;

            <input type="checkbox"name="hobby" value="sleep"  onclick="codeHobby()">睡觉 &nbsp;

            <input type="checkbox"name="hobby" value="eat"  onclick="codeHobby()">吃饭 &nbsp;

            <input type="checkbox"name="hobby" value="listen"  onclick="codeHobby()">听歌 &nbsp;

            <span id="hobbySpan"></span>

            <br>

            个人介绍:<textarea name="inc"></textarea><br>

            验证码：<input type="text" name="code" id="code" ><span id="codeSpan" onclick="createCode()"></span><br>

            <input type="checkbox"name="agree" id="agree" onclick="checkAgree()" >是否同意本公司协议<br>

            <input type="submit" name="zc" id="zc" value="立即注册" disabled="disabled">

        </form>

    </div>

</body>

</html>
巴特西

js实现表单验证

最新文章

热门文章
