Web前端JS校驗(yàn)解決方案

目錄:

① 方案一罐农、不借助插件方法

② 方案二涵亏、使用插件jQuery.validate

③ 附:常用正則表達(dá)式

** 方案一、不借助插件方法 **

只是提供了一個(gè)簡單的气筋、較為完整的宠默、可復(fù)用的
JS校驗(yàn)實(shí)現(xiàn)方案,插件不一定能夠覆蓋項(xiàng)目中所有需要校驗(yàn)的地方或南,這個(gè)方案只是對插件的補(bǔ)充艾君,實(shí)現(xiàn)規(guī)則也可以按照特殊需求進(jìn)行更改,較為靈活冰垄。

使用方法:(依賴
jQuery)

1虹茶、定義正則庫,如果規(guī)則較多蝴罪,可以單獨(dú)建立.js文件要门,格式:

var正則名 =  {

    “re” :正則表達(dá)式,

    “tip” : “不符合規(guī)則時(shí)提示文字”

}

如:

var re_null  =  {

    "re" : /\S/,

    "tip" : "內(nèi)容不能為空"

}

var re_name  =  {

    "re" : /[\u4e00-\u9fa5]/,

    "tip" : "姓名只允許輸入中文"

};

2欢搜、引入函數(shù)

function check(obj){
    //obj參數(shù)為對象格式,具體查看下一步
    $(“.error_span”).remove();
    var onoff=true;
    //循環(huán)參數(shù)中規(guī)定的需要校驗(yàn)的輸入框
    for(var key in obj){
        if( obj[key]["re"].test( $("."+key).val() ) ){
         //....
        }else{
            $("."+key).after("<span class='error_span' style='padding-left:10px;color:#f00;'>"+obj[key]["tip"]+"</span>")
            onoff=false;
        }
    }
    //如果循環(huán)體中正則驗(yàn)證全部通過吹埠,則onoff不變缘琅,依然是true斩个,如果有一個(gè)或多個(gè)不符合正則驯杜,則onoff變?yōu)閒alse。
    //返回布爾變量
    return onoff;       
}

3居暖、調(diào)用

check({
    "input1_class":re_null,
    "input2_class":re_name
})

參數(shù)對象中藤肢,鍵名為需要校驗(yàn)輸入框的class,值為第一步中對應(yīng)的正則變量名省骂。注意,class不要重名钞澳,或者改變check()函數(shù)中相應(yīng)寫法涨缚。

** 方案二兰吟、使用插件 jQuery.validate **

相關(guān)連接:
http://www.runoob.com/jquery/jquery-plugin-validate.html

Validate功能強(qiáng)大混蔼,使用靈活珊燎,更適用于大面積輸入的校驗(yàn)。

使用方法:

1料按、下載并引入插件

<script src="validate/jquery.validate.js"></script>

<script src="validate/additional-methods.js"></script>

<script src="validate/messages_zh.js"></script>

依次為:插件核心js卓箫、正則庫文件烹卒、中文信息提示包文件。

插件提供了幾種常見的校驗(yàn)規(guī)則逢勾,如需自定義溺拱,在正則庫文件中新添加規(guī)則即可調(diào)用。

2沐扳、

//校驗(yàn)函數(shù)
function validateFn(){
    //調(diào)用并返回該方法
    return $("#login_form").validate({
        // debug: true,
        rules: {
            //校驗(yàn)規(guī)則沪摄,對應(yīng)輸入框的name值
            user_account:{
                required : true
            },
            user_pwd:{
                required : true
            }
        },
        messages: {
            //此處不填則顯示默認(rèn)錯(cuò)誤提示纱烘,需要自定義時(shí)在此填寫
            user_account: {
                required:"用戶名或密碼不能為空"
            },
            user_pwd: {
                required:"用戶名或密碼不能為空"
            }
        }
    });
}

3擂啥、根據(jù)校驗(yàn)結(jié)果進(jìn)行下一步操作

var result = validateFn().form(); //布爾值
if( result ){
    //....
}else{
    //....
}

4啤它、說明:

  • 以上的使用方法對校驗(yàn)后續(xù)操作較為靈活变骡,還有其他使用方法,比如在form表單submit時(shí)觸發(fā)校驗(yàn)等渊胸。具體參考上方鏈接台妆。

  • 插件中還有很多自定義參數(shù)和方法接剩,比如自定義提示標(biāo)簽的類型、自定義提示標(biāo)簽的顯示位置疫稿、異步驗(yàn)證等遗座,可參考上方鏈接途蒋。

** 附錄:常用正則表達(dá)式 **
1号坡、非空:/\S/

2、手機(jī)號(hào)碼:/^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/

3筋帖、座機(jī)號(hào)碼/傳真號(hào)碼:/^(((\d{2,3}))|(\d{3}-))?((0\d{2,3})|0\d{2,3}-)?[1-9]\d{6,7}(-\d{1,4})?$/

4日麸、身份證號(hào)碼:/([1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/

5代箭、郵政編碼:/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/

6嗡综、中文:/^[\u4e00-\u9fa5]+$/

7极景、英文:/^[A-Za-z]+$/

8驾茴、車牌號(hào):/^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)A-Z]{1}[A-Z]{1}[警京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川瓊]{0,1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警港澳]{1}$/

