2. 程式人生 > >Juqyer前端基本驗證(二)

Juqyer前端基本驗證(二)

阿新 • • 發佈：2018-12-14

“兩個蝴蝶飛”特別喜歡"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_-][email protected][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_-][email protected][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;
	}
}

謝謝!!!

相關推薦

Juqyer前端基本驗證(二)

“兩個蝴蝶飛”特別喜歡"java1234知識分享網"小峰的實用主義，所以本文及其系列文章均是採用實用主義，從專案和程式碼的角度去分析。由於本人經驗有限，嘴皮子不溜，所以學術性，概念性，底層性的知識點暫時不做介紹。文章中有錯誤之處，歡迎拍磚和指點。特別感謝"java1234知識

jQuery前端基本驗證(三)

“兩個蝴蝶飛”特別喜歡"java1234知識分享網"小峰的實用主義，所以本文及其系列文章均是採用實用主義，從專案和程式碼的角度去分析。由於本人經驗有限，嘴皮子不溜，所以學術性，概念性，底層性的知識點暫時不做介紹。文章中有錯誤之處，歡迎拍磚和指點。特別感謝"java1234知識

前端js實現--登入驗證二維碼

 數字和字母組合的四位驗證碼 HTML如下           <li class="border testcode">             &l

[前端] 基本bootstrap的註冊驗證

<form class="form-horizontal register" action="{:U('handleRegister')}" method="post" enctype="multipart/form-data"> <div class="form-group">

【仿doT前端模板】二、if else

查看 繼續 ons cnblogs 第一個 關系 light 註意 參考 效果預覽 首先，按照慣例，我們先看doT 實現的效果： 模板： {{? it.name }} <div>嗨, {{=it.name}}!</div> {{?? it

前端基本知識：JS的原始鏈的理解

這也 car tro 訪問 address script 解釋 owa res 一、JS的原型鏈理解方式 二、原型理解 三、規則 四、js常見的創建對象的各種方法 一、原始鏈理解方式 每一次原型鏈理解起來很費勁，而且經常容易出錯，或者解釋的不到位。 1、什麽是對象實例，

Yarn架構基本概況(二)

匯報 storm 資源 ger 計算 yar 代理 這樣的 共享 在概況(一)中，主要簡單的對Yarn的情況作了簡單的介紹，今天花一定時間在某些詳細的模塊上呈現下面Yarn的總體情況。幫助大家更好的理解Yarn。 1）ResourceManager 在Yarn的總體架構

UML的基本圖(二)

nbsp conf 宋體 through 主機 concepts 系統 receive react ?? Both sequence diagrams and communication diagrams are kinds of interaction diagram

netty開發程序的基本步驟(二)

ron 關閉 bound 統一管理 span 啟動 初始 ring and netty編寫程序的基本步驟如下 ： Server端： 1.創建兩個線程組，一個用於接收連接bossGroup，一個用於處理連接workerGroup 2.創建一個服務器啟動類serv

入門VMware Workstation下的Debian學習之基本命令(二)

修改文件 移除 usermod 修改用戶密碼 系統 軟件 普通 格式 new 　　本章記錄如何在Linux終端進行命令操作命令下載路徑,模擬終端、dkpg管理軟件包、用戶組和用戶管理、文件屬性、文件與目錄管理、查看磁盤使用量。 　　（1）命令下載路徑： 　　　　wegt 路

如何驗證二維數組

一個數 如何 二維數組 數組 非遞歸 識別 bsp 多維 spa PHP如何判斷一個數組是一維數組或者是二維數組？用什麽函數？其實 count 足矣 PHP手冊： int count ( mixed $var [, int $mode ] ) -- 計算數組中的單元數目

easyui中的基本驗證大全

isa def int osi per append 格式 on() idc /** * 擴展easyui的validator插件rules，支持更多類型驗證 */ $.extend($.fn.validatebox.defaults.rules, { minLengt

前端生成驗證碼圖片utils

sta substr setfont som 生成 col height log etc <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%

驗證二叉搜索樹

root tail span 所有結點 stat family blank 若是 遍歷 說實話，樹結構一直是我的弱項，這也體現了我對遞歸這樣的方法不熟（在我看來，樹和遞歸關系很密切）。現在刷題刷到樹相關的題目了。題目如標題：驗證二叉搜索樹。 開始我的思路是：假定當前結點值為

驗證二叉樹的前序序列化

cto push_back line amp for out 執行 單獨 AS 前言 最近自己的學長面試的時候遇到這一道題了，然後把這道題出給了我。我的第一想法是根據前序遍歷建立一個樹結構，然後根據能否建立樹來判斷。但是題目要求不能重建樹，所以自己確實不會做。在網上看了別人

基本命令二

表達式 基本 upd 修改 tar.xz 沒有 自己 硬件時間 OS 基本命令二 date、find、tar、zip、gzip、bzip2、xz date: date：查看系統時間 hwclock：查看硬件時間 date +%F：2017-04-11 date +%Y%

前端將圖片二進制流顯示在html端

alt rds color IE 分享 展示 any gone 返回 工作中碰到的問題，在處理接口返回的驗證碼圖片時，由於返回的是encode編碼代碼，在js端獲取到數據之後，通過函數encodeURI()來進行解碼，之後可以通過在src中設置來實現圖片顯示： &l

jQuery操作基本操作二學習筆記

操作 css lin length code 對象 trim document rip 基本訪問與工具 用法 描述empty()刪除匹配的元素集合中所有的子節點。each() 以每一個匹配的元素作為上下文來執行一個函數；每次執行傳遞進來的函數時，函數中的this關鍵字都

leetcode - 驗證二叉搜索樹

pre param 校驗 lse 特征 boolean nor == ++ 給定一個二叉樹，判斷其是否是一個有效的二叉搜索樹。 一個二叉搜索樹具有如下特征： 節點的左子樹只包含小於當前節點的數。 節點的右子樹只包含大於當前節點的數。 所有左子樹和右子樹自身必須也是二叉搜索

Leetcode 驗證二叉搜索樹

__init__ 列表 roo 排序 spa != 當前 是否 treenode 給定一個二叉樹，判斷其是否是一個有效的二叉搜索樹。 假設一個二叉搜索樹具有如下特征： 節點的左子樹只包含小於當前節點的數。 節點的右子樹只包含大於當前節點的數。 所有左子樹和右子樹自身必須也