“两个蝴蝶飞”特别喜欢"java1234知识分享网"小峰的实用主义，所以本文及其系列文章均是采用实用主义，从项目和代码的角度去分析。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。所有的资料大部分是两者提供，为了方便书写，故不一一指名出处，请谅解，非常抱歉。
上一章简单介绍了jQuery前端基本验证(一),如果没有看过，请观看上一章
这里采用Bootstrap框架进行前端美化，如果不熟悉Bootstrap框架，可以参考Bootstrap官方文档。 去官网
一 用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;
}
}
谢谢!!!
