页面需要按照这种Bootstrap布局,id、name这些属性一定要步调一致,否则效果失败,不说废话,代码能解释一切
页面范例
<%@ 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"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>增加客户</title> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css"/> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"> </script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/menu.js"></script> <!-- Bootstrap--> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- JS验证 --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/account_valid.js"></script> </head> <body> <jsp:include page="header.jsp"></jsp:include> <div id="content"> <jsp:include page="left.jsp"></jsp:include> <div class="m-right"> <div class="main container"> <br><br> <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/Account/doCreate" method="POST"> <div class="form-group" id="realNameDiv"> <label for="realName" class="col-sm-2 control-label">真实姓名</label> <div class="col-sm-5"> <input type=text class="form-control" name="realName" id="realName" placeholder="请输入真实姓名"> </div> <div class="col-sm-5"><span id="realNameSpan"></span></div> </div> <div class="form-group" id="idCardDiv"> <label for="idCard" class="col-sm-2 control-label">身份证号</label> <div class="col-sm-5"> <input type="text" class="form-control" name="idCard" id="idCard" placeholder="请输入身份证号码"> </div> <div class="col-sm-5"><span id="idCardSpan"></span></div> </div> <div class="form-group" id="telDiv"> <label for="tel" class="col-sm-2 control-label">电话号码</label> <div class="col-sm-5"> <input type="text" class="form-control" name="tel" id="tel" placeholder="请输入电话号码"> </div> <div class="col-sm-5"><span id="telSpan"></span></div> </div> <div class="form-group" id="emailDiv"> <label for="email" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-5"> <input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱"> </div> <div class="col-sm-5"><span id="emailSpan"></span></div> </div> <div class="form-group" id="moneyDiv"> <label for="money" class="col-sm-2 control-label">金额</label> <div class="col-sm-5"> <input type="text" class="form-control" name="money" id="money" placeholder="请输入金额"> </div> <div class="col-sm-5"><span id="moneySpan"></span></div> </div> <div class="form-group" id="btnDiv"> <div class="col-md-5 col-md-offset-2"> <button type="submit" id="subBtn" class="btn btn-sm btn-primary">增加</button> <button type="reset" id="rstBtn" class="btn btn-sm btn-warning">重置</button> </div> </div> </form> </div> </div> </div> <jsp:include page="foot.jsp"></jsp:include> </body> </html>PS:大家不必关心整个页面,重点看表单的Bootstrap布局,这种布局对JS的写法有非常大的辅助作用
JS代码可以让表单验证非常炫酷,同时大家要学会如何封装一些特定的验证规则成框架,笔者之前一次项目就是因为没有封装,导致代码复用性可差,这段时间仔细把前面的JS表单验证封装了一下
$(function(){ $("#realName").blur(function(){ validateRealName() ; }) ; $("#idCard").blur(function(){ validateIdCard() ; }); $("#tel").blur(function(){ validateTel() ; }); $("#email").blur(function(){ validateEmail() ; }); $("#money").blur(function(){ validateMoney() ; }); $("#subBtn").click(function(){ return validateRealName() && validateIdCard() && validateTel() && validateEmail() && validateMoney(); }); function validateMoney(){ return validateFloat("money") ; } function validateEmail(){ var flag=validateEmpty("email") ; if(flag){ var reg=/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/ ; var email=$("#email").val() ; flag=reg.test(email) ; if(!flag){ $("#emailDiv").attr("class","form-group has-error") ; $("#emailSpan").empty() .append("<span class='text-danger'>该字段内容必须是邮箱格式!</span>") ; } } return flag ; } function validateTel(){ var flag=validateEmpty("tel") ; if(flag){ var isMobile=/^(?:13\d|15\d)\d{5}(\d{3}|\*{3})$/; var isPhone=/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; var tel=$("#tel").val() ; flag=isMobile.test(tel) || isPhone.test(tel) ; if(!flag){ $("#telDiv").attr("class","form-group has-error") ; $("#telSpan").empty() .append("<span class='text-danger'>该字段内容必须是电话格式!</span>") ; } } return flag ; } function validateIdCard(){ return flag=validateEmpty("idCard") ; } function validateRealName(){ return validateEmpty("realName"); } function validateFloat(eleId){ //验证正小数或正整数,这里的Float仅仅标识小数,跟Java无关, var flag=validateEmpty(eleId) ; //先验证是否为空 if(flag){ var myFloat=$("#"+eleId).val() ; //取得小数 var reg=/^[0-9]+.?[0-9]*$/ ; //正小数 flag=reg.test(myFloat) ; //正则校验 if(!flag){ $("#"+eleId+"Div").attr("class","form-group has-error") ; $("#"+eleId+"Span").empty() .append("<span class='text-danger'>该字段内容必须是正小数!</span>") ; } } return flag ; } function validateInteger(eleId){ //验证整数 var flag=validateEmpty(eleId) ; //先验证是否为空 if(flag){ //不为空 var myInt=$("#"+eleId).val() ; //取得正数 var reg=/^[1-9]*[1-9][0-9]*$/ ; //正则表达式 flag=reg.test(myInt) ; //取得正则标识 if(!flag){ //输入的不是正整数 $("#"+eleId+"Div").attr("class","form-group has-error") ; $("#"+eleId+"Span").empty() .append("<span class='text-danger'>该字段内容必须是正整数!</span>") ; } } return flag ; } function validateEmpty(eleId){ //非空验证 var flag=true ; if($("#"+eleId).val()==""){ //如果内容为空 $("#"+eleId+"Div").attr("class","form-group has-error") ; $("#"+eleId+"Span").empty() .append("<span class='text-danger'>该字段内容不能为空!</span>") ; flag=false ; }else{ //内容非空 $("#"+eleId+"Div").attr("class","form-group has-success") ; $("#"+eleId+"Span").empty() .append("<span class='text-success'>该字段内容输入正确</span>") ; flag=true ; } return flag ; } });效果截图
总结:如果表单写成固定的这种格式,验证非常炫酷,大家也可以开发成一套验证体系框架,使用起来非常爽
