一 用Bootstrap美化页面，采用网络端引用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>封装插件+Bootstrap进行验证</title> <!-- 引入网络端的Juqery插件和Bootstrap插件 主要是方便书写 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 引入自定义的js --> <script src="Plugins/register.js"></script> </head> <body> <div class="container"> <div class="row"> <h2 class="col-md-10 text-center">Bootstrap+自定义验证</h2> </div> <div class="row"> <!-- 里面是具体的表单 --> <form class="form-horizontal" id="myform" method="post" action="#"> <!-- 第一行用户名 --> <div class="form-group"> <label for="loginName" class="col-md-2 control-label">用户名:</label> <div class="col-md-6 has-feedback"> <input type="text" class="form-control inputClass" id="loginName" placeholder="请输入你的用户名" name="loginName" value=""> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <label class="col-md-4 labelTitle text-danger glyphicon glyphicon-remove" id="loginNameTitle"></label> </div> <!-- 第二行密码--> <div class="form-group"> <label for="password" class="col-md-2 control-label ">密码</label> <div class="col-md-6"> <input type="password" class="form-control inputClass" id="password" placeholder="密码区分大小写" name="password" value=""><span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <label class="col-md-4 labelTitle text-danger glyphicon glyphicon-remove" id="passwordTitle"></label> </div> <!-- 第二行密码--> <div class="form-group"> <label for="email" class="col-md-2 control-label ">邮箱</label> <div class="col-md-6"> <input type="text" class="form-control inputClass" id="email" placeholder="请输入正确的邮箱" name="email" value=""> </div> <label style="margin-left: -40px; margin-top: 10px;"></label> <label class="col-md-4 labelTitle text-danger glyphicon glyphicon-remove" id="emailTitle"></label> </div> <!-- 该登录和重置的框了 --> <div class="form-group"> <div class="col-md-3 col-md-offset-3"> <input type="submit" class="btn btn-success btn-block" id="submit" value="登录" style="margin-left: -30px" /> </div> <div class="col-md-2 col-md-offset-1"> <button type="reset" class="btn btn-success btn-sm" style="margin-left: -30px">重置</button> </div> </div> </form> </div> </div> </body> </html>
重启服务器，检查页面，是这个样式的。
其中页面中，需要注意的点有三个:
1. 每一个input标签里面，class 都有一个.inputClass 的类。 对每一个需要验证的input框都添加一个inputClass。
2. 每一个input标签都有一个它所对应的label标签，这里显示提示信息，且这个标签的id命名为. input标签的Id+Title。
3. 每一个对应的label标签，都有一个对应的labelTitle的类。
二 添加基本JS validateJS.
在plugins文件夹下面添加一个validateJS.js, 里面放置的内容是:
validateJS.js
/** * 这是一个自定义封装的验证 */ $(function(){ /** * 1.对每一个labelError的标签进行循环遍历验证 */ $(".labelTitle").each(function(){ showTitle($(this)); }) /** * 2.当标签移入时进行移入的判断 */ $(".inputClass").focus(function(){ //1.获取进入的input框所在的id 使inputid与LabelId有统一的关系 var id=$(this).attr("id"); //2. 根据id获得当前的标签 var $label=$("#"+id+"Title"); //3. 将该标签的内容置空 $label.text(""); //4. 调用方法,看这个标签是否显示 showTitle($label); }) /** * 3.当鼠标移出这个标签时，进行移出的验证判断. */ $(".inputClass").blur(function(){ //1. 得到移出标签的这个id var id=$(this).attr("id"); //设置要执行的是哪一个方法 toUpperCase() substring 不要忘记() //2. 根据id去拼凑function的方法,这个方法起得应该是: loginName--->validateLoginName(); var funName="validate"+id.substring(0,1).toUpperCase()+id.substring(1)+"()"; //alert(funName); //3.用eval()去验证这个方法 eval(funName); }) }) /** * 4 写showError方法，去判断这个标签是否显示。 * 如果这个标签有值，则显示。 * 如果没有值，则不显示. */ function showTitle(ele){ //看是否有文字，如果有文字，则显示。没有，则隐藏 var text=trim(ele.text()); /** * 1. 如果输入的值为null,那么就让这个标签不显示。 * 如果输入的是ok,那么就显示一个对号。 * 如果输入的是oks开头，那么显示对号的同时，显示后面的语句。 * 如果是其它的，就表示错误信息，显示错号和错误信息。 */ if(!text){ //什么都不显示 ele.css("display","none"); }else if (text=='ok'){ //清空信息 ele.text(''); //显示信息框 ele.css("display",""); //显示对号 addOk(ele); }else if (text.indexOf('oks')==0){ //显示之后的信息 ele.text(text.substr(3,text.length)); ele.css("display",""); //显示对号 addOk(ele); }else{ ele.css("display",""); addRemove(ele); } } /** * 5 添加对号 */ function addOk(ele){ //移除错误的 ele.removeClass('glyphicon-remove').removeClass('glyphicon'); //添加正确的 ele.addClass('glyphicon').addClass('glyphicon-ok'); } /** * 6 添加错误号 */ function addRemove(ele){ //移除错误的 ele.removeClass('glyphicon-ok').removeClass('glyphicon'); //添加正确的 ele.addClass('glyphicon').addClass('glyphicon-remove'); } /** * 7 去除空格 */ function trim(str) { if (str == null) { return ""; } return str.replace(/^\s*(.*?)[\s\n]*$/g,'$1'); }
在Bootstrap里面添加这个JS
<!-- 引入自定义的js --> <script src="Plugins/validateJS.js"></script>
重启服务器，进行相应的查看信息，发现*号已经不见了。
三 添加页面相对应的验证
在页面login.jsp同级的目录下创建一个loginValidate.js的验证页面。这里只表示验证，没有其他的JS操作，如验证码操作，忘记密码操作等。 将其引入到jsp页面。 这个loginValidate.js，要位于validateJS.js的后面。
<!-- 引入登录页面的验证 --> <script src="loginValidate.js"></script>
在loginValidate.js页面中，直接写验证的方法。 注意，这个验证方法的命名，应该是validate+Id首字母大写名称.
如id为 password,则验证为validatePassword, id为email,则验证为validateEmail方法。
这里只验证password和email方法。
四 验证password字段 validatePassword
使密码显示对号的同时，显示后面的信息。
/* * 对密码进行的相关验证 */ function validatePassword(){ //设置对象 var id="password"; //得到值 var value=$("#"+id).val(); //设置标签Label的对象. var $label=$("#"+id+"Title"); if(!value){ $label.text(" 密码不能为空"); showTitle($label); return false; } if(!/^\w{6,20}$/.test(value)){ //alert("不符合"); //如果为空,则使其对应的label的text进行设置,调用showTitle()方法. $label.text(" 密码长度在6~20之间"); showTitle($label); //返回false return false; }else{ $label.text("oks密码输入正确"); showTitle($label); return true; } }
五 验证Email字段, validateEmail
/* * 对邮箱进行的相关验证 */ function validateEmail(){ //设置对象 var id="email"; //得到值 var value=$("#"+id).val(); //设置标签Label的对象. var $label=$("#"+id+"Title"); if(!value){ //如果为空,则使其对应的label的text进行设置,调用showTitle()方法. $label.text(" 邮箱地址不能为空"); showTitle($label); //返回false return false; } if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)){ //alert("不符合"); //如果为空,则使其对应的label的text进行设置,调用showTitle()方法. $label.text(" 邮箱格式不正确"); showTitle($label); //返回false return false; }else{ $label.text("ok"); showTitle($label); return true; } }
六 重启服务器，进行相关的验证检测
如果不输入值的话:
如果输入的是错误的值的话:
输入正确的值的话:
一个显示提示信息，一个不显示提示信息。
然而，现在仍然有一个比较大的问题，就是如果错误时，点击按钮，仍然是可以提交的。
七 解决Form表单的验证
在Juqery中进行相应的添加,也就是在loginValidate.js中，添加一个Jquery方法。
$(function(){ //实现在提交之时，对所有的input进行再次的判断，放在jquery中. $("#myform").submit(function(){ //return true; return validatePassword()&&validateEmail(); }) })
此时，如果页面上显示错误，
是无法进行提交操作的。
八 总结
这个提示比较好，页面也相对美观，但是如果提示信息过长了呢? 那么label的Title标签不也是要更长吗? 而且，这些验证修改时，也相对来说比较麻烦。
九 loginValidate.js文件
/** * 这里表示登录页面的验证 */ $(function(){ //实现在提交之时，对所有的input进行再次的判断，放在jquery中. $("#myform").submit(function(){ //return true; return validatePassword()&&validateEmail(); }) }) /* * 对密码进行的相关验证 */ function validatePassword(){ //设置对象 var id="password"; //得到值 var value=$("#"+id).val(); //设置标签Label的对象. var $label=$("#"+id+"Title"); if(!value){ $label.text(" 密码不能为空"); showTitle($label); return false; } if(!/^\w{6,20}$/.test(value)){ //alert("不符合"); //如果为空,则使其对应的label的text进行设置,调用showTitle()方法. $label.text(" 密码长度在6~20之间"); showTitle($label); //返回false return false; }else{ $label.text("oks密码输入正确"); showTitle($label); return true; } } /* * 对邮箱进行的相关验证 */ function validateEmail(){ //设置对象 var id="email"; //得到值 var value=$("#"+id).val(); //设置标签Label的对象. var $label=$("#"+id+"Title"); if(!value){ //如果为空,则使其对应的label的text进行设置,调用showTitle()方法. $label.text(" 邮箱地址不能为空"); showTitle($label); //返回false return false; } if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)){ //alert("不符合"); //如果为空,则使其对应的label的text进行设置,调用showTitle()方法. $label.text(" 邮箱格式不正确"); showTitle($label); //返回false return false; }else{ $label.text("ok"); showTitle($label); return true; } }
谢谢!!!
