jQuery formValidator表單驗證
更新時間：2016年01月07日 10:38:27 作者：蜀北喬少恭
這篇文章主要介紹了jQuery formValidator表單驗證 的相關(guān)資料,需要的朋友可以參考下
作為一名程序員，在解決工作中遇到問題之后，做一些總結(jié)是有必要的，既方便總結(jié)溫習(xí)相關(guān)知識點，也為廣大的程序員提供了一些工作經(jīng)歷，給予同行一面明鑒.
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用戶名：</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密碼：</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重復(fù)密碼：</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性別：</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地區(qū)：</label></td>
<td>
<select name="area" id="area">
<option value="0">- 請選擇 -</option>
<option value="1">錦江區(qū)</option>
<option value="2">金牛區(qū)</option>
<option value="3">龍泉驛區(qū)</option>
<option value="4">青羊區(qū)</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份證：</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">電話號碼：</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">郵箱：</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置當(dāng)前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //設(shè)置驗證組，默認值為1
onSuccess : function(){ //驗證成功后的回調(diào)函數(shù)
},
onError:function(){ //驗證失敗后的回調(diào)函數(shù)
}
});
$('#uname').formValidator({
ValidatorGroup : '1', //驗證組為1
onEmpty : '用戶名不能為空', //提示用戶名不能為空
onShow : "",
onFocus : '用戶名必須為1到12位的數(shù)字或字母',//表單元素獲得焦點的時候提示應(yīng)輸入的格式
onCorrect : '用戶名輸入正確' //輸入正確的提示
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //驗證表單輸入的正則表達式
onError : '用戶名格式有誤，請從新輸入' //輸入錯誤的提示
})
.ajaxValidator({ //驗證輸入的用戶名是否已經(jīng)存在
dataType : 'html', //請求數(shù)據(jù)的格式
async : true, //異步方式
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '該用戶名已存在，請從新輸入',
onWait : '正在對用戶名進行合法性校驗，請稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密碼不能為空',
onShow : "",
onFocus : '密碼必須為6位以上的字母或數(shù)字',
onCorrect : '密碼輸入正確'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密碼格式有誤，請從新輸入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密碼不能為空',
onShow : "",
onFocus : '密碼必須為6位以上的字母或數(shù)字',
onCorrect : '密碼輸入正確'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密碼格式不正確'
})
.compareValidator({ //比較兩次輸入內(nèi)容是否符合下面給出的比較符號
desID : 'pwd', //相比較的表單元素的ID值
operateor : '=', //要比較的兩個元素之間的關(guān)系
onError : '兩次密碼輸入不一致，請從新輸入' //不滿足以上關(guān)系的時候的提示
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '身份證不能為空',
onShow : '',
onFocus : '請輸入您的身份證號',
onCorrect : '身份證格式正確'
}).regexValidator({
regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
//15位身份證號碼的正則表達式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
onError : '身份證格式有誤，請從新輸入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手機號碼不能為空',
onShow : '',
onFocus : '請輸入您的手機號碼',
onCorrect : '手機號碼格式正確',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手機號碼格式有誤，請從新輸入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '郵箱地址不能為空',
onShow : '',
onFocus : '請輸入您的郵箱地址',
onCorrect : '郵箱格式正確'
})
.regexValidator({
regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
onError : '郵箱格式有誤，請從新輸入'
});
</script>
</body>
</html>
php部分代碼：
<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) {
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>
以上內(nèi)容是小編給大家介紹的jQuery formValidator表單驗證相關(guān)知識，希望對大家有所幫助，同時感謝大家對腳本之家網(wǎng)站的支持。
相關(guān)文章
本文主要給大家介紹的是jQuery實現(xiàn)的進度效果的實例代碼，其實現(xiàn)原理就是使用 Javascript 控制 SPAN CSS 的寬度（以及其他的樣式）有需要的小伙伴可以參考下。2015-07-07
使用jQuery Ajax 請求webservice來實現(xiàn)更簡練的Ajax
以往我們在做ajax時,都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個請求都要建一個這樣的文件，非常麻煩，下面我們甩掉ashx和asmx來使用jQuery Ajax 請求webservice來實現(xiàn)更簡練的Ajax，需要的朋友參考下2016-08-08
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡單介紹了jQuery類名選擇器的概念、原理并結(jié)合實例形式分析了類選擇器的簡單使用方法,需要的朋友可以參考下2018-05-05
jQuery插件slick實現(xiàn)響應(yīng)式移動端幻燈片圖片切換特效
jQuery插件slick是一款響應(yīng)式、適用于移動設(shè)備觸摸屏、可滑動顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果，可以自動播放，是一款移動優(yōu)先的jQuery幻燈片插件。2015-04-04
使用Javascript實現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實現(xiàn)下拉菜單可選擇互相移動并實現(xiàn)菜單排序，代碼簡單易懂，具有參考價值，需要的朋友參考下吧2016-02-02
這里給大家分享的是一段自己編寫的使用jQuery實現(xiàn)拽調(diào)整Div層大小的代碼，非常實用，推薦給有需要的小伙伴們。2015-01-01
Jquery和angularjs獲取check框選中的值的方法匯總
本文分別通過具體的實例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法，非常的簡單實用，有需要的小伙伴可以參考下2016-01-01
jquery自動將form表單封裝成json的具體實現(xiàn)
這篇文章主要介紹了jquery自動將form表單封裝成json的具體實現(xiàn),需要的朋友可以參考下2014-03-03
這篇文章介紹了用jquery存取照片的具體實現(xiàn)方法，需要的朋友可以參考一下2013-06-06
jquery對表單操作2，最近幾篇整理都是jquery表格操作相關(guān)，大家可以收藏下。2011-04-04