js表單驗證正則表達式實例教程,jquery正則表達式驗證

本文目錄一覽：

• 1、javascript 怎麼實現即時驗證表單信息
• 2、js 正則表達式提取某一段字符
• 3、JavaScript用正則表達式驗證表單怎麼寫
• 4、JS正則表達式完整教程
• 5、正則表達式 「函數封裝案例直接拿來用」

javascript 怎麼實現即時驗證表單信息

javascript 實現即時驗證表單信息二種方法:

第一種方式：表單提交，在form標籤中增加onsubmit事件來判斷表單提交是否成功

script type=”text/javascript”

function validate(obj) {

if (confirm(“提交表單?”)) {

alert(obj.value);

return true;

} else {

alert(obj.value);

return false;

}

}

/script

body

form action=”” onsubmit=”return validate(document.getElementByIdx_x(‘myText’));” !—參數的這種寫法注意下–

input type=”text” id=”myText”/

input type=”submit” value=”submit”/

/form

/body

第二種方式：通過button按鈕來觸發表單提交事件onclick=”submitForm();”，會忽略掉其他標籤中的屬性，比如form標籤中的onsubmit屬性就失效了。這時為了進行表單驗證，可以將驗證代碼放在submitForm();方法中進行驗證。

script type=”text/javascript”

function validate() {

if (confirm(“提交表單?”)) {

return true;

} else {

return false;

}

}

function submitForm() {

if (validate()) {

document.getElementByIdx_x(“myForm”).submit();

}

}

/script

body

form action=”” id=”myForm”

input type=”text”/

input type=”button” value=”submitBtn” onclick=”submitForm();”/ !—也可以使用document.getElementByIdx_x(「該按鈕的id」).click();來執行onclick事件–

/form

/body

js 正則表達式提取某一段字符

var str = “BEGIN CONST a,b=10,c END IF a10  (a+c20 || bc) THEN RETURN true END ELSE RETURN false END END END”;

str=str.replace(/\s/g,””);//取掉空格

str=str.match(/IF(\S*)THEN/)[1];//正則取出IF和THEN之間的字符串

str=str.split(“”);//按照分組

var str_end=str[0].split(”); //按照分組

alert(str_end);//最終結果為str_end[0]=a  str_end[1]=10 ;

JavaScript用正則表達式驗證表單怎麼寫

驗證表單的不同內容用的是不同的正則表達式。常用的正則表達式如下：”^-?[1-9]\\d*$”, //整數

“^[1-9]\\d*$”, //正整數

“^-[1-9]\\d*$”, //負整數

“^([+-]?)\\d*\\.?\\d+$”, //數字

“^[1-9]\\d*|0$”, //正數（正整數 + 0）

“^-[1-9]\\d*|0$”, //負數（負整數 + 0）

“^([+-]?)\\d*\\.\\d+$”, //浮點數

“^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$”, //正浮點數

“^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$”,　 //負浮點數

“^-?([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0)$”,　 //浮點數

“^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0$”, //非負浮點數（正浮點數 + 0）

“^(-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*))|0?.0+|0$”,//非正浮點數（負浮點數 + 0）

“^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$”, //郵件

“^[a-fA-F0-9]{6}$”, //顏色

“^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%=]*)?$”, //url

“^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$”, //僅中文

“^[\\x00-\\xFF]+$”, //僅ACSII字符

“^\\d{6}$”, //郵編

“^(13|15|18)[0-9]{9}$”, //手機

“^(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)$”, //ip地址

“^\\S+$”, //非空

“(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$”, //圖片

“(.*)\\.(rar|zip|7zip|tgz)$”, //壓縮文件

“^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$”, //日期

“^[1-9]*[1-9][0-9]*$”, //QQ號碼

“^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$”, //電話號碼的函數(包括驗證國內區號,國際區號,分機號)

“^\\w+$”, //用來用戶註冊。匹配由數字、26個英文字母或者下劃線組成的字符串

“^[A-Za-z]+$”, //字母

“^[A-Z]+$”, //大寫字母

“^[a-z]+$”, //小寫字母

“^[1-9]([0-9]{14}|[0-9]{17})$” //身份證 如下是一個簡單的實例：function chkNum(obj){

var val = obj.value;

if(val!=””){

if(!(/^[0-9]{1,20}$/.exec(val))){

obj.value=””;

alert(“請輸入有效數字!”);

obj.focus();

}

}

}

