使用bootstarp來進行表單驗證
阿新 • • 發佈：2018-11-23
使用前先下載好bootstarp需要的js,css並匯入,還有jquery檔案
bootstarp中文官網,即api文件https://v3.bootcss.com/
驗證方式正則表示式可以自己改,活學活用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath}/static/common/jquery-2.2.3.min.js"></script> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <div style="width: 400px;margin: 0 auto;border: 1px solid #269abc;padding: 30px;" > <form id="addUser" action="/weike/insertUser" method="post" role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-3"> <label class="control-label">使用者名稱：</label> </div> <div class="col-xs-9"> <input type="text" name="userName" class="form-control"> <span class="help-block"></span> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label class="control-label">電話：</label> </div> <div class="col-xs-9"> <input type="text" name="phone" class="form-control"> <span class="help-block"></span> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label class="control-label">QQ：</label> </div> <div class="col-xs-9"> <input type="text" name="qq" class="form-control"> <span class="help-block"></span> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label class="control-label">密碼：</label> </div> <div class="col-xs-9"> <input type="text" name="password" class="form-control"> <span class="help-block"></span> </div> </div> <div class="form-group"> <div class="col-xs-3"> <label class="control-label">dept：</label> </div> <div class="col-xs-9"> <input type="text" name="dept" class="form-control"> </div> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <script type="text/javascript"> $(function () { //驗證失敗進行換顏色,和提示 function isError(obj, html) { obj.parent().parent().addClass("has-error"); obj.next().html(html); } //驗證成功 function isOK(obj) { obj.parent().parent().removeClass("has-error"); obj.parent().parent().addClass("has-success"); obj.next().html(""); } //驗證使用者名稱 function verifyUserName(obj) { var userNameValue = obj.val(); if(userNameValue==""){ isError(obj,"使用者名稱不能為空"); return false; }else{ isOK(obj); return true; } } //驗證密碼 function verifyPassword(obj) { var passwordValue = obj.val(); if(passwordValue.length<6){ isError(obj,"密碼長度不夠6位"); return false; }else{ isOK(obj); return true; } } //驗證電話號碼 function verifyPhone(obj) { var phoneValue = obj.val(); var re = /^0\d{2,3}-?\d{7,8}$/; if(!re.test(phoneValue)){ isError(obj,"電話號碼不正確") return false; }else{ isOK(obj); return true; } } //驗證qq郵箱 function verifyQQ(obj) { var qqValue = obj.val(); var email = /^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/; if(!email.test(qqValue)){ isError(obj,"電話號碼不正確") return false; }else{ isOK(obj); } } //給它們分別定義失焦事件 $("input[name='userName']").blur(function () { verifyUserName($(this)); }) $("input[name='password']").blur(function () { verifyPassword($(this)); }) $("input[name='phone']").blur(function () { verifyPhone($(this)); }) $("input[name='qq']").blur(function () { verifyQQ($(this)); }) //提交方法進行驗證 $("#addUser").submit(function () { var userName = verifyUserName($("input[name='userName']")); var password = verifuPassword($("input[name='password']")); var phone = verifuPhone($("input[name='phone']")); var qq = verifuQQ($("input[name='qq']")); return userName&&password&&phone&&qq; }) }) </script> </div> </body> </html>