jQuery Validate格式驗(yàn)證功能實(shí)例代碼（包括重名驗(yàn)證）
更新時(shí)間：2017年07月18日 16:56:13 作者：igFishisBig
本文通過(guò)實(shí)例代碼給大家介紹了jQuery Validate格式驗(yàn)證功能，代碼中包括重名驗(yàn)證的方法，需要的的朋友參考下吧
引入jQuery-1.7.1.js和jquery.validate.js兩個(gè)js文件
jquery.validate.js下載地址：http://xiazai.jb51.net/201703/yuanma/jquery.validate.rar
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script>
$().ready(function () {
///自定義ajax驗(yàn)證
jQuery.validator.addMethod("ExistsCompany", function (value, element) { //用jquery ajax的方法驗(yàn)證電話是不是已存在
var flag = 1;
$.ajax({
type: "POST",
url: '/CustomerMonkey/ExistsCompanyAction',
async: false,
data: {
'name': value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () {
return $("#hidCustomerID").val();
}
},
success: function (data) {
if (data.result == "TRUE") {
flag = 0;
}
else if (data.result == "NO") {
compaymsg = "Name does not exist";
}
}
});
if (flag == 0) {
return true;
} else {
return false;
}
}, compaymsg);
$("#form1").validate({
rules: {
txtUserName:
{
required: true,
minlength: 6,
rangelength: [6, 20], //長(zhǎng)度5-10之間
remote: {
url: "/admin/CheckName", //后臺(tái)處理程序
type: "post", //數(shù)據(jù)發(fā)送方式
dataType: "json", //接受數(shù)據(jù)格式
data: { //要傳遞的數(shù)據(jù)
name: function () {
return $("#txtUserName").val();
}
}
},
ExistsCompany: true,
},
txtPassword: {
required: true,
minlength: 6,
rangelength: [6, 20], //長(zhǎng)度5-10之間
password: true,
},
txtPwd: {
required: true,
equalTo: "#txtPassword",
minlength: 6,
rangelength: [5, 20], //長(zhǎng)度5-10之間
password: true,
},
txtDisplayName: {
required: true,
minlength: 6,
rangelength: [6, 20], //長(zhǎng)度5-10之間
},
txtAge: {
required: true,
digits: true,
min: 1,
max: 100
},
sex: {
required: true,
},
txtCard: {
required: true,
creditcard: true,
},
txtidcard: {
required: true,
idcard: true,
},
txtEmail: {
required: true,
email: true,
},
txtTel: {
required: true,
phone: true,
},
txtQQ: {
required: true,
qq: true,
},
txtUrl: {
required: true,
url: true,
},
txtZipCode: {
required: true,
zipcode: true
},
txtDate: {
required: true,
date: true,
},
txtISO: {
required: true,
dateISO: true,
},
filFile: {
required: true,
filetype: ["mp3", "wma", "wav"]
}
},
messages: {
txtUserName: {
required: "請(qǐng)輸入登錄名",
minlength: jQuery.format("登錄名不能小于{0}個(gè)字符"),
rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串",
remote: "登錄名已存在",
},
txtPassword: {
required: "請(qǐng)輸入密碼",
minlength: jQuery.format("密碼不能小于{0}個(gè)字符"),
rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串",
password: "密碼只能是數(shù)字、字母與下劃線"
},
txtPwd: {
required: "請(qǐng)輸入確認(rèn)密碼",
minlength: "確認(rèn)密碼不能小于5個(gè)字符",
rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串",
equalTo: "兩次輸入密碼不一致不一致",
password: "密碼只能是數(shù)字、字母與下劃線"
},
txtDisplayName: {
required: "請(qǐng)輸入用戶名",
minlength: jQuery.format("密碼不能小于{0}個(gè)字符"),
rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串",
},
txtAge: {
required: "請(qǐng)輸入年齡",
digits: "只能輸入數(shù)字",
min: "最小值是1",
max: "最大值是100"
},
sex: {
required: "請(qǐng)選擇性別",
},
txtCard: {
required: "請(qǐng)輸入信用卡",
creditcard: "請(qǐng)輸入信用卡",
},
txtidcard: {
required: "請(qǐng)輸入身份證號(hào)",
idcard: "身份證號(hào)格式不正確",
},
txtEmail: {
required: "請(qǐng)輸入郵箱",
email: "郵箱格式不正確",
},
txtTel: {
required: "請(qǐng)輸入手機(jī)",
phone: "手機(jī)格式不正確"
},
txtQQ: {
required: "請(qǐng)輸入QQ",
qq: "qq格式不正確",
},
txtUrl: {
required: "請(qǐng)輸入網(wǎng)址",
url: "請(qǐng)輸入正確的網(wǎng)址",
},
txtZipCode: {
required: "請(qǐng)輸入郵編",
zipcode: "郵編格式不正確"
},
txtDate: {
required: "請(qǐng)輸入時(shí)間",
date: "日期格式不正確",
},
txtISO: {
required: "請(qǐng)輸入ISO",
dateISO: "ISO格式錯(cuò)誤"
},
filFile: {
required: "請(qǐng)選擇文件",
filetype: "只能上傳MP3,WMA,WAV格式文件",
}
},
submitHandler: function (form) {
//避免重復(fù)提交數(shù)據(jù)
$(form).find(":submit").attr("disabled", true);
form.submit();
},
//指定錯(cuò)誤信息位置
errorPlacement: function (error, element) {
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //獲取元素的name屬性
error.appendTo(element.parent()); //將錯(cuò)誤信息添加當(dāng)前元素的父結(jié)點(diǎn)后面
} else {
error.insertAfter(element);
}
},
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
<label>登錄名：</label>
<input id="txtUserName" name="txtUserName" class="sf" type="text" value="" />
</p>
<p>
<label>密碼：</label>
<input id="txtPassword" name="txtPassword" class="sf" type="password" value="" />
</p>
<p>
<label>確認(rèn)密碼：</label>
<input id="txtPwd" name="txtPwd" type="password" value="" class="sf" />
</p>
<p>
<label>用戶名：</label>
<input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" />
</p>
<p>
<label>年齡：</label>
<input id="txtAge" name="txtAge" class="mf" type="text" value="" />
</p>
<p>
<label>性別：</label>
<input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女
</p>
<p>
<label>信用卡：</label>
<input id="txtCard" name="txtCard" class="sf" type="text" value="" />
</p>
<p>
<label>身份證：</label>
<input id="txtidcard" name="txtidcard" class="sf" type="text" value="" />
</p>
<p>
<label>郵箱：</label>
<input id="txtEmail" name="txtEmail" class="sf" type="text" value="" />
</p>
<p>
<label>手機(jī)：</label>
<input id="txtTel" name="txtTel" class="sf" type="text" value="" />
</p>
<p>
<label>QQ：</label>
<input id="txtQQ" name="txtQQ" class="sf" type="text" value="" />
</p>
<p>
<label>網(wǎng)址：</label>
<input id="txtUrl" name="txtUrl" class="sf" type="text" value="" />
</p>
<p>
<label>郵編：</label>
<input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" />
</p>
<p>
<label>時(shí)間：</label>
<input id="txtDate" name="txtDate" class="sf" type="text" value="" />
</p>
<p>
<label>ISO：</label>
<input id="txtISO" name="txtISO" class="sf" type="text" value="" />
</p>
<p>
<label>文件：</label>
<input id="filFile" name="filFile" type="file" />
</p>
</div>
<input id="Submit1" type="submit" value="submit" />
</form>
</body>
</html>
password: function (value, element) {
return this.optional(element) || /^\w+$/.test(value);
},
address: function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9\s]+$/.test(value);
},
///固定電話123-85611111 或 0311-8561111
phone: function (value, element) {
return this.optional(element) || /^\d{3}-\d{8}$|\d{4}-\d{7}$/.test(value);
},
///13866666666
telphone: function (value, element) {
return this.optional(element) || /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value)
},
mobilephone: function (value, element) {
return this.optional(element) || /^\d{3}-\d{8}$|\d3\d{8}$|\d{4}-\d{7}$|\d4\d{7}$|1[358]\d{9}$/.test(value);
},
//身份證號(hào)
idcard: function (value, element) {
return this.optional(element) || /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);
},
///上傳文件格式驗(yàn)證
filetype: function (value, element, param) {
var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase();
return this.optional(element) || $.inArray(fileType, param) != -1;
},
總結(jié)
以上所述是小編給大家介紹的jQuery Validate格式驗(yàn)證實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
jquery Tab效果和動(dòng)態(tài)加載的簡(jiǎn)單實(shí)例
這篇文章主要是對(duì)jquery中Tab效果和動(dòng)態(tài)加載的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下。希望對(duì)大家有所幫助2013-12-12
jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見(jiàn)元素有效，通過(guò)本文給大家介紹jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了詳解閉包解決jQuery中AJAX的外部變量問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-02-02
Jquery遍歷checkbox獲取選中項(xiàng)value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項(xiàng)的value值,需要的朋友可以參考下2014-02-02
騰訊UED 漂亮的提示信息效果代碼，需要的朋友可以參考下。2011-09-09
jQuery實(shí)現(xiàn)手機(jī)版頁(yè)面翻頁(yè)效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)手機(jī)版頁(yè)面翻頁(yè)效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery中圖片展示插件highslide.js的簡(jiǎn)單dom
Highslide是一個(gè)非常美觀的圖片燈箱插件，下面這篇文章主要給大家介紹了關(guān)于jQuery中圖片展示插件highslide.js的簡(jiǎn)單dom，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法
本篇文章主要是對(duì)JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
解決jquery1.9不支持browser對(duì)象的問(wèn)題
項(xiàng)目里面一直用的都是jquery1.9，不支持browser對(duì)象，百度一下，找到了解決方案在此與大家分享下，有遇到此問(wèn)題的朋友不要錯(cuò)過(guò)2013-11-11
Javascript中的Array數(shù)組對(duì)象詳談
這篇文章主要介紹了Javascript中的Array數(shù)組對(duì)象,需要的朋友可以參考下2014-03-03