验证表单

来源：互联网发布：健身行业数据编辑：程序博客网时间：2024/06/15 05:03
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <title></title>    <script>        $(function(){            var flag1=false;            var flag2=false;            var flag3=false;            var flag4=false;            var $es = $("#es");            var $ns = $("#ns");            var $ps = $("#ps");            var $ps2 = $("#ps2");            //验证邮箱            $("#email").blur(function(){                var $email = $("#email").val();                if($email.indexOf("@")!=-1){                    $es.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"邮箱可用");                    flag1=true;                }else if($email==null||$email==""){                    $es.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");                    flag1=false;                }else{                    $es.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"Email错误");                    flag1=false;                }            });            //验证名字            $("#name").blur(function(){                var $name = $("#name").val();                if($name.match( /^[\u4E00-\u9FA5]{1,}$/) ){                    if($name.length>1 && $name.length<10){                        $ns.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"用户名可用");                        flag2=true;                    }else if($name==null||$name==""){                        $ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");                        flag2=false;                    }else{                        $ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"用户名不可用");                        flag2=false;                    }                }else{                    if($name.length>3 && $name.length<21){                        $ns.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"用户名可用");                        flag2=true;                    }else if($name==null||$name==""){                        $ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");                        flag2=false;                    }else{                        $ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"用户名不可用");                        flag2=false;                    }                }            });            //验证密码            $("#pw").blur(function(){                var $pw = $("#pw").val();                if($pw.length>5 && $pw.length<20){                    $ps.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"密码可用");                    flag3=true;                }else if($pw==null||$pw==""){                    $ps.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");                    flag3=false;                }else{                    $ps.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"密码格式错误");                    flag3=false;                }            });            //验证邮密码2            $("#pw2").blur(function(){                var $pw2 = $("#pw2").val();                var $pw = $("#pw").val();                if($pw2==$pw){                    $ps2.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"验证成功");                    flag4=true;                }else{                    $ps2.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"两次密码输入不同");                    flag4=false;                }            });            //提交            $("#btn").click(function(){                if(flag1==true&&flag2==true&&flag3==true&&flag4==true){                    alert("提交成功");                }else{                    alert("提交失败"+flag1+"--"+flag2+"---"+flag3+"----"+flag4);                }            });        })    </script></head><body><form>    <table border="1px" cellpadding="0px" cellspacing="0px">        <tr>            <td style="text-align: right">请填写你的Email地址</td>            <td><input id="email" type="text" style="margin: 2px"> <span id="es">请填写有效的Email地址</span></td>        </tr>        <tr>            <td style="text-align: right">请设置你的名字</td>            <td><input id="name" type="text" style="margin: 2px"> <span id="ns">您的昵称可以由英文字母、中文、数字组成</span></td>        </tr>        <tr>            <td style="text-align: right">设置密码</td>            <td><input id="pw" type="text" style="margin: 2px"> <span id="ps">输入6-10位的密码</span></td>        </tr>        <tr>            <td style="text-align: right">再次确认密码</td>            <td><input id="pw2" type="text" style="margin: 2px"> <span id="ps2">再次输入您设置的密码</span></td>        </tr>    </table>    <input id="btn" type="button" value="注册"></form></body></html>
阅读全文
0 0