程序博客网 > 类似爱情2只有我知伟

用户登录注册页面jQuery验证

来源：互联网发布：类似爱情2只有我知伟编辑：程序博客网时间：2024/05/16 03:18

登录

<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
   <#--js\jquery-->
    <script type="text/javascript">
   $(function () {
        $("#username").blur(function(){
            $("#names").empty();
           var name = $(this).val();
            if(name=="" || name==null){
               $("#username").after("<span id='names' style='color: red'>用户名不能为空</span>");
            }
        });
       $("#pwd").blur(function(){
           $("#pwds").empty();
           var pwd = $(this).val();
           if(pwd==""|| pwd==null){
               $("#pwd").after("<span id='pwds' style='color: red'>密码不能为空</span>");
           }
        });

       $("#submit").click(function () {
          var name = $("#username").val();
          var pwd = $("#pwd").val();
          $("#sub").empty();
       $.post("/users/login",{"username":name,"password":pwd},function(data){
           if(data){
               window.location.href="/message/show"
           }else {
               $("#submit").after("<span id='sub' style='color: red' >用户名密码错误</span>");
           }
       })
       });

    });
   </script>
</head>

<body class="container" ng-app="myApp" ng-controller="controller">

<div class="col-md-3 col-md-offset-3">
    <div class="form-group">
        <label >username</label>
        <input type="text" class="form-control" name="username" id="username">
    </div>
    <div class="form-group">
        <label >password</label>
        <input type="password" class="form-control" name="password" id="pwd">
    </div>

    <button type="button" class="btn btn-info" id="submit">Submit</button>
</div>
</body>

注册

<script type="text/javascript">
   $(function () {

        $("#username").blur(function(){
            var username = $(this).val();
            var na = /^[A-Za-z0-9\u4e00-\u9fa5_]+$/;
            $("#name").empty();
            if(username==null || username==""){
                $("#username").after("<span id='name' style='color: red'>用户名不能为空</span>")
            }else if(!na.test(username)){
                $("#username").after("<span id='name' style='color: red'>用户名格式不正确</span>")
            }else {
                $.post("/users/selectByName",{"username":username},function(data){
                    if(data){
                        $("#username").after("<span id='name' style='color: red'>用户名已存在</span>")
                    }
                })
            }
        });
        $("#pwd").blur(function(){
            var pwd = $(this).val();
            var p = /^[A-Za-z0-9]{6,20}$/;
            $("#pwds").empty();
            if(pwd==null || pwd==""){
                $("#pwd").after("<span id='pwds' style='color: red'>密码不能为空</span>");
            }else if(!p.test(pwd)){
                $("#pwd").after("<span id='pwds' style='color: red'>密码格式不正确</span>");
            }
        });
        $("#pwd1").blur(function(){
            var pwd1 = $(this).val();
            var pwd = $("#pwd").val();
            $("#pwds1").empty();
            if(pwd1==null || pwd1==""){
                $("#pwd1").after("<span id='pwds1' style='color: red'>确认密码不能为空</span>")
            }else if(pwd1 != pwd){
                $("#pwd1").after("<span id='pwds1' style='color: red'>两次密码不一致</span>")
            }
        });
        $("#email").blur(function(){
           var email = $(this).val();
           var ema =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
           $("#emails").empty();
            if(email==null ||email==""){
                $("#email").after("<span id='emails' style='color: red'>邮箱不能为空</span>")
            }else if(!ema.test(email)){
                $("#email").after("<span id='emails' style='color: red'>邮箱格式不正确</span>")
            }
        });

    });
   </script>
</head>

<body class="container" ng-app="myApp" ng-controller="controller">

<div class=" col-md-offset-3 col-md-6">
    <form action="/users/register" method="post">
    <div class="form-group">
        <label >username</label>
        <input type="text" class="form-control" name="username" id="username"
               placeholder=" 用户名可以由中文，数字，英语大小写，下划线组成">
    </div>
    <div class="form-group">
        <label >password</label>
        <input type="password" class="form-control" name="password" id="pwd"
               placeholder="密码不能低于六位">
    </div>
    <div class="form-group">
        <label >confirm password</label>
        <input type="password" class="form-control" id="pwd1" placeholder="确认密码">
    </div>
    <div class="form-group">
        <label >email</label>
        <input type="email" class="form-control" name="email" id="email">
    </div>
    <button type="submit" class="btn btn-info">Submit</button>
    </form>
</div>
</body>

阅读全文

0 0

类似爱情2只有我知伟

类似爱情2只有我知伟

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子飞机晚点查询怎么查火车晚点火车正晚点实时查询查火车晚点糖耐前一晚8点还是10点高铁晚点导致赶不上后续高铁附近兼职晚班8点到12点火车晚点赔偿火车正点晚点查询火车晚点原因高铁晚点赔偿火车正晚点实时查讯正晚点火车查询飞机正晚点查询中国晚点第一神车附近兼职晚班6点到10点高铁晚点可以改签吗飞机晚点赔偿飞机晚点原因飞机晚点多久可以赔偿飞机误点怎么赔偿飞机燃油附加费飞机时刻表火车为什么会晚点晚熟葡萄晚熟桃品种晚熟李子苗晚熟桃苗桃树晚熟新品种晚熟桃树苗新品种晚熟桃树苗基地特晚熟冬桃品种桃树晚熟品种晚熟桃树苗价格晚班司机4小时附近兼职晚班晚班和车间值晚班大姐发生兼职晚班厦门晚班兼职招聘上晚班白天睡不着怎么办