重复密码需一致的表单实例
截图
代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Amaze UI Admin index Examples</title> 8 <meta name="description" content="这是一个 index 页面"> 9 <meta name="keywords" content="index"> 10 <meta name="viewport" content="width=device-width, initial-scale=1"> 11 <meta name="renderer" content="webkit"> 12 <meta http-equiv="Cache-Control" content="no-siteapp" /> 13 <link rel="icon" type="image/png" href="__LOGIN__/i/favicon.png"> 14 <link rel="apple-touch-icon-precomposed" href="__LOGIN__/i/app-icon72x72@2x.png"> 15 <meta name="apple-mobile-web-app-title" content="Amaze UI" /> 16 <link rel="stylesheet" href="__LOGIN__/css/amazeui.min.css" /> 17 <link rel="stylesheet" href="__LOGIN__/css/amazeui.datatables.min.css" /> 18 <link rel="stylesheet" href="__LOGIN__/css/app.css"> 19 <script src="__LOGIN__/js/jquery.min.js"></script> 20 21 </head> 22 23 <body data-type="login"> 24 <script src="__LOGIN__/js/theme.js"></script> 25 <div class="am-g tpl-g" style="margin-bottom: 130px"> 26 <!-- 风格切换 --> 27 <div class="tpl-skiner"> 28 <div class="tpl-skiner-toggle am-icon-cog"> 29 </div> 30 <div class="tpl-skiner-content"> 31 <div class="tpl-skiner-content-title"> 32 Select Theme 33 </div> 34 <div class="tpl-skiner-content-bar"> 35 <span class="skiner-color skiner-white" data-color="theme-white"></span> 36 <span class="skiner-color skiner-black" data-color="theme-black"></span> 37 </div> 38 </div> 39 </div> 40 <div class="tpl-login"> 41 <div class="tpl-login-content"> 42 <div class="tpl-login-title">Register</div> 43 <span class="tpl-login-content-info"> 44 Register a new count. 45 </span> 46 47 48 <form class="am-form tpl-form-line-form" action="" method="post"> 49 <div class="am-form-group"> 50 <input type="text" class="tpl-form-input" id="user-name" name="username" required="" placeholder="Username"> 51 </div> 52 <div class="am-form-group"> 53 <input type="email" class="tpl-form-input" id="user-name" name="email" required="" placeholder="Email"> 54 55 </div> 56 <div class="am-form-group"> 57 <input type="password" class="tpl-form-input" id="password" name="password" required="" placeholder="Password"> 58 </div> 59 60 <div class="am-form-group"> 61 <input type="password" class="tpl-form-input" id="passwordConfirm" name="passwordConfirm" required="" placeholder="Password"> 62 </div> 63 64 <div class="am-form-group"> 65 <label class="am-radio-inline tpl-login-remember-me"> 66 <input class="tpl-form-input" type="radio" name="status" value="0" checked="checked">Student 67 68 </label> 69 <label class="am-radio-inline tpl-login-remember-me"> 70 <input class="tpl-form-input" type="radio" name="status" value="1">Teacher 71 </label> 72 </div> 73 74 <div class="am-form-group"> 75 <input type="text" class="tpl-form-input" id="user-name" name="CAPTCHA" placeholder="CAPTCHA"> 76 </div> 77 <div class="am-form-group"> 78 <img width="100%" src="{:captcha_src()}" alt="captcha" /> 79 </div> 80 81 <div class="am-form-group tpl-login-remember-me"> 82 <input id="remember-me" type="checkbox" required=""> 83 <label for="remember-me"> 84 85 我已阅读并同意 <a href="javascript:;">《用户注册协议》</a> 86 </label> 87 88 </div> 89 90 <div class="am-form-group"> 91 92 <button type="button" id="sub" class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">提交</button> 93 94 </div> 95 </form> 96 </div> 97 </div> 98 </div> 99 <script src="__LOGIN__/js/amazeui.min.js"></script> 100 <script src="__LOGIN__/js/app.js"></script> 101 102 </body> 103 104 </html> 105 <script> 106 (function(){ 107 var sub = document.getElementById("sub"); 108 //初始化移入移出事件 109 if(sub.addEventListener){ 110 sub.addEventListener("click", test); 111 }else if(sub.attachEvent){ 112 sub.attachEvent("onClick", test); 113 } 114 })(); 115 function test(){ 116 var password = document.getElementById("password"); 117 var passwordConfirm = document.getElementById("passwordConfirm"); 118 if(password.value != passwordConfirm.value) 119 alert("对不起，您2次输入的密码不一致"); 120 else 121 document.forms[0].submit(); 122 123 } 124 </script>
25、自己添加的样式
53、type制定类型的话自己验证
65、当你发现是tp开头的类在主题切换中起作用的时候，先在这里找，然后去css里面找啊，你就能知道他们对基本样式做了哪些改变
92、这里type选botton是没法提交的，是为了配合下面密码验证的JS，如果这里用submit的话可以自动提交
118、密码的重复的话一致验证
121、提交表单