9锈至、電子郵箱:/^(\w-.)+@(\w-?)+(.\w{2,})+$/

10、組合:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/(允許中文击碗、英文稍途、數(shù)字晰房、下劃線)

11殊者、無敵的日期驗(yàn)證验夯,格式:2017/01/01(加入閏年):/((((1[8-9]\d{2})|([2-9]\d{3}))([-/._])(10|12|0?[13578])([-/._])(3[01]|[12][0-9]|0?[1-9])$)|(((1[8-9]\d{2})|([2-9]\d{3}))([-/.])(11|0?[469])([-/.])(30|[12][0-9]|0?[1-9])$)|(((1[8-9]\d{2})|([2-9]\d{3}))([-/._])(0?2)([-/._])(2[0-8]|1[0-9]|0?[1-9])$)|(([2468][048]00)([-/.])(0?2)([-/.])(29)$)|(([3579][26]00)([-/._])(0?2)([-/._])(29)$)|(([1][89][0][48])([-/.])(0?2)([-/.])(29)$)|(([2-9][0-9][0][48])([-/._])(0?2)([-/._])(29)$)|(([1][89][2468][048])([-/.])(0?2)([-/.])(29)$)|(([2-9][0-9][2468][048])([-/._])(0?2)([-/._])(29)$)|(([1][89][13579][26])([-/.])(0?2)([-/.])(29)$)|(^([2-9][0-9][13579][26])([-/.])(0?2)([-/.])(29)$))/

12海蔽、年份:/19|20\d{2}/

13、QQ號(hào):/[1-9][0-9]{4,14}/

14党窜、年齡:
/120|((1[0-1]|\d)?\d)/

15拗引、微信號(hào):/^[a-zA-Z\d_]{5,}$/

16、數(shù)字:/^[0-9][1-9][0-9]$

17幌衣、非負(fù)數(shù):/[+]{0,1}(\d+)$|[+]{0,1}(\d+.\d+)$/

18矾削、非負(fù)浮點(diǎn)數(shù):/^\d+(.\d+)?$/

19、正浮點(diǎn)數(shù):/^((0-9)+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$/

20豁护、Html標(biāo)記:/<(.)>.</\1>|<(.) />/

21哼凯、首尾空格:(^\s)|(\s$)

22、IP地址:/(\d+).(\d+).(\d+).(\d+)/g /

23楚里、URL地址:^[a-zA-Z]+://(\w+(-\w+))(.(\w+(-\w+)))(?\s)?$ 或: ^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&~`@]':+!$

24断部、SQL語句:/^(select|drop|delete|create|update|insert).$/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市班缎,隨后出現(xiàn)的幾起案子蝴光,更是在濱河造成了極大的恐慌,老刑警劉巖蔑祟,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件右冻,死亡現(xiàn)場離奇詭異牍帚,居然都是意外死亡暗赶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來激率,“玉大人招盲,你說我怎么就攤上這事】厍” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我跑慕,道長核行,這世上最難降的妖魔是什么综苔? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮晤柄,結(jié)果婚禮上可免,老公的妹妹穿的比我還像新娘捉撮。我一直安慰自己巾遭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布刚夺。 她就那樣靜靜地躺著创橄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪安吁。 梳的紋絲不亂的頭發(fā)上馍管,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天俘陷,我揣著相機(jī)與錄音桨菜,去河邊找鬼泻红。 笑死,一個(gè)胖子當(dāng)著我的面吹牛缠劝,可吹牛的內(nèi)容都是我干的耙旦。 我是一名探鬼主播轻黑,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼舷暮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起沥割,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤衅谷,失蹤者是張志新(化名)和其女友劉穎在验,沒想到半個(gè)月后兴溜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刨沦,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年髓堪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了驶沼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片换薄。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡赢底,死狀恐怖幸冻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情流码,我是刑警寧澤驾荣,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站眯亦,受9級(jí)特大地震影響乱顾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一适肠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春胯究,著一層夾襖步出監(jiān)牢的瞬間臣嚣,已是汗流浹背星持。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人溶浴。 一個(gè)月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子念脯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 文章轉(zhuǎn)載地址: http://www.open-open.com/code/view/1430625516632 ...
  • 正則表達(dá)式全部符號(hào)解釋(轉(zhuǎn)) 常用正則表達(dá)式大全 (轉(zhuǎn)) 不錯(cuò)的正則博客 正則的方法 var reg = /[1-...
    me__me11閱讀 956評論 0 0
  • 一邦泄、校驗(yàn)數(shù)字的表達(dá)式 二蕉拢、校驗(yàn)字符的表達(dá)式 三届巩、特殊需求表達(dá)式 一.網(wǎng)絡(luò)驗(yàn)證應(yīng)用技巧 驗(yàn)證 E-mail格式 驗(yàn)證...
    丶legend閱讀 1,369評論 0 22
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理枣接,服務(wù)發(fā)現(xiàn)膀曾,斷路器斩狱,智...
    卡卡羅2017閱讀 134,672評論 18 139
  • 遠(yuǎn)離親兄獨(dú)奮斗 不知何時(shí)是盡頭 三言兩語說不盡 只得寄情回憶中
    186c28e2058c閱讀 96評論 0 0