JS正則表達式完整教程

親愛的讀者朋友，如果你點開了這篇文章，說明你對正則很感興趣。

想必你也了解的重要性，在我看來正則表達式是衡量程序員水平的一個標準。

關於正則表達式的教程，網上也有很多，相信你也看了一些。

與之不同的是，本文的目的是希望所有認真讀完的童鞋們，都有實質性的提高。

本文共有七章，用JavaScript語言完整地討論了的方方面面。

如果覺得文章某塊兒沒有說明白清楚，歡迎留言，能力範圍之內，老姚必做詳細解答。

構造的方法和創建數學表達式的方法一樣。也就是用多種元字符與運算符可以將小的表達式結合在一起來創建更大的表達式。正則表達式的組件可以是單個的字符、字符集合、字符範圍、字符間的選擇或者所有這些組件的任意組合。

正則表達式是由普通字符（例如字符 a 到 z）以及特殊字符（稱為”元字符”）組成的文字模式。模式描述在搜索文本時要匹配的一個或多個字符串。正則表達式作為一個模板，將某個字符模式與所搜索的字符串進行匹配。

正則表達式 「函數封裝案例直接拿來用」

什麼是正則表達式

我們平時打 遊戲 需要先註冊賬號，註冊不是隨意的，而是按照一定的規則，否則就無法註冊成功。那麼這個規則的判斷就是通過正則表達式來判斷的。

其他語言也會使用正則表達式，我們現在主要是利用JavaScript 正則表達式完成表單驗證。

知道了什麼是正則表達式，那麼聊聊如何使用：

正則表達式在js中的使用

正則表達式的創建（兩種方式）：

方式一：通過調用RegExp對象的構造函數創建

方式二：利用字面量創建 正則表達式【 重點記憶，常用 】

test() 是測試正則對象方法，用於檢測字符串是否符合該規則，該對象會返回 true 或 false，他的參數是需要測試的字符串。

正則表達式中的特殊字符

正則表達式的組成

定義： 一個正則表達式可以由簡單的字符構成，比如 /abc/，也可以是簡單和特殊字符的組合，比如 /ab*c/ 。其中特殊字符也被稱為元字符，在正則表達式中是具有特殊意義的專用符號，如 ^ 、$ 、+ 等。

邊界符

有兩個 ^ 和 $ : ^代表必須以某個字符串開頭；$代表必須以某個字符串結尾；

舉個栗子：理解一下^和$的用法：

[] 方括號 ：表示有一系列字符可供選擇，只要匹配其中一個就可以了；

舉個栗子：

量詞符用來設定某個模式出現的次數。

接下來就可以寫案例了：

功能需求:

1.如果用戶名輸入合法, 則後面提示信息為: 用戶名合法,並且顏色為綠色

2.如果用戶名輸入不合法, 則後面提示信息為: 用戶名不符合規範, 並且顏色為紅色

分析:

1.用戶名只能為英文字母,數字,下劃線或者短橫線組成, 並且用戶名長度為6~16位.

2.首先準備好這種正則表達式模式/$[a-zA-Z0-9-_]{6,16}^/

3.當表單失去焦點就開始驗證.

4.如果符合正則規範, 則讓後面的span標籤添加 right類.

5.如果不符合正則規範, 則讓後面的span標籤添加 wrong類.

CSS：

HTML JS：

1.大括號 量詞符. 裏面表示重複次數

2.中括號 字符集合。匹配方括號中的任意字符.

3.小括號表示優先級【有小括號的先算】

預定義類指的是某些常見模式的簡寫方式.

表單驗證案例:

replace() 方法可以實現替換字符串操作，用來替換的參數可以是一個字符串或是一個正則表達式。

replace第一個參數正則後跟 i g gi分別代表什麼？ 看案例：

案例: 過濾敏感詞彙

tips: 定義正則就用字面量的形式定義，正則表達式也不用自己寫，可以直接在網上找到，找到以後按需求改即可，另外在過濾敏感詞中，特別注意 i（不區分大小寫） g（全局中查找） gi（不區分，而且全局中查找）的用法；