jQuery前端基本验证(二)

最新推荐文章于 2023-08-15 20:00:00 发布

原创最新推荐文章于 2023-08-15 20:00:00 发布 · 988 阅读

0 ·

CC 4.0 BY-SA版权

转载请注明出处(两个蝴蝶飞)

前端验证专栏收录该内容

4 篇文章

订阅专栏

本文通过实战演示如何使用Bootstrap和自定义JavaScript实现前端表单验证，包括密码和邮箱格式检查，利用jQuery事件处理输入和焦点变化，确保用户体验同时增强表单交互性。

“两个蝴蝶飞”特别喜欢"java1234知识分享网"小峰的实用主义，所以本文及其系列文章均是采用实用主义，从项目和代码的角度去分析。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。特别感谢"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;
	}
}

谢谢!!!