学习验证

来源：互联网发布：求逆矩阵的方法编辑：程序博客网时间：2024/06/09 16:26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title></title>
    <script type="text/javascript">
        $(function(){
            var auto = 1;
            var auto2 = 1;
            var auto3 = 1;
            var auto4 = 1;
            var start = false;
           $("#email").focus(function(){
                if(start==false)
                {
                    $("#elb").text("");
                }
            });
            $("#email").blur(function(){
                var email = jQuery("#email").val();
                var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if(myreg.test(email))
                {
                    $("#ee").html("<img src='bbb.gif' style='width: 20px;height:20px;'/>");
                    $("#elb").text("输入正确！");
                    start = true;
                    return auto = 0;
                }else
                if(email == ""){
                   $("#elb").text("邮箱不能为空！");
                    return auto = 1;
                }else if(!myreg.test(email)){
                    $("#ee").html("<img src='aaa.gif' style='width: 20px;height:20px;'/>");
                    $("#elb").text("请输入有效的邮箱地址！");
                    return auto = 1;
                }else if(checkEmailIsExist()){
                    $("#elb").text("该邮箱地址已经被注册！");
                    return auto = 1;
                }
                });

            $("#name").focus(function(){
                if(start==false)
                {
                    $("#nel").text("");
                }
            });
            $("#name").blur(function(){
                if($("#name").val()=="")
                {
                    $("#nel").text("用户名不能为空!");
                    return auto2 = 1;
                }else
                if($("#name").val().length<4)
                {
                    $("#nel").text("用户名太短！");
                    return auto2 = 1;
                }else
                {
                    $("#nel").text("用户名正确");
                    return auto2 = 0;
                }
            });

            $("#password").focus(function(){
                $("#pdl").text("");
            });
            $("#password").blur(function(){
                if($("#password").val()=="")
                {
                    $("#pdl").text("密码不能为空");
                    return auto3 = 1;
                }else
                if($("#password").val().length<6)
                {
                    $("#pdl").text("密码不得低于六位");
                    return auto3 = 1;
                }
                else
                {
                    $("#pdl").text("密码正确");
                    return auto3 = 0;
                }
            });
            $("#password1").focus(function(){
                $("#pd1l").text("");
            });

            $("#password1").blur(function(){
                var a = $("#password1").val();
                var b = $("#password").val();
                if($("#password1").val()=="")
                {
                    $("#pd1l").text("确认密码不能为空!");
                    return auto4 = 1;
                }
                if(a==b)
                {
                    $("#pd1l").text("一致！");
                    return auto4 = 0;
                }else
                {
                    $("#pd1l").text("两次输入的密码不同！");
                    return auto4 = 1;
                }
            });

            $("#click").click(function () {
                if(auto==0&&auto2==0&&auto3==0&&auto4==0)
                {
                    alert("注册成功！！！！");
                }else
                {
                    alert("注册失败！！！！");
                }
            });
        });
    </script>
</head>
<body>
    <table border="1px solid black">
        <tr style="width: 500px;height:70px;">
            <td style="background-color: aqua">请填写您的Email地址：</td>
            <td>
                <input id="email" type="text" style="background-color: aquamarine"/>
                <span id="ee"></span>
                <span id="elb">请填写有效的Email地址,在下一步您将用此邮箱接收验证邮件。</span>
            </td>
        </tr>
        <tr style="width: 500px;height:70px;">
            <td style="background-color: aqua">设置您在当当网的昵称：</td>
            <td>
                <input id="name" type="text" style="background-color: aquamarine"/>
                <b id="nel">您的昵称可以由小写英文字母,中文,数组组成.</b>
            </td>
        </tr>
        <tr style="width: 500px;height:70px;">
            <td style="background-color: aqua">设置密码：</td>
            <td>
                <input id="password" type="password" style="background-color: aquamarine"/>
                <b id="pdl">您的密码可以由大小写字母组成，长度为6-20个字符</b>
            </td>
        </tr>
        <tr style="width: 500px;height:70px;">
            <td style="background-color: aqua">再次输入您设置的密码：</td>
            <td>
                <input id="password1" type="password" style="background-color: aquamarine"/>
                <b id="pd1l">请再次输入密码</b>
            </td>
        </tr>
    </table>
        <button type="button" style="margin-left:350px;width: 100px;height:30px;" id="click">注册</button>
</body>
</html>

阅读全文

0 0