layui模板註冊表單
今天晚上用layui模板做了一個簡單的註冊表單,功能主要有可以js驗證密碼重複,可以驗證手機號碼。
這是介面
下面是我的html文件程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <form class="layui-form" action="register?method1=register" method="post"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>用戶註冊</legend> </fieldset> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline"> <input type="text" name="username" required lay-verify="required" placeholder="請輸入姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密碼</label> <div class="layui-input-inline"> <input type="password" id="pwd1" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">輔助文字</div> </div> <div class="layui-form-item"> <label class="layui-form-label">重複密碼</label> <div class="layui-input-inline"> <input type="password" id="pwd2" onkeyup="validate()" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手機號</label> <div class="layui-input-inline"> <input type="text" name="phone" id="phone" onblur="isPhone(this.value)" required lay-verify="required" placeholder="請輸入手機號" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">單位</label> <div class="layui-input-inline"> <select name="work" lay-verify="required"> <option value=""></option> <option value="政府機構">政府機構</option> <option value="個體戶">個體戶</option> </select> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <input class="layui-btn" type="submit" value="立即提交"></input> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script src="layui/layui.all.js" charset="utf-8"></script> <script> //Demo function validate() { var pwd1 = document.getElementById("pwd1").value; var pwd2 = document.getElementById("pwd2").value; <!-- 對比兩次輸入的密碼 --> if(pwd1!=pwd2) { alert("兩次密碼輸入不同"); document.getElementById('pwd2').value=""; } } function isPhone(card) { // 身份證號碼為15位或者18位,15位時全為數字,18位前17位為數字,最後一位是校驗位,可能為數字或字元X var reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; if(reg.test(card) === false) { alert("電話號碼輸入有誤!"); document.getElementById('phone').value=""; } } layui.use('form', function(){ var form = layui.form; }); </script> </body> </html>