Jquery常用正則驗證函數實例小結【姓名,手機,Email,年齡,等】

###常用表單正則驗證
html代碼塊,例如:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="index.js"></script>/*下面提供index.js*/
<style>
	/*樣式可自己添加*/
</style>
<body>
	<div class="list">
		<ul>
			<li>
				<label>姓名:</label>
				<input type="text" name="name" class="name" placeholder="請輸入您的姓名">
				<span class="tip-error">5235</span>
			</li>
			<li>
				<label>手機:</label>
				<input type="text" name="mobile" class="mobile" placeholder="請輸入您的手機">
				<span class="tip-error"></span>
			</li>
			<li>
				<label>電子郵箱:</label>
				<input type="text" name="email" class="email" placeholder="請輸入您的電子郵箱">
				<span class="tip-error"></span>
			</li>
			<li>
				<label>年齡:</label>
				<input type="text" name="age" class="age" placeholder="請輸入您的年齡">
				<span class="tip-error"></span>
			</li>
			<li>
				<label>通訊地址:</label>
				<input type="text" name="address" class="address" placeholder="請輸入您的通訊地址">
				<span class="tip-error"></span>
			</li>
			<li class="fn-textcenter"><a href="javascript:;" class="btn-blue btn-submit">提交</a></li>
		</ul>
		
	</div>
</body>
</html>

###js部分代碼塊(index.js)
index.js代碼塊,例如:

$(function(){
	//成爲焦點
	$('.name,.mobile,.email,.age,.address').on('focus',function(){
			$(this).siblings(".tip-error").hide();
	})

    //失去焦點     
    $('.name').on('blur',function(e){//下面進行封裝
    	var current = $(e.target);
    	var value = current.val();
    	
    	fromEvent(current,value,'name','用戶名不能爲空!','用戶名只能是漢字並且在2-4位之間!');

    })

    $('.mobile').on('blur',function(e){//下面進行封裝
    	var current = $(e.target);
    	var value = current.val();
    	
    	fromEvent(current,value,'mobile','手機號不能爲空!','請輸入正確的手機號碼!');

    })

    $('.email').on('blur',function(e){
        var current = $(e.target);
        var value = current.val();
        
        fromEvent(current,value,'email','郵箱不能爲空!','請輸入正確的郵箱!');

    })

    $('.age').on('blur',function(e){
        var current = $(e.target);
        var value = current.val();
        
        fromEvent(current,value,'age','年齡不能爲空!','請輸入有效數字!');

    })

    function fromEvent(current,value,name,text1,text2){

    	if(value == ""){
    		current.siblings('.tip-error').text(text1).show();
    	}else if(!checkFilter(name,value)){

    		current.siblings('.tip-error').text(text2).show();
    	}else{
    		current.siblings(".tip-error").hide();
    	}
    }

    function checkFilter(name,value){

    	if(name == '') return true;
    	var filter;
    	switch(name){
    		case 'name':
    		filter = /^[\u4E00-\u9FA5]{2,4}$/;
    		break;

    		case 'mobile':
    		filter = /^1[34578]\d{9}$/;
    		break;

    		case 'email':
    		filter = /^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/;
    		break;

    		case 'age':
    		filter = /^[0-9]{1,2}$/;
    		break;
    	}

    	if(filter.test(value)){
    		return true;
    	}else{
    		return false;
    	}
    }
})

謝謝大家

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章