学习验证

<!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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值