正則表示式和表單驗證
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;font-family: "微軟雅黑";}
.conter{
width: 800px;
margin: auto;
}
.conter p{
font-size: 25px;
font-family: "微軟雅黑";
color: #398439;
font-weight: bold;
}
.conter input{
width: 500px;
height: 50px;
margin: 10px;
padding-left: 10px;
font-size: 14px;
font-family: "微軟雅黑";
outline: none;
border-radius: 3px;
border: 1px solid #CCCCCC;
}
#submit{
background-color: #66AFE9;
font-size: 22px;
font-weight: bold;
color: #EEEEEE;
width: 511px;
height: 50px;
}
#submit:hover{
background-color: #2B669A;
}
.nicknameTips{
display: none;
}
.nicknameTips img{
margin-right: 6px;
margin-left: 10px;
}
.nicknameTips span{
font-size: 14px;
}
.passwordTips{
display: none;
}
.passwordTips img{
margin-right: 6px;
margin-left: 10px;
}
.passwordTips span{
font-size: 14px;
}
.upasswordTips{
display: none;
}
.upasswordTips img{
margin-right: 6px;
margin-left: 10px;
}
.upasswordTips span{
font-size: 14px;
}
.phoneTips{
display: none;
}
.phoneTips img{
margin-right: 6px;
margin-left: 10px;
}
.phoneTips span{
font-size: 14px;
}
.title{
margin-right: 6px;
margin-left: 10px;
font-size: 14px;
color: #000000;
}
</style>
</head>
<body>
<div class="conter">
<p>QQ註冊</p>
<form action="模態框.html" onsubmit="return checkSubmit()">
<div>
<input type="text" placeholder="暱稱" id="nickname"/>
<div class="nicknameTips" id="nicknameTips">
<div>
<img src="img/error.png" align="center" /><span>暱稱不能為空</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="密碼" id="password"/>
<div class="passwordTips" id="passwordTips">
<div>
<img id="space" src="img/green.png" align="center"/><span>不能包含空格</span>
</div>
<div>
<img id="length" src="img/info.png" align="center" /><span>長度在8~16之間</span>
</div>
<div>
<img id="content" src="img/info.png" align="center" /><span>必須包含數字、字母、符號中的其中兩個</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="確認密碼" id="upassword"/>
<div class="upasswordTips" id="upasswordTips">
<div>
<img src="img/error.png" align="center" /><span>兩次輸入的密碼不相同</span>
</div>
</div>
</div>
<div>
<input type="text" placeholder="手機號碼" id="phone"/>
<div class="phoneTips" id="phoneTips">
<div>
<img id="phoneImg" src="img/error.png" align="center" /><span>長度為11位的有效手機號碼</span>
</div>
</div>
</div>
<div>
<input type="submit" id="submit" value="立即註冊"/>
</div>
<div>
<img src="img/checkbox_check.png" id="checkbox" align="center" checked="true" /><span class="title" id="tit">我已閱讀並同意相關規定和隱私協議</span>
</div>
</form>
</div>
<script>
window.onload=function(){
//給多選框img定義點選事件
var checkbox=document.getElementById("checkbox");
checkbox.onclick=function(){
//獲取圖片中的自定義屬性的
var checked=this.getAttribute("checked");
if (checked=="true") {
this.src="img/checkbox_normal.png";
this.setAttribute("checked","false");
document.getElementById("tit").style.color="#000000";
} else{
this.src="img/checkbox_check.png";
this.setAttribute("checked","true");
document.getElementById("tit").style.color="#9D9D9D";
}
}
//給暱稱註冊獲取焦點事件
var nickname=document.getElementById("nickname");
nickname.onfocus=function(){
this.style.borderColor="#6495ED";
document.getElementById("nicknameTips").style.display="none";
}
//給暱稱註冊失去焦點事件
nickname.onblur=nicknamecheck;
//給密碼註冊獲取焦點事件
var password=document.getElementById("password");
password.onfocus=function(){
this.style.borderColor="#6495ED";
document.getElementById("passwordTips").style.display="block";
}
//給密碼註冊失去焦點事件
password.onblur=function(){
//呼叫驗證密碼的方法
var result=checkpassword();
if (result==true) {
this.style.borderColor="green";
document.getElementById("passwordTips").style.display="none";
} else{
this.style.borderColor="red";
}
}
//給確認密碼註冊獲得焦點事件
var upassword=document.getElementById("upassword");
upassword.onfocus=function(){
this.style.borderColor="#6495ED";
document.getElementById("upasswordTips").style.display="none";
}
//給確認密碼註冊失去焦點事件
upassword.onblur=upasswordcheck;
//給手機註冊獲得焦點事件
var phone=document.getElementById("phone");
phone.onfocus=function(){
this.style.borderColor="#6495ED";
document.getElementById("phoneTips").style.display="none";
}
//給手機註冊失去焦點事件
phone.onblur=function(){
var result=checkphone();
if (result==true) {
this.style.borderColor="green";
document.getElementById("phoneTips").style.display="none";
} else{
this.style.borderColor="red";
document.getElementById("phoneTips").style.display="block";
}
}
}
//檢測使用者名稱是否合法的函式
function nicknamecheck(){
var value=document.getElementById("nickname").value;
if (value=="") {
document.getElementById("nickname").style.borderColor="red";
document.getElementById("nicknameTips").style.display="block";
return false;
} else{
document.getElementById("nickname").style.borderColor="green";
document.getElementById("nicknameTips").style.display="none";
return true;
}
}
//檢測確認密碼與密碼是否相同的函式
function upasswordcheck(){
var pwdv=document.getElementById("password").value;
var upwdv=document.getElementById("upassword").value;
if (pwdv==upwdv) {
document.getElementById("upassword").style.borderColor="green";
document.getElementById("upasswordTips").style.display="none";
return true;
} else{
document.getElementById("upassword").style.borderColor="red";
document.getElementById("upasswordTips").style.display="block";
return false;
}
}
//密碼框輸入內容發生改變時 觸發的函式,有任何一個條件不滿足則返回false,如果所有的條件都滿足返回true
function checkpassword(){
var password=document.getElementById("password");
var b=true;
var value=password.value;
//使用正則表示式判斷密碼的合法性
var numReg = /[0-9]{1,}/;
var lettReg = /[a-zA-Z]{1,}/;
var codeReg = new RegExp("[`
var spaceReg = /\s{1,}/;
if (spaceReg.test(value)) {
document.getElementById("space").src="img/info.png";
b=false;
} else{
document.getElementById("space").src="img/green.png";
}
if (value.length>=8&&value.length<=16) {
document.getElementById("length").src="img/green.png";
} else{
document.getElementById("length").src="img/info.png";
b=false;
}
//判斷密碼的內容必須滿足至少兩個正則表示式
if (numReg.test(value)&&lettReg.test(value)) {
document.getElementById("content").src="img/green.png";
} else if(numReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else if(lettReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else{
document.getElementById("content").src="img/info.png";
b=false;
}
return b;
}
//手機號碼輸入框的內容發生改變時,判斷手機號碼是否合法的函式,返回判斷結果
function checkphone(){
var value=document.getElementById("phone").value;
var phoneReg=/1[3,4,5,7,8]\d{9}/;
if (phoneReg.test(value)&&value.length==11) {
document.getElementById("phoneImg").src="img/green.png";
return true;
} else{
document.getElementById("phoneImg").src="img/error.png";
return false;
}
}
//定義提交表單時提交的事件
function checkSubmit(){
var nicknamecheckSub=nicknamecheck();
var checkpasswordSub=checkpassword();
var checkphoneSub=checkphone();
var upasswordcheckSub=upasswordcheck();
var checkCheckBoxResult=document.getElementById("checkbox").getAttribute("checked");
alert(checkCheckBoxResult);
if (checkCheckBoxResult=="false") {
alert("請閱讀服務協議並同意");
return false;
} else{
if (nicknamecheckSub==true&&checkpasswordSub==true&&checkphoneSub==true&&upasswordcheckSub==true) {
return true;
} else{
return false;
}
}
}
</script>
</body>
</html>
相關推薦
正則表示式和表單驗證
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:
JavaScript正則表示式與表單驗證
一.非空驗證 判斷非空 最好還是不要使用trim()方法 有的瀏覽器可能不支援 推薦使用正則表示式 判斷是否為空 // " abc "----->"abc "------>"abc"function trim (txt) { var afterText = txt.replace(/^\s*
javaScript各種正則表示式-用於表單驗證
<script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*
JavaScript（正則表示式、表單驗證、郵箱驗證、函式、HTML DOM）
正則表示式 1.定義：它是由一個字元序列形成的搜尋模式，當在文字中搜索資料時，可以用搜索模式來描述你要查詢的內容。它可以是一個簡單的字元，或一個更復雜的模式。它可用於所有文字搜尋和文字替換操作。 2.Eg：var patt = /youngamber/i
javascript中利用正則表示式實現表單驗證
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
JavaScript-運用正則表示式檢驗表單
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <style
驗證正則表示式(一)，同時驗證手機號碼和固定電話號碼
var reg=^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^0\d{2,3}-?\d{7,8}$;//正則表示式 主要實現程式碼如下： function CheckPhone(number){
java 正則驗證 數字，字母，下劃線還有漢字的正則表示式和email
Java程式碼 34555#5' [\u4E00-\u9FA50-9a-zA-Z_] eiieng_89_ ---> eiieng_89_ _';'eiieng_88&*9_ --> _';'eiieng_88&*9_ _';'eiieng_88_&*9_ -->
正則表達過濾表單隱藏元素，組裝post數據
eth 正則表達 bin cnblogs value all match curl mat <form name="form1" action="‘.$serverUrl.‘" method="post" > <input type="hidden" n
正則表示式和Object類
Java 正則表示式 Test2.java 檔案程式碼： /正則表示式 regex /*在對字串資料進行一些複雜的匹配,查詢，替換等操作時，通過正則表示式，可以方便實現字串的複雜操作 * */
20180102-正則表示式和grep
grep: Global research express pattern 根據模式搜尋文字，並將符合模式的文字行顯示出來 pattern：文字字元和正則表示式的元字元組合而成的匹配條件 grep [OPTIONS] PATTERN [FILE...] -i
正則表示式和re模組知識點彙總
"\^"：匹配字元的開始"\$"：匹配字元的結尾"[]"：字元組"[^a]"：如果在字元組中以^開頭，就是除了a不匹配，其他的都匹配"a|b"：匹配字元a或b 注意：使用或關係的時候，要把長規則放在短規則的前面"()"分組，需要對一個整體匹配規則量詞約束的，就對整體匹配規則加一個括號字串最前面加上r 就是不
day023 正則表示式和re模組
一.正則1.字元組 [a-zA-Z0-9]字元組中的 [^a] 除了字元組的2. 3. 4. 二.re模組 re.S 設定 .的換行 obj=re 1.ret=re.search(正則，content) 找到一個結果就返回 拿
正則表示式和python的re模組
0 正則表示式 0.1 常見的元字元 .: 匹配除\r\n之外的任何單個字元 *: 匹配前面的子表示式任意次(0-無窮)，例如Zz*可以匹配Z，可以匹配Zz，也可以匹配Zzzzzzzzzz +: 匹配前面的
正則表示式和異常
java和js的編寫格式不一樣，java中需要轉義，js中不需要。 正則表示式，是一個字串，由一些特殊的字元組成，特殊的字元成為正則元字元。 正則元字元 x 代表字元本身x； 單獨寫（a 表示a）。 \ 轉義字元：\ 一個\，.一個. \r\n 換行 ， \t 製表位 tab。 1.
Python學習手冊之正則表示式和元字元
在上一篇文章中，我們介紹了 Python 的資料封裝、類方法、靜態方法和屬性函式，現在我們介紹 Python 的正則表示式和元字元。檢視上一篇文章請點選：https://www.cnblogs.com/dustman/p/10019973.html 正則表示式正則表示式是一種強大的字串
使用正則表示式和json.loads,將JSON檔案中的資料轉化為pandas.DataFrame
使用正則表示式和json.loads,將JSON檔案中的資料轉化為pandas.DataFrame 說在前面 在使用Scrapy框架（爬蟲框架）爬取網頁資訊時，會定義一個ITEMS，然後通過PIPLINE將資料寫入到JSON檔案中，如果是按行寫入，則最後得到的資料就不是一個標準J
正則表示式和NFA
作為前端大佬的你，想必對於 JavaScript 的正則表示式非常熟悉了，甚至隨手就能利用正則表示式寫出一些驚世駭俗的程式碼。只是不知道你是否有和我一樣的疑惑：正則表示式是怎麼執行的呢？ 我們寫下這樣的正則表示式 (a+|b)c，然後用它來匹配字串 aacde、abcde，這是
JS正則表示式和replace二三事
引言 最近一段時間認真研究了一下正則表示式，這東西這是入門容易，越學越難，奇幻怪異的寫法，各種變數配比。之前只是用的時候在網上現找，但是沒想到，正則的水這麼深，不去深入瞭解一下，還是不行，否則寫出來的正則表示式非但不能完成任務，還有可能調入回溯陷阱，這次是搞明白了捕獲應用和
Java正則表示式 和常用正則
1匹配驗證-驗證Email是否正確 Java | 複製 1 2 3 4 5 6 7 8 9 10 11 12 13 14 public static void main(String[] ar