這篇文章主要為大家詳細(xì)介紹了jQuery驗(yàn)證插件validate的使用方法，jQuery.validate.js插件用于對(duì)表單輸入進(jìn)行驗(yàn)證，對(duì)驗(yàn)證插件感興趣的小伙伴們可以參考一下
一、jQuery.validate簡(jiǎn)介
jQuery.validate.js插件用于對(duì)表單輸入進(jìn)行驗(yàn)證，其使用配置非常簡(jiǎn)單。支持多事件觸發(fā)，自帶多種驗(yàn)證規(guī)則，還支持自定義驗(yàn)證規(guī)則。
1、配置方法
先導(dǎo)入jQuery庫(kù)，然后導(dǎo)入Validate插件，如果是中文提示還需要導(dǎo)入messages_zh.js。
注意Validate的導(dǎo)入要在jQuery庫(kù)之后。代碼如下：
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>
然后只要定義驗(yàn)證規(guī)則和指定錯(cuò)誤提示位置就可以了。
在$(document).ready()里加入驗(yàn)證規(guī)則與錯(cuò)誤提示位置，代碼如下：
JS代碼：
<script type="text/javascript">
$(function () {
$("#form1").validate({
/*自定義驗(yàn)證規(guī)則*/
rules:{
username:{ required:true,minlength:6 },
userpass:{ required:true,minlength:10 }
},
/*錯(cuò)誤提示位置*/
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
}
});
})
</script>
HTML代碼：
<form id="form1" action="#" method="post">
<p>用戶登錄</p>
<p>名稱:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
<p>密碼:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
<div>
<input id="btnLogin" type="button" value="登錄" class="btn" />
<input id="btnReset" type="button" value="取消" class="btn" />
</div>
</form>
這樣就完成了非常簡(jiǎn)單的表單驗(yàn)證功能，當(dāng)表單填寫(xiě)不正確時(shí)Validate在<input>的兄弟<span>元素里顯示錯(cuò)誤提示。
2、name屬性
說(shuō)明：jQuery.validate.js插件與<input>的關(guān)聯(lián)使用的是表單的name屬性。只有存在name屬性的<input>才能驗(yàn)證！
二、自定義錯(cuò)誤提示位置
當(dāng)我們想設(shè)置錯(cuò)誤提示的顯示位置怎么設(shè)置呢？
答案就是在errorPlacement參數(shù)里，你可以按照自己的需要自定義書(shū)寫(xiě)，用的是jQuery
/*錯(cuò)誤提示位置*/
errorPlacement:function(error,element){ //第一個(gè)參數(shù)是錯(cuò)誤的提示文字，第二個(gè)參數(shù)是當(dāng)前輸入框
error.appendTo(element.siblings("span")); //用的是jQuery，這里設(shè)置的是，錯(cuò)誤提示文本顯示在當(dāng)前文本框的兄弟span中
}
三、自定義錯(cuò)誤提示信息
例如當(dāng)我們有多個(gè)require:true選項(xiàng)，我想根據(jù)不同的選項(xiàng)設(shè)置不同的提示怎么辦呢？
答案就是在messages參數(shù)里。用層層嵌套的方式設(shè)置自己需要的提示信息。如果某個(gè)字段沒(méi)有message信息，這時(shí)才調(diào)用默認(rèn)的提示信息。
messages: {
UserName: {
required: "請(qǐng)輸入用戶名！" //注意，同樣是必填項(xiàng)，但是優(yōu)先顯示在messages里的提示信息
},
Email:{
required:"請(qǐng)輸入郵箱地址!" //不會(huì)統(tǒng)一輸出 必填字段 了哦
}
}
實(shí)際上，jQuery.Validate默認(rèn)的錯(cuò)誤提示是生成一個(gè)class=error的label，所以，如果想設(shè)置樣式，最簡(jiǎn)單的方法就是針對(duì)這個(gè)label設(shè)置就OK了，當(dāng)然默認(rèn)的label是可以手動(dòng)更改的。
四、ajax異步驗(yàn)證
只需要用到remote即可，注意后臺(tái)返回的JSON只能夠是true或false。
以下給出一個(gè)綜合示例，前臺(tái)HTML代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表單驗(yàn)證插件</title>
<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/Scripts/messages_zh.js" type="text/javascript"></script>
<script src="/Scripts/validates.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: {
UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" },
Email: { required: true,email:true },
UserPassword: { required: true ,minlength: 6 },
Mobile: { required: true, number:true },
IdCard: { required: true,isIdCardNo: true },
Age: { required: true ,number:true,min:1,max:100 }
},
messages:{
UserName: {
required: "請(qǐng)輸入用戶名！",
minlength: "用戶名長(zhǎng)度最少需要3位！",
maxlength: "用戶名長(zhǎng)度最大不能超過(guò)18位！",
remote: "此用戶名已存在！"
},
Email: {
required: "請(qǐng)?zhí)顚?xiě)郵箱",
email: "請(qǐng)輸入正確的郵箱格式"
},
UserPassword: {
required: "請(qǐng)?zhí)顚?xiě)你的密碼!",
minlength: "密碼長(zhǎng)度不能小于6位"
},
Mobile: {
required: "請(qǐng)?zhí)顚?xiě)你的手機(jī)號(hào)碼",
number:"手機(jī)號(hào)碼只能為數(shù)字"
},
IdCard: {
required: "請(qǐng)輸入身份證號(hào)碼！",
isIdCardNo:"請(qǐng)輸入正確的身份證號(hào)碼！"
},
Age: {
required: "請(qǐng)輸入年齡!",
number: "請(qǐng)輸入數(shù)字",
min: "年齡不能小于1",
max: "年齡不能大于100"
}
},
/*錯(cuò)誤提示位置*/
errorPlacement: function (error, element) {
error.appendTo(element.parent());
}
})
})
</script>
</head>
<body>
<form id="form1" method="post" action="">
<div>
<p> 用戶名:<input type="text" value="" name="UserName" /> </p>
<p> 密碼:<input type="password" value="" name="UserPassword" /> </p>
<p> 郵箱:<input type="text" value="" name="Email" /> </p>
<p> 手機(jī)號(hào)碼:<input type="text" value="" name="Mobile" /> </p>
<p> 身份證號(hào)碼:<input type="text" value="" name="IdCard" /> </p>
<p> 年齡:<input type="text" value="" name="Age" /> </p>
<p> <input type="submit" id="btn1" value="提交"></p>
</div>
</form>
</body>
</html>
后臺(tái)控制器代碼:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult CheckUserName()
{
string username = HttpContext.Request.QueryString["username"];
bool succeed = true;
if (username == "admin")
{
succeed = false;
}
return Json(succeed, JsonRequestBehavior.AllowGet);
}
}
最終效果如下圖所示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試