前端大雜燴
正則表達式
function GetURLval(url) {
var vars ={},
hash;
if(!url) url = window.location.href;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars[hash[0]]=decodeURIComponent(hash[1]);
}
return vars;
}
console.log(GetURLval());
console.log(GetURLval('?a=111&b=222&c=李四'));
function isString(str){
if(Object.prototype.toString.call(str) === "[object String]"){
console.log("是字符串");
return true;
}else{
console.log("不是字符串");
return false;
}
}
// e.g.: http://domain.com/path/to/picture.jpg?size=1280×960 -> picture.jpg
function getImageName(url) {
return isString(url) ? url.replace(/^.*\//, '').replace(/[\?&#].*$/, '') : '';
}
經常使用URL參數操做方法：
獲取單個參數
/**
* [getParam ]
* @param {String} name
* @param {String} url [default:location.href]
* @return {String|Boolean}
*/
function getParam(name, url) {
if(typeof name !== 'string') return false;
if (!url) url = window.location.href;
// 當遇到name[xx]時，對方括號作一下轉義爲 name\[xxx\]，由於下面還須要使用name作正則
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
var results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
getParam('query','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "hello"
設置單個參數
/**
* [setParam 設置單個參數]
* @param {String} name
* @param {String|Number} val
* @return {String|Boolean}
*/
function setParam(name, val, url) {
if(typeof name !== 'string') return false;
if (!url) url = window.location.href;
var _name = name.replace(/[\[\]]/g, '\\$&');
var value = name + '=' + encodeURIComponent(val);
var regex = new RegExp(_name + '=[^&]*');
var urlArr = url.split('#');
var result = '';
if(regex.exec(url)){
result = url.replace(regex, value);
}else{
result = urlArr[0]+'&'+value+ (urlArr[1] || '');
}
return result
}
setParam('query','world','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search?query=world&time=2017-11-12"
移除單個參數
/**
* [removeParam 移除單個參數]
* @param {String} name
* @param {String} url [default:location.href]
* @return {String|Boolean}
*/
function removeParam(name, url) {
if(typeof name !== 'string') return false;
if (!url) url = window.location.href;
var urlparts = url.split('?');
var prefix = encodeURIComponent(name + '=');
var pars = urlparts[1].split(/[&;]/g);
var i = 0, len = pars.length;
for (; i < len; i++) {
if (encodeURIComponent(pars[i]).lastIndexOf(prefix, 0) !== -1) {
pars.splice(i, 1);
}
}
url = urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
return url;
}
removeParam('query','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search?time=2017-11-12"
獲取多個參數
/**
* [getParams 獲取多個參數]
* @param {String} names [多個用空格分割]
* @param {String} url [default:location.href]
* @return {[String|Boolean]}
*/
function getParams(names, url) {
if(typeof name !== 'string') return false;
var names = names.split(' ');
var result = {};
var i = 0,
len = names.length;
if (names.length === 0) return false;
for (; i < len; i++) {
result[names[i]] = getParam(names[i], url);
}
return result;
}
getParams('query time','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// {query: "hello", time: "2017-11-12"}
設置多個參數
/**
* [setParams 設置多個參數]
* @param {Object} obj
* @param {String} url [default:location.href]
* @return {[String|Boolean]}
*/
function setParams(obj, url) {
var result = url || '';
if (Object.prototype.toString.call(obj) !== '[object Object]') return false;
for (var name in obj) {
result = setParam(name, obj[name], result);
}
return result;
}
setParams({a:111,b:222,query:'world'},'https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search?query=world&time=2017-11-12&a=111&b=222"
移除多個參數
/**
* [removeParams 移除多個參數]
* @param {String} names [多個用空格分割]
* @param {String} url [default:location.href]
* @return {[String|Boolean]}
*/
function removeParams(names, url) {
var result = url || '';
var names = names.split(' ');
var i = 0,
len = names.length;
if (names.length === 0) return false;
for (; i < len; i++) {
result = removeParam(names[i], result);
}
return result;
}
removeParams('query time','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search"
url hash 操做
/**
* [getHash 方法]
* @param {[String]} url [default:location.href]
* @return {[String]}
*/
function getHash(url) {
return decodeURIComponent(url ? url.substring(url.indexOf('#') + 1) : window.location.hash.substr(1));
}
/**
* [setHash 方法]
* @param {String} hash
*/
function setHash(hash) {
window.location.replace('#' + encodeURIComponent(hash));
}
/**
* [removeHash 方法]
*/
function removeHash() {
window.location.replace('#', '');
}
數字：^[0-9]*$
n位的數字：^\d{n}$
至少n位的數字：^\d{n,}$
m-n位的數字：^\d{m,n}$
零和非零開頭的數字：^(0|[1-9][0-9]*)$
非零開頭的最多帶兩位小數的數字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
帶1-2位小數的正數或負數：^(\-)?\d+(\.\d{1,2})?$
正數、負數、和小數：^(\-|\+)?\d+(\.\d+)?$
有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$
有1~3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$
非零的正整數：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的負整數：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非負整數：^\d+$ 或 ^[1-9]\d*|0$
非正整數：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非負浮點數：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮點數：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮點數：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
負浮點數：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮點數：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
2、校驗字符的表達式
漢字：^[\u4e00-\u9fa5]{0,}$
英文和數字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
長度爲3-20的全部字符：^.{3,20}$
由26個英文字母組成的字符串：^[A-Za-z]+$
由26個大寫英文字母組成的字符串：^[A-Z]+$
由26個小寫英文字母組成的字符串：^[a-z]+$
由數字和26個英文字母組成的字符串：^[A-Za-z0-9]+$
由數字、26個英文字母或者下劃線組成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、數字包括下劃線：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、數字但不包括下劃線等符號：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
能夠輸入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+ 12 禁止輸入含有~的字符：[^~\x22]+
3、特殊需求表達式
Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手機號碼：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
電話號碼(「XXX-XXXXXXX」、」XXXX-XXXXXXXX」、」XXX-XXXXXXX」、」XXX-XXXXXXXX」、」XXXXXXX」和」XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
國內電話號碼(0511-440522二、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
身份證號(15位、18位數字)：^\d{15}|\d{18}$
短身份證號碼(數字、字母x結尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
賬號是否合法(字母開頭，容許5-16字節，容許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼(以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線)：^[a-zA-Z]\w{5,17}$
強密碼(必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12個月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一個月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
錢的輸入格式：
1.有四種錢的表示形式咱們能夠接受:」10000.00」 和 「10,000.00」, 和沒有 「分」 的 「10000」 和 「10,000」：^[1-9][0-9]*$
2.這表示任意一個不以0開頭的數字,可是,這也意味着一個字符」0」不經過,因此咱們採用下面的形式：^(0|[1-9][0-9]*)$
3.一個0或者一個不以0開頭的數字.咱們還能夠容許開頭有一個負號：^(0|-?[1-9][0-9]*)$
4.這表示一個0或者一個可能爲負的開頭不爲0的數字.讓用戶以0開頭好了.把負號的也去掉,由於錢總不能是負的吧.下面咱們要加的是說明可能的小數部分：^[0-9]+(.[0-9]+)?$
5.必須說明的是,小數點後面至少應該有1位數,因此」10.」是不經過的,可是 「10」 和 「10.2」 是經過的：^[0-9]+(.[0-9]{2})?$
6.這樣咱們規定小數點後面必須有兩位,若是你認爲太苛刻了,能夠這樣：^[0-9]+(.[0-9]{1,2})?$
7.這樣就容許用戶只寫一位小數.下面咱們該考慮數字中的逗號了,咱們能夠這樣：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23 8.1到3個數字,後面跟着任意個 逗號+3個數字,逗號成爲可選,而不是必須：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
備註：這就是最終結果了,別忘了」+」能夠用」*」替代若是你以爲空字符串也能夠接受的話(奇怪,爲何?)最後,別忘了在用函數時去掉去掉那個反斜槓,通常的錯誤都在這裏
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正則表達式：[\u4e00-\u9fa5]
雙字節字符：[^\x00-\xff] (包括漢字在內，能夠用來計算字符串的長度(一個雙字節字符長度計2，ASCII字符計1))
空白行的正則表達式：\n\s*\r (能夠用來刪除空白行)
HTML標記的正則表達式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (網上流傳的版本太糟糕，上面這個也僅僅能部分，對於複雜的嵌套標記依舊無能爲力)
首尾空白字符的正則表達式：^\s*|\s*$或(^\s*)|(\s*$) (能夠用來刪除行首行尾的空白字符(包括空格、製表符、換頁符等等)，很是有用的表達式)
騰訊QQ號：[1-9][0-9]{4,} (騰訊QQ號從10000開始)
中國郵政編碼：[1-9]\d{5}(?!\d) (中國郵政編碼爲6位數字)
IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址時有用)
IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)
1 用戶名正則
//用戶名正則，4到16位（字母，數字，下劃線，減號）
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//輸出 true
console.log(uPattern.test("caibaojian"));
2 密碼強度正則
//密碼強度正則，最少6位，包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//輸出 true
console.log("=="+pPattern.test("caibaojian#"));
3 整數正則
//正整數正則
var posPattern = /^\d+$/;
//負整數正則
var negPattern = /^-\d+$/;
//整數正則
var intPattern = /^-?\d+$/;
//輸出 true
console.log(posPattern.test("42"));
//輸出 true
console.log(negPattern.test("-42"));
//輸出 true
console.log(intPattern.test("-42"));
4 數字正則
能夠是整數也能夠是浮點數
//正數正則
var posPattern = /^\d*\.?\d+$/;
//負數正則
var negPattern = /^-\d*\.?\d+$/;
//數字正則
var numPattern = /^-?\d*\.?\d+$/;
console.log(posPattern.test("42.2"));
console.log(negPattern.test("-42.2"));
console.log(numPattern.test("-42.2"));
5 Email正則
//Email正則
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//輸出 true
console.log(ePattern.test("99154507@qq.com"));
6 手機號碼正則
//手機號正則
var mPattern = /^1[34578]\d{9}$/; //http://caibaojian.com/regexp-example.html
//輸出 true
console.log(mPattern.test("15507621888"));
7 身份證號正則
//身份證號（18位）正則
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//輸出 true
console.log(cP.test("11010519880605371X"));
8 URL正則
//URL正則
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//輸出 true
console.log(urlP.test("http://caibaojian.com"));
9 IPv4地址正則
//ipv4地址正則
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//輸出 true
console.log(ipP.test("115.28.47.26"));
10 十六進制顏色正則
//RGB Hex顏色正則
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//輸出 true
console.log(cPattern.test("#b8b8b8"));
11 日期正則
//日期正則，簡單斷定,未作月份及日期的斷定
var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//輸出 true
console.log(dP1.test("2017-05-11"));
//輸出 true
console.log(dP1.test("2017-15-11"));
//日期正則，複雜斷定
var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
//輸出 true
console.log(dP2.test("2017-02-11"));
//輸出 false
console.log(dP2.test("2017-15-11"));
//輸出 false
console.log(dP2.test("2017-02-29"));
12 QQ號碼正則
//QQ號正則，5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//輸出 true
console.log(qqPattern.test("65974040"));
13 微信號正則
//微信號正則，6至20位，以字母開頭，字母，數字，減號，下劃線
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//輸出 true
console.log(wxPattern.test("caibaojian_com"));
14 車牌號正則
//車牌號正則
var cPattern = /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/;
//輸出 true
console.log(cPattern.test("粵B39006"));
15 包含中文正則
//包含中文正則
var cnPattern = /[\u4E00-\u9FA5]/;
//輸出 true
console.log(cnPattern.test("蔡寶堅"));
本文將會陸續收集前端表單中的正則驗證。
相關文章
- 1. 前端素材大雜燴
- 2. 前端問題大雜燴
- 3. 前端相關的網站大雜燴
- 4. 前端大雜燴 - 收藏集 - 掘金
- 5. 前端大雜燴之JS（二）
- 6. 大雜燴
- 7. XMPP大雜燴
- 8. js大雜燴
- 9. JBPM4 大雜燴
- 10. linux 大雜燴
- 更多相關文章...
- • PHP 雜項 函數 - PHP參考手冊
- • Docker 命令大全 - Docker教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端素材大雜燴
- 2. 前端問題大雜燴
- 3. 前端相關的網站大雜燴
- 4. 前端大雜燴 - 收藏集 - 掘金
- 5. 前端大雜燴之JS（二）
- 6. 大雜燴
- 7. XMPP大雜燴
- 8. js大雜燴
- 9. JBPM4 大雜燴
- 10. linux 大雜燴