1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>password test</title> </head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> .container{ margin-top: 20px; } input.ng-invalid { border: 5px solid red; } </style> <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script> <script> $( function(){ $('#txtPass').keyup(function(){ $('#msg').text(''); }); $('#txtRePass').keyup(function(){ if($('#txtPass').val()!=$('#txtRePass').val()){ $('#msg').text(''); $('#msg').html("<b>암호실패</b>"); }else{ $('#msg').text(''); $('#msg').html("<b>암호성공</b>"); } }); } ); </script> <body> <div class="container" id="wrap"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form name="signUpForm" class="form" role="form"> <label>암호</label> <input type="password" id="txtPass" name="password" class="form-control input-lg" placeholder="패스워드" ng-model="user.password" ng-required="true"> <br> <label>암호 확인</label> <input type="password" id="txtRePass" name="password" class="form-control input-lg" placeholder="패스워드" ng-model="user.password" ng-required="true"> <br> <button class="btn btn-lg btn-primary btn-block signup-btn" type="submit" id="msg">암호를 입력하세요</button> </form> </div> </div> </div> </body> </html> | cs |
Jquery&Bootstrapk를 이용해서 회원가입 인증
2017. 11. 13. 21:25
