前端專案積累和總結——表單驗證
前言:
自2017.7.6入職,如今已經整整五個月。在天津的培訓階段已經接近尾聲,我認為有必要總結一下這段時間學到的點點滴滴。做技術重在經驗和積累,既然入了軟體開發的“坑”,我只能硬著頭皮往下走。無論如何,在這條“軟”路上,我走過的每一步都應有它的意義和價值。
該前端專案簡述:一個自動化資料採集軟體,前端用html+css+javascript+jQuery實現,後端用node.js與前端互動。
本人負責部分:登入介面、主介面、使用者管理介面、客戶端使用者管理介面。
積累:(一)表單驗證
因為我做的就是使用者相關的東西,表單驗證環節至關重要。這裡做的驗證僅是本地合法化驗證,不與後端相關(如果使用者輸入有誤,
1. 正則表示式
用正則表示式來匹配字元,是表單驗證的常用方法。
兩種定義方法:
var re = new RegExp("a","i");
var re = /a/i;
正則表示式是由普通字元(如字元A到字元Z)和特殊字元(稱為元字元)組成。
(特殊字元、數字、空格、任意字元、中文匹配 ......)
正則表示式物件的方法:
exec(); //執行匹配,返回找到值的陣列,沒找到返回null
test(); //測試匹配,返回bool值
toSource(); //返回RegExp物件原始碼
toString(); //返回RegExp物件字串
2. 專案中應用例項
(1)HTML:
<div class="login-box">
<form class="login-form" action="/user/login" method="post">
<div class="controlgrp">
<label class="control-lbl" id="name-label" for="name"></label>
<input class="control-name" type="text" name="name" placeholder="使用者名稱(中文或英文)" id="userName"/>
</div>
<span class="msg"></span>
<div class="controlgrp">
<label class="control-lbl"id="passwd-label" for="passwd"></label>
<input class="control-pwd" type="password" name="passwd" placeholder="密碼(6-16個字元)" id="userPwd"/>
</div>
<span class="msg"></span>
<p id="message" style="margin-left:110px;font-size:14px;"><%= message %></p>
<div class="control">
<input class="control-remember" type="checkbox" name="remember-me" id="remember" ><label style="font-size:14px; vertical-align:middle;">記住我</label>
</div>
<div class="control">
<input class="control-submit" type="submit" value='登入' onclick="setCookie()">
<input class="control-reset" type="button" value='重置' onclick="login_reset()">
</div>
</form>
</div><!-- login-box end -->
(2)javascript
//計算字元長度(一個漢字為兩個字元長度)
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;
}
//查詢字串中的重複字元個數
function findStr(str,n){
var tmp=0;
for(var i=0;i<str.length;i++){
if(str.charAt(i)==n){
tmp++;
}
}
return tmp;
}
window.onload = function(){
login_form_check();
}
//登入頁面-表單合法化校驗
var usernameCheckRes = true;
var userpwdCheckRes = true;
function login_form_check(){
var oName = document.getElementById("userName");
var oPwd = document.getElementById("userPwd");
var oMsg = document.getElementsByClassName("msg");
var oName_msg = oMsg[0];
var oPwd_msg = oMsg[1];
//使用者名稱合法化校驗
oName.onblur = function(){
var name_length=getLength(this.value);
var re=/[^\w\u4e00-\u9fa5]/g;//非法的使用者名稱
//含有非法字元
if(re.test(this.value)){
oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>含有非法字元';
usernameCheckRes = false;
}
//不能為空
else if(this.value==""){
oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
usernameCheckRes = false;
}
//長度應為4-20個字元
else if(name_length<4 || name_length>20){
oName_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>長度應為4-20個字元';
usernameCheckRes = false;
}
//正確
else{
oName_msg.innerHTML = '<i class="fa fa-check-circle" style="margin-right:5px;"></i>';
usernameCheckRes = true;
}
}
//密碼合法化驗證
oPwd.onblur = function(){
var m=findStr(oPwd.value,oPwd.value[0]);
var re_n=/[^\d]/g;//數字
var re_t=/[^a-zA-Z]/g;//字母
//不能為空
if(this.value==""){
oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
userpwdCheckRes = false;
}
//長度應為6-16個字元
else if(this.value.length<6 || this.value.length>16){
oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>長度應為6-16個字元';
userpwdCheckRes = false;
}
//不能全為相同字元
else if(m == this.value.length){
oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全為相同字元';
userpwdCheckRes = false;
}
//不能全是數字
else if(!re_n.test(this.value)){
oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全為數字';
userpwdCheckRes = false;
}
//不能全是字母
else if(!re_t.test(this.value)){
oPwd_msg.innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能全為字母';
userpwdCheckRes = false;
}
//正確
else{
oPwd_msg.innerHTML = '<i class="fa fa-check-circle" style="margin-right:5px;"></i>';
userpwdCheckRes = true;
}
}
}
同時阻止向伺服器端傳送資料(兩種情況)
a. submit提交的表單,通過onsubmit返回false
<form class="login-form" action="/user/login" method="post" onsubmit="return login_check()">
function login_check(){
var msg = document.getElementsByClassName("msg");
if(document.getElementById("userName").value == "")
{
msg[0].innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
document.getElementById("userName").focus();
return false;
}
else if(false == usernameCheckRes)
{
document.getElementById("userName").focus();
return false;
}
else if(document.getElementById("userPwd").value == "")
{
msg[1].innerHTML = '<i class="fa fa-times-circle" style="margin-right:5px;"></i>不能為空';
document.getElementById("userPwd").focus();
return false;
}
else if(false == userpwdCheckRes)
{
document.getElementById("userPwd").focus();
return false;
}
return true;
}
b. 如果通過ajax方式與伺服器端互動,則在呼叫ajax函式之前阻止向伺服器端傳送資料if(false == nameCheckRes){
document.getElementById("add-name").focus(); //定位到當前位置
}
else if(false == pwdCheckRes){
document.getElementById("add-pwd").focus(); //定位到當前位置
}
else{
loadXMLDoc("/user/create", str, function() {
...
}
(3) 實際效果
後記:
這是自己第一次寫部落格來記錄每天的收穫,希望以後能堅持下去,加油!相關推薦
前端專案積累和總結——表單驗證
前言: 自2017.7.6入職,如今已經整整五個月。在天津的培訓階段已經接近尾聲,我認為有必要總結一下這段時間學到的點點滴滴。做技術重在經驗和積累,既然入了軟體開發的“坑”,我只能硬著頭皮往下走。無論如何,在這條“軟”路上,我走過的每一步都應有它的意義和價值。 該前端專案簡
前端tab切換 和 validatejs表單驗證外掛
一、tab切換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta na
前端專案積累和總結——jQuery的extend()方法
繼前篇《》,今篇學習一下jQuery為開發外掛提供的extend()方法。 因為我在專案中用到了兩個別人寫好的外掛,一個分頁器pagination,一個樹形列表simpleTree。 為讀懂程式碼,更好地利用外掛,就必須瞭解extend()。 積累:(三)jQuer
正則得介紹和使用——表單驗證
1、正則的概念 (1)js這門語言一開始誕生得目的是什麼? 就是為了做表單驗證。在JS未出現以前,表單的資訊驗證需要傳輸給後臺,讓後臺做資料驗證處理之後,再返回給前端頁面處理的結果。在頻寬有限的情況下,整個驗證過程非常複雜,且耗時。 在使用JS做驗證的過程中,一個簡單的驗證規則的
MVC身份驗證.MVC過濾器.MVC6關鍵字Task,Async.前端模擬表單驗證,提交.自定義匿名集合.Edge匯出到Excel.BootstrapTree樹狀選單的全選和反選.bootstrap可搜尋可多選可全選下拉框
在寫這篇部落格之前要嘮叨幾句.本人已從事開發四年有餘.從前兩年的熱情如火.到現在的麻木.總感覺要像上突破.卻又不敢輕舉妄動. 沒事就寫點基礎程式碼.指點下新人吧 1.MVC身份驗證. 有兩種方式.一個是傳統的所有控制器繼承自定義Control,然後再裡面用MVC的過濾器攔截.所以每次網站的後臺被訪問時.
JavaScript表單驗證和正則表達式
sco 集合 innertext ner rep tell 一次 臨時 軟件 JavaScript表單驗證 分為四類: 1.非空驗證 常用於用戶名等 2.相等驗證 常用於驗證兩次輸入的密碼 3.範圍驗證 常用於年齡等
前端編程提高之旅(十)----表單驗證插件與cookie插件
turn require 屬性 單選 method str 使用 art 存儲 實際項目開發中與用戶交互的常見手法就是採用表單的形式。取得用戶註冊、登錄等信息。而當用戶註冊或登錄後又須要記住用戶的登錄狀態。這就涉及到經常使用的兩個操作:表單驗證與cookie
django 表單驗證和字段驗證
pan 強制轉換 pre com amp 類型 always his ria 表單驗證和字段驗證 表單驗證發生在數據驗證之後。如果你需要自定義這個過程,有幾個不同的地方可以修改,每個地方的目的不一樣。表單處理過程中要運行三種類別的驗證方法。它們通常在你調用表單的is_v
前端表單驗證常用的15個JS正則表達式
ntp html 正整數 手機號碼 表達式 浮點數 als 浮點 個數 在表單驗證中,使用正則表達式來驗證正確與否是一個很頻繁的操作,本文收集整理了15個常用的javaScript正則表達式,其中包括用戶名、密碼強度、整數、數字、電子郵件地址(Email)、手機號碼、身份證
js表單驗證處理和childNodes 和children 的區別
.get out ren 改名 表單 tex jquery this 如果 一、對提交表單進行空值驗證 html代碼: 1 <form action="#"onsubmit="return validate_form(this);" method="post"&
php表單 - 驗證郵件和URL
通過 image all e-mail translate view 進行 pattern log PHP - 驗證名稱 以下代碼將通過簡單的方式來檢測 name 字段是否包含字母和空格,如果 name 字段值不合法,將輸出錯誤信息: $name =
前端——JQuery表單驗證插件
params brush xxx pass java blog scrip ida red 1、引入JQuery插件(依賴JQuery) <script src="js/jquery-1.11.3.min.js" type="text/javascript">
spring mvc:練習:表單驗證(javaConfig配置和註解)
libs pri tor sch pre ted 我們 binding sun 使用Spring表單標簽, 表單驗證使用 JSR303 的驗證註解,hibernate-validators,提供了使用MessageSource和訪問靜態資源(如CSS,JavaScript,
整理前端表單驗證常用的15個JS正則表達式
包含 身份證號 表達 name 3-9 字母 pre neu htm 1 用戶名正則 //用戶名正則,4到16位(字母,數字,下劃線,減號) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //輸出 true console.log(uPat
hvalidate vue前端表單驗證 表單驗證
hvalidate 專案介紹 自定義vue指令,前端表單校驗 安裝教程 專案地址 https://gitee.com/hcsy/hvalidate 在vue專案中引入 import hvalidate from './js/hvalida
表單驗證——input和required衝突解決
1. input和required衝突解決 Question: 使用表單提交驗證必填欄位時,若同時給 input[type="file"] 新增 readonly 以及 required 屬性,則發現,required必填驗證失效,既不會提示必填,也可以成功提交。 解決方法:將 r
html form表單驗證和使用者體驗程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>改善使用者體驗的表單</title> <style
SpringBoot表單驗證、AOP處理請求和統一異常處理
表單驗證 假如表單引數很多,用@RequestParam方式就不合適了,引數中可直接使用@Valid Girl gir /** * 新增一個女生 * @return */ @PostMapping(value = "/a
表單驗證總結
專案中經常在登入和註冊以及其他填寫資訊表單的時候會進行簡單的驗證,比如 使用者輸入的內容是否為空; 使用者輸入的內容長度是否滿足要求,一般密碼為6-12位數字和字母; 在註冊中密碼和確認密碼是否一樣,兩次輸入的內容是否為一致; 驗證碼是否和使用者輸入的一致; 網上有很
element-ui和vue表單(對話方塊)驗證提示語(殘留)清除
問題是這樣的: 如果一個頁面有多個按鈕開啟相同的element-ui的Dialog對話方塊,那麼如果第一個點選"順序"按鈕出現紅色驗證提示語後, 再點選“取消”,或者點選頁面空白處此對話方塊消失,而後再點選同一個“順序”按鈕亦或別的“順序”按鈕, 那麼此紅色提示依然存在,顯