jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼(簡(jiǎn)潔)

2. 頁(yè)面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表單驗(yàn)證頁(yè)面</title>
<link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Scripts/validator.js" type="text/javascript"></script>
<script src="../Scripts/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//加載驗(yàn)證信息
$('#uiform input').each(function () {
if ($(this).attr('required') || $(this).attr('validType'))
$(this).validatebox();
})
$('#ajax_test2').click(function () {
$.ajax({
url: "../Handler1.ashx?Menthod=Login",
type: 'post',
data: {name:"123456"},
timeout: 30000,
beforeSend: function (XMLHttpRequest) {
//alert('遠(yuǎn)程調(diào)用開(kāi)始...');
$("#loading").html("<img src='../Scripts/loader.gif' />");
},
success: function (data, textStatus) {
alert('開(kāi)始回調(diào),狀態(tài)文本值:' + textStatus + ' 返回?cái)?shù)據(jù):' + data);
$("#loading").empty();
},
complete: function (XMLHttpRequest, textStatus) {
alert('遠(yuǎn)程調(diào)用成功,狀態(tài)文本值:'+textStatus);
$("#loading").empty();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error...狀態(tài)文本值:' + textStatus + " 異常信息:" + errorThrown);
$("#loading").empty();
}
});
});
$("#btn").click(function () {
var flag = true;
flag = $("#uiform").form("validate");
// $('#uiform input').each(function () {
// if ($(this).attr('required') || $(this).attr('validType')) {
// if (!$(this).validatebox('isValid')) {
// flag = false;
// return;
// }
// }
// })
if (flag) {
$("#uiform").form("destroy");
alert('驗(yàn)證通過(guò)!');
}
});
});
</script>
<style type="text/css">
#name
{
width: 191px;
}
.style4
{
width: 100px;
}
.style5
{
width: 98px;
}
#txtPassword
{
width: 150px;
}
.style7
{
width: 371px;
}
.style8
{
width: 420px;
}
#btn
{
width: 86px;
}
.style9
{
width: 100px;
height: 26px;
}
.style10
{
width: 371px;
height: 26px;
}
.style11
{
width: 98px;
height: 26px;
}
.style12
{
width: 420px;
height: 26px;
}
.style13
{
width: 100px;
height: 25px;
}
.style14
{
width: 371px;
height: 25px;
}
.style15
{
width: 98px;
height: 25px;
}
.style16
{
width: 420px;
height: 25px;
}
</style>
</head>
<body >
<form id="uiform" title="表單驗(yàn)證頁(yè)面" class="easyui-window">
<br />
<table >
<tr>
<td class="style9">登錄名:</td>
<td class="style10"><input required="true" id="txtUsername" type="text" class="txt03" validType="account[4,20]" /></td>
<td class="style11">真實(shí)姓名:</td><td class="style12"><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style13">登錄密碼:</td>
<td class="style14"><input validType="password" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td>
<td class="style15">Email:</td>
<td class="style16"><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">身份證號(hào):</td><td class="style7"><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td>
<td class="style5">QQ:</td>
<td class="style8"><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">手機(jī):</td><td class="style7"><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td>
<td class="style5">電話(huà):</td><td class="style8"><input id="txtTel" validType="phone" name="tel" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">郵編:</td><td class="style7"><input validType="ZIP"
id="txtZIP" name="txtZIP" type="text" class="txt03" /></td>
<td class="style5">年齡:</td><td class="style8">
<input validType="number"
id="txtZIP0" name="txtZIP0" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">備注:</td><td colspan="3"> </textarea>
<input type="text" class="easyui-validatebox" required="true" validType="minLength[50]"
style="width:41%; height: 74px;" class="txt03" id="txtRemark"></td>
</tr>
<tr>
<td class="style4"> </td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超級(jí)管理員</label> <input id="Checkbox2" type="checkbox" /><label>禁用</label></td>
</tr>
<tr>
<td class="style4">text</td><td colspan="3">
<input id="name" type="text" class="easyui-validatebox"
missingMessage="當(dāng)文本框是空時(shí)出現(xiàn)的提示文字。" invalidMessage="當(dāng)文本框的內(nèi)容無(wú)效時(shí)出現(xiàn)的提示文字" required="true" validType="minLength[5]" /></td>
</tr>
<tr>
<td class="style4">文本框比對(duì):</td><td colspan="3">
<input type="password" id="txtpasswd" class="easyui-validatebox" required="true" validType="password" /> 2<input type="password" id="txtpasswd2" class="easyui-validatebox" required="true" validType="equalTo['#txtpasswd']" /> </td>
</tr>
</table>
<hr />
<center> <input id="btn" type="button" value="submit" />
<input id="ajax_test2" type="button" value="ajax_test2" /></center>
<div id="loading"></div>
</form>
</body>
</html>
- jquery validate.js表單驗(yàn)證的基本用法入門(mén)
- jquery表單驗(yàn)證使用插件formValidator
- 使用 jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
- 基于Jquery實(shí)現(xiàn)表單驗(yàn)證
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jQuery實(shí)現(xiàn)用戶(hù)注冊(cè)的表單驗(yàn)證示例
- jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
- jquery實(shí)現(xiàn)表單驗(yàn)證簡(jiǎn)單實(shí)例演示
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
- jQuery實(shí)現(xiàn)高度靈活的表單驗(yàn)證功能示例【無(wú)UI】
相關(guān)文章
jquery 實(shí)現(xiàn)兩級(jí)導(dǎo)航菜單附效果圖
兩級(jí)導(dǎo)航菜單在網(wǎng)頁(yè)中非常實(shí)用,實(shí)現(xiàn)的方法也有很多,本文為大家介紹下使用jquery是如何實(shí)現(xiàn)的2014-03-03可以顯示單圖片,多圖片ajax請(qǐng)求的ThickBox3.1類(lèi)下載
ThickBox是一個(gè)基于JQuery類(lèi)庫(kù)的擴(kuò)展 以下的是ThickBox3.1的實(shí)例+代碼調(diào)用方法2007-12-12jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航代碼分享
本篇文章給大家詳細(xì)分享的是jquery+css3來(lái)寫(xiě)出熊貓tv導(dǎo)航的效果,以及代碼分享,喜歡的朋友參考下。2018-02-02JQuery的Pager分頁(yè)器實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JQuery的Pager分頁(yè)器實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
本文給大家分享一款jquery實(shí)現(xiàn)的完美拖拽(拖動(dòng)div層效果),如果你正在找這類(lèi)效果不妨進(jìn)入?yún)⒖家幌隆?/div> 2015-06-06jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動(dòng)畫(huà)過(guò)渡效果都是通過(guò)easing函數(shù)實(shí)現(xiàn)的,下面是自己研究之后對(duì)其的基本認(rèn)識(shí)2014-08-08jquery點(diǎn)擊改變class并toggle的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery點(diǎn)擊改變class并toggle的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05Bookmarklet實(shí)現(xiàn)啟動(dòng)jQuery(模仿 云輸入法)
最近流行的 sogo云輸入法, QQ云輸入法,都用到了bookmarklet技術(shù)。2010-09-09最新評(píng)論