###常用表單正則驗證
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;
}
}
})
謝謝大家