AJAX應用之表單驗證
一。表單常用事件
有三個，onsubmit（表單提交）事件，onfocus（獲得焦點）事件，onblur（失去焦點）事件。
1. onsubmit事件作用：組織或者允許表單的提交。
<form action="" method="post" onsubmit="return false">renturn 值為false時，無法提交。表單驗證的實質：一開始設定為false，只有當所有驗證都通過之後，才把它的值改為true，這樣才能提交表單。程式碼如下：
<form action="" method="post" onsubmit="return checkForm()"> //checkForm虛擬碼形式 function checkForm(){ if('所有驗證通過'){ return true; }else{ return false; } }
2. onfocus事件（點選輸入框時觸發）: 常用於使用者點選輸入框時清空輸入框的內容，並且改變輸入框的樣式，讓使用者清晰的看到當前正在哪一個輸入框中進行輸入。
3. onblur事件實在輸入框中的內容完成之後，滑鼠離開是這個輸入框時觸發的事件。常利用這個事件來進行一系列驗證，看使用者的輸入是否符合要求。
二。網頁表單驗證例項
<!DOCTYPE html> <html lang='zh-CN'> <head> <title>註冊驗證</title> <meta charset='utf-8'> <script src='myAjax.js'></script> </head> <body> <form action='http://127.0.0.1:3000/reqRes' method='post' onsubmit='return checkForm()'> 使用者名稱：<input type='text' name='username'><span></span><br><br> 密 碼：<input type='password' name='pass'><span></span><br><br> 確認密碼：<input type='password' name='repass'><span></span><br><br> 郵 箱：<input type='text' name='email' ><span></span><br><br> 手 機：<input type='text' name='phone' ><span></span><br><br> <input type='submit' value='提交' name=''> <input type='reset' value='重寫' name=''> </form> </body> <script> //定義標誌，所有標誌為1才能提交註冊 var flag_user = flag_pass = flag_repass = flag_email = flag_phone = 0; //獲取所有input節點 var inputs = document.getElementsByTagName('input'); console.log(inputs); //獲取所有的span標籤,用於給出提示資訊 var spans = document.getElementsByTagName('span'); //遍歷input節點，給不同的input的繫結不同的事件 for(var i = 0; i < inputs.length; i++){ if(inputs[i].name == 'username'){ // 匹配到使用者名稱，進行驗證 var index_u = i; //儲存i的值，作為下標 //繫結獲得焦點事件，獲得焦點清空輸入框 inputs[index_u].onfocus = function(){ //獲取焦點事件提示使用者輸入正確格式 spans[index_u].innerHTML = '使用者名稱為6-16為英文、數字和下劃線組成'; this.value = ''; // 清空輸入框 } //繫結失去焦點事件，失去焦點進行驗證 inputs[index_u].onblur = function(){ //失去焦點先進行使用者名稱的格式驗證， //符合要求才傳送Ajax到伺服器驗證是否存在 var reg = /^[a-zA-Z\d_]\w{6,16}$/;//正則表示式 if(reg.test(this.value)){ //驗證成功，Ajax遠端請求伺服器進行使用者名稱驗證 Ajax('json',false).post('http://127.0.0.1:3000/checkReg',{username:this.value},function(data){ //判斷結果，執行不同的操作 if(data.flag == 0){ //該使用者不存在於資料庫，可以註冊 flag_user = 1; spans[index_u].innerHTML = data.message; }else{ flag_user = 0; spans[index_u].innerHTML = data.message; } }); }else{ //驗證失敗，提示使用者 spans[index_u].innerHTML = '使用者名稱格式不正確'; //提示使用者 } } } else if(inputs[i].name == 'pass'){//密碼只進行格式驗證 var index_p = i; var reg_p = /^[a-zA-Z\d]{6,16}$/; //正則匹配 //繫結獲得焦點事件，獲取焦點清空輸入框 inputs[index_p].onfocus = function(){ //獲得焦點事件提示使用者輸入正確格式 spans[index_p].innerHTML = '密碼為6-16為英文、數字組成'; //清空輸入框的值; this.value = ''; }; //失去焦點事件,失去焦點 inputs[index_p].onblur = function(){ if(reg_p.test(this.value)){ flag_pass = 1; spans[index_p].innerHTML = '密碼格式正確'; }else{ flag_pass = 0; spans[index_p].innerHTML = '密碼格式不正確'; } } } else if(inputs[i].name == 'repass'){ var index_r = i; //繫結獲得焦點事件，獲取焦點清空輸入框 inputs[index_r].onfocus = function(){ //獲得焦點事件提示使用者輸入正確格式 spans[index_r].innerHTML = '請輸入重複密碼進行比對'; //清空輸入框的值; this.value = ''; }; //失去焦點事件,失去焦點 inputs[index_r].onblur = function(){ if(inputs[index_p].value == inputs[index_r].value){ flag_repass = 1; spans[index_r].innerHTML = '重複密碼正確'; }else{ flag_repass = 0; spans[index_r].innerHTML = '密碼不一致'; } } } else if(inputs[i].name == 'email'){ var index_e = i; //正則驗證郵箱 var reg_e = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //繫結獲得焦點事件，獲取焦點清空輸入框 inputs[index_e].onfocus = function(){ //獲得焦點事件提示使用者輸入正確格式 spans[index_e].innerHTML = '請輸入正確的郵箱格式'; //清空輸入框的值; this.value = ''; }; //失去焦點事件,失去焦點 inputs[index_e].onblur = function(){ if(reg_e.test(this.value)){ flag_email = 1; spans[index_e].innerHTML = '郵箱格式正確'; }else{ flag_email = 0; spans[index_e].innerHTML = '郵箱格式不正確'; } } } else if(inputs[i].name == 'phone'){ var index_ph = i; //正則驗證 var reg_ph = /^1[3|4|5|8]\d{9}$/; //繫結獲得焦點事件，獲取焦點清空輸入框 inputs[index_ph].onfocus = function(){ //獲得焦點事件提示使用者輸入正確格式 spans[index_ph].innerHTML = '請輸入正確的手機號'; //清空輸入框的值; this.value = ''; }; //失去焦點事件,失去焦點 inputs[index_ph].onblur = function(){ if(reg_ph.test(this.value)){ flag_phone = 1; spans[index_ph].innerHTML = '手機格式正確'; }else{ flag_phone = 0; spans[index_ph].innerHTML = '手機格式不正確'; } } } } //當所有的表單都驗證通過了之後才能提交發送 function checkForm(){ if(flag_user == 1 && flag_pass == 1 && flag_repass == 1 && flag_email == 1 && flag_phone == 1 ){ //所有驗證都通過返回true，允許表單提交 return true; }else{ //條件不通過返回false,阻止表單提交 return false; } } </script> </html>
下面是另外一個表單驗證的例項，使用了一丟丟的VUE的知識
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>js表單驗證</title>
<style type="text/css">
body,
div,
h2,
p,
input,
span,
label {
margin: 0px;
padding: 0px;
}
.head {
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px #ccc solid;
text-align: center;
}
h2 {
line-height: 60px
}
.content {
width: 900px;
margin: 30px auto;
border: 1px solid #ccc;
}
#sub_content {
padding: 10px;
width: 800px;
margin: 1px auto;
}
#sub_content label {
display: inline-block;
width: 100px;
height: 32px;
line-height: 32px;
color: #666;
text-align: right;
}
#sub_content .userName {
width: 200px;
height: 25px;
line-height: 25px;
border: 1px solid #CCC;
}
.choose .default,
#sub_content .default {
width: 200px;
height: 32px;
line-height: 32px;
color: #999;
font-size: 13px;
}
.choose {
padding: 10px;
width: 800px;
margin: 1px auto;
}
.choose label {
display: inline-block;
width: 100px;
height: 32px;
line-height: 32px;
color: #666;
text-align: right;
}
.choose .specil {
display: inline-block;
width: 50px;
height: 32px;
line-height: 32px;
color: #666;
text-align: left
}
#sub_content .error {
height: 32px;
line-height: 32px;
color: #F00;
font-size: 13px;
}
#sub_content .success {
height: 32px;
line-height: 32px;
color: #096;
}
.divBtn {
margin-top: 20px;
margin-left: 200px;
width: 100px;
height: 32px;
line-height: 32px;
background-color: #F93;
margin-bottom: 10px;
color: #ffffff;
font-weight: bold;
border: none;
}
</style>
</head>
<body>
<div>
<div class="head">
<h2>新使用者註冊</h1>
</div>
<div class="content">
<form action="#" id="myform" method="POST">
<div id="sub_content">
<label for="userName">使用者名稱：</label>
<input type="text" id="userName" name="BasicInformation" class="userName" onBlur="checkUserName()" oninput="checkUserName()" maxlength="20"
required>
<span class="default" id="nameErr">請輸入至少3位的使用者名稱</span>
</div>
<div id="sub_content">
<label for="userPasword">密碼：</label>
<input type="password" id="userPasword" name="BasicInformation" class="userName" onBlur="checkPassword()" oninput="checkPassword()" maxlength="11"
required>
<span class="default" id="passwordErr">請輸入6到11位的密碼</span>
</div>
<div id="sub_content">
<label for="userConfirmPasword">確認密碼：</label>
<input type="password" id="userConfirmPasword" class="userName" onBlur="ConfirmPassword()" oninput="ConfirmPassword()" required>
<span class="default" id="conPasswordErr">請再輸入一遍密碼</span>
</div>
<div id="sub_content">
<label for="userEmali">電子郵箱：</label>
<input type="text" id="userEmail" name="BasicInformation" class="userName" onBlur="checkEmail()" oninput="checkEmail()">
<span class="default" id="EmailErr">請輸入正確的郵箱號碼</span>
</div>
<div class="choose" id="specil">
<label for="userIden">您的身份：</label>
<input type="radio" id="student" class="userName" value="學生" name="identity" v-model="iden">
<label for="student" class="specil">學生</label>
<input type="radio" id="teacher" class="userName" value="老師" name="identity" v-model="iden">
<label for="teacher" class="specil">老師</label>
<input type="radio" id="parent" class="userName" value="家長" name="identity" v-model="iden">
<label for="parent" class="specil">家長</label>
<input type="radio" id="others" class="userName" value="其他" name="identity" v-model="iden">
<label for="others" class="specil">其他</label>
<span class="default">您選擇的是: {{iden}}</span>
</div>
<div class="choose" id="specil2">
<label for="userHobby">您的愛好：</label>
<input type="checkbox" id="bb" class="userName" value="籃球" name="hobby" v-model="hobby">
<label for="bb" class="specil">籃球</label>
<input type="checkbox" id="fb" class="userName" value="足球" name="hobby" v-model="hobby">
<label for="fb" class="specil">足球</label>
<input type="checkbox" id="pp" class="userName" value="攝影" name="hobby" v-model="hobby">
<label for="pp" class="specil">攝影</label>
<input type="checkbox" id="others2" class="userName" value="其他" name="hobby" v-model="hobby">
<label for="others2" class="specil">其他</label>
<span class="default">您的愛好有: {{hobby}}</span>
</div>
<div id="sub_content">
<label for="userPhone">手機號碼：</label>
<input type="text" id="userPhone" name="BasicInformation" class="userName" onBlur="checkPhone()" oninput="checkPhone()" required maxlength="11">
<span class="default" id="phoneErr">請輸入11位手機號碼</span>
</div>
<div>
<button type="submit" class="divBtn" id="btn">註冊</button>
</div>
</form>
</div>
</div>
<div>
<button id="btn2">show data</button>
<div id="show">
</div>
</div>
<script type="text/javascript">
var iden = new Vue({
el: '#specil',
data: {
iden: "學生",
}
})
var hob = new Vue({
el: '#specil2',
data: {
hobby: []
}
})
var form = document.getElementById('myform');
var oBtn = document.getElementById('btn');
function checkForm() {
var nametip = checkUserName();
var passtip = checkPassword();
var conpasstip = ConfirmPassword();
var phonetip = checkPhone();
var Emailtip = checkEmail();
return nametip && passtip && conpasstip && phonetip && Emailtip;
}
function checkUserName() {
var userName = document.getElementById('userName');
var errorName = document.getElementById('nameErr');
if (userName.value.length == 0) {
errorName.innerHTML = "使用者名稱不能為空！";
errorName.className = "error";
return false;
} else if (userName.value.length < 3) {
errorName.innerHTML = "使用者名稱不合規範";
errorName.className = "error";
return false;
} else {
errorName.innerHTML = "√";
errorName.className = "success";
return true;
}
}
function checkPassword() {
var userPass = document.getElementById('userPasword');
var errorPass = document.getElementById('passwordErr');
var re = /^\w{6,11}$/
if (!re.test(userPass.value)) {
errorPass.innerHTML = "密碼不合規範";
errorPass.className = "error";
return false;
} else {
errorPass.innerHTML = "√";
errorPass.className = "success";
return true;
}
}
function ConfirmPassword() {
var userpasswd = document.getElementById('userPasword');
var userConPassword = document.getElementById('userConfirmPasword');
var errConPasswd = document.getElementById('conPasswordErr');
if ((userpasswd.value) != (userConPassword.value) || userConPassword.value.length == 0) {
errConPasswd.innerHTML = "上下密碼不一致"
errConPasswd.className = "error";
return false;
} else {
errConPasswd.innerHTML = "√"
errConPasswd.className = "success";
return true;
}
}
function checkEmail() {
var userEmali = document.getElementById('userEmail');
var EmailErr = document.getElementById('EmailErr');
var re = /\[email protected][a-z0-9]+\.[a-z]+/i;
if (!re.test(userEmali.value)) {
EmailErr.innerHTML = "郵箱格式錯誤"
EmailErr.className = "error";
return false;
} else {
EmailErr.innerHTML = "√"
EmailErr.className = "success";
return true;
}
}
function checkPhone() {
var userphone = document.getElementById('userPhone');
var phonrErr = document.getElementById('phoneErr');
var re = /^1[34578]\d{9}$/; //驗證手機號正則表示式
if (!re.test(userphone.value)) {
phonrErr.innerHTML = "手機號碼不合規範"
phonrErr.className = "error"
return false;
} else {
phonrErr.innerHTML = "√"
phonrErr.className = "success";
return true;
}
}
var show = document.getElementById("show");
var oBtn2 = document.getElementById("btn2");
var elements = new Array();
var iden = new Array();
var hob = new Array();
var BasicInformation = form.elements["BasicInformation"];
var oIden = form.elements["identity"];
var oHob = form.elements["hobby"];
function Xulie()
{
var data = {
使用者名稱: elements[0],
密碼: elements[1],
身份: iden,
愛好: hob,
Email: elements[2],
tel: elements[3]
}
str = JSON.stringify(data);
}
oBtn2.onclick = function () {
for (var j = 0; j < BasicInformation.length; j++) {
elements.push(BasicInformation[j].value);
}
for (var j = 0; j < oIden.length; j++) {
if (oIden[j].checked)
iden.push(oIden[j].value);
}
for (var j = 0; j < oHob.length; j++) {
if (oHob[j].checked)
hob.push(oHob[j].value);
}
Xulie();
show.innerHTML = str;
console.log(str)
}
btn.onclick = function () {
if (checkForm() == false) {
form.setAttribute("onsubmit", "return false")
}
if (checkForm() == true)
{
form.setAttribute("onsubmit", "return true");
Xulie();
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 瀏覽器執行程式碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "str.json", true);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
}
</script>
</body>
</html>相關推薦
Ajax應用之——表單驗證
1.關於表單驗證：一般有兩種驗證方法：客戶端的(通過JavaScript)；伺服器端的;a)原來客戶端JavaScript的缺點是：所有資料及邏輯操作完全在客戶端，因此要涉及到伺服器端的資料問題時，都需要最後點選按鈕，到伺服器端進行讀取驗證。現在改進的方法，Ajax實現更友好
AJAX應用之表單驗證
一。表單常用事件 有三個，onsubmit（表單提交）事件，onfocus（獲得焦點）事件，onblur（失去焦點）事件。 1. onsubmit事件作用：組織或者允許表單的提交。 <form action="" method="post" o
easyui 之表單驗證
pla focus res default code font led disable function 1 /** 2 * 擴展easyui的validator插件rules，支持更多類型驗證 3 */ 4 $.extend($.fn.val
SpringBoot之表單驗證@Valid
BE index ror ner HR 大小 doctype implement 空格 SpringBoot提供了強大的表單驗證功能實現，給我們省去了寫驗證的麻煩； 這裏我們給下實例，提交一個有姓名和年齡的表單添加功能， 要求姓名不能為空，年齡必須是不小於18 ； 我們先新
.net學習之表單驗證validator
表單驗證是很常見的，一般除了前端需要驗證資料是否為空，還需要驗證資料格式是否符合要求，一般使用正則表示式驗證，當然，除了前端，後端一般也需要將資料進行驗證，比如客戶端（瀏覽器）將js等前端指令碼禁用，點選提交，那麼不符合規範的資料就會提交到後臺，這回導致系統出現問題。 .net中
JQUERY之表單驗證案例
<!-- 需求： 使用者註冊頁面要有使用者名稱、密碼、確認密碼、郵箱 使用者名稱文字框：使用者名稱不能為空，且必須為數字與字母的6到12位的組合 密碼框：密碼不能為空，六到八位數字或字母的組合 確認密碼框：確認密碼不能為空，六到八位數字或字母
springboot+thymeleaf之表單驗證
本篇講述在spring boot框架中使用thymeleaf庫實現表單提交。 1 新建thymeleaf工程 使用IDEA的spring initialize嚮導新建spring boot工程，選擇庫web和thymeleaf，這樣生成的工程中的pom.xml中包含web
微信小程式之表單驗證
表單驗證 何為表單驗證呢？ 百度百科給出的回答是這樣的： 表單驗證是javascript中的高階選項之一。JavaScript 可用來在資料被送往伺服器前對 HTML 表單中的這些輸入資料進行驗證 [1] 。 被 Jav
PHP表單之表單驗證
一、表單安全 1、htmlspecialchars()函式 把特殊字元轉換為 HTML 實體。這意味著 < 和 > 之類的 HTML 字元會被替換為 < 和 > 。這樣可防止攻擊者通過在表單中注入 HTML 或 J
Springboot之表單驗證
實體類 @TableName("lh_admin") public class Admin extends Model<Admin> { private static final long serialVersionUID = 1L; /**
SpringBoot系列（六）SpringBoot 之表單驗證
本系列部落格將學習開發SpringBoot，快速開發專案 SpringBoot系列 (六)：SpringBoot 之表單驗證 文件結構 SpringBoot 之表單驗證@Valid示例
微信小程式開發之表單驗證（WxValidate使用）
微信小程式的開發框架個人感覺大體上跟VUE是差不多的，但是他的表單元件沒有自帶的驗證功能，因此開發小程式的表單驗證時候一般有兩種方法，一是自己裸寫驗證規則，但是需要比較紮實的正則表示式基礎，一種是利用官方社群開發的WxValidate外掛進行表單驗證。 WxValidat
Laravel摘記之表單驗證
表單驗證 表單驗證是為了防止訪問者跳過客戶端驗證而造成的系統安全問題，一但非法使用者繞過客戶端驗證而伺服器端沒有加以驗證，這樣就是很不安全了，所以專案必須要進行伺服器端表單驗證。 Laravel 提供了多種不同的驗證方法來對應用程式傳入的資料進行驗證。
[js筆記] focus和blur事件之表單驗證
focus 當一個元素獲得焦點時，這個DOM節點會觸發focus事件 blur 當一個元素失去焦點時，這個DOM節點會觸發blur事件 <!DOCTYPE html PU
JSP應用的自我理解之三：JSP+Servlet實現表單驗證
示例說明：通過一個表單提交頁面提交給Servlet，Servlet獲取資訊，經過處理後，將資訊存入request物件中，如果使用者提交姓名為空，將重新返回登入首頁，否則，把提交的資訊全部顯示出來 下面具體實現了~~ 1、新建一個Dynamic WEB工程，名為formtt
表單驗證之正則表達式
cti 信用卡 for 整除 develop 虛擬 accep das 一位 1. 手機號驗證 經網絡查詢可知，中國三大運營商號碼波段主要有： (1). 移動號段： 134 135 136 137 138 139 147 150 151 152 157 158
前端編程提高之旅（十）----表單驗證插件與cookie插件
turn require 屬性 單選 method str 使用 art 存儲 實際項目開發中與用戶交互的常見手法就是採用表單的形式。取得用戶註冊、登錄等信息。而當用戶註冊或登錄後又須要記住用戶的登錄狀態。這就涉及到經常使用的兩個操作：表單驗證與cookie
jQuery之Validation表單驗證插件使用
urn html .org utf span con require input 詳情 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met
（十二）easyUI之表單和驗證完成登錄頁面
() 成功 options 表單提交 odi 1-1 java ima 1.4 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
php之表單-2（表單驗證）
eth left cit span dem 讓我 但是 cape ren PHP 表單驗證 本章節我們將介紹如何使用PHP驗證客戶端提交的表單數據。 PHP 表單驗證 在處理PHP表單時我們需要考慮安全性。 本章節我們將展示PHP表單數據安全處理