這篇文章主要為大家詳細介紹了jQuery驗證插件validate的使用方法，jQuery.validate.js插件用于對表單輸入進行驗證，對驗證插件感興趣的小伙伴們可以參考一下
一、jQuery.validate簡介
jQuery.validate.js插件用于對表單輸入進行驗證，其使用配置非常簡單。支持多事件觸發(fā)，自帶多種驗證規(guī)則，還支持自定義驗證規(guī)則。
1、配置方法
先導(dǎo)入jQuery庫，然后導(dǎo)入Validate插件，如果是中文提示還需要導(dǎo)入messages_zh.js。
注意Validate的導(dǎo)入要在jQuery庫之后。代碼如下：
<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>
然后只要定義驗證規(guī)則和指定錯誤提示位置就可以了。
在$(document).ready()里加入驗證規(guī)則與錯誤提示位置，代碼如下：
JS代碼：
<script type="text/javascript">
$(function () {
$("#form1").validate({
/*自定義驗證規(guī)則*/
rules:{
username:{ required:true,minlength:6 },
userpass:{ required:true,minlength:10 }
},
/*錯誤提示位置*/
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>
這樣就完成了非常簡單的表單驗證功能，當表單填寫不正確時Validate在<input>的兄弟<span>元素里顯示錯誤提示。
2、name屬性
說明：jQuery.validate.js插件與<input>的關(guān)聯(lián)使用的是表單的name屬性。只有存在name屬性的<input>才能驗證！
二、自定義錯誤提示位置
當我們想設(shè)置錯誤提示的顯示位置怎么設(shè)置呢？
答案就是在errorPlacement參數(shù)里，你可以按照自己的需要自定義書寫，用的是jQuery
/*錯誤提示位置*/
errorPlacement:function(error,element){ //第一個參數(shù)是錯誤的提示文字，第二個參數(shù)是當前輸入框
error.appendTo(element.siblings("span")); //用的是jQuery，這里設(shè)置的是，錯誤提示文本顯示在當前文本框的兄弟span中
}
三、自定義錯誤提示信息
例如當我們有多個require:true選項，我想根據(jù)不同的選項設(shè)置不同的提示怎么辦呢？
答案就是在messages參數(shù)里。用層層嵌套的方式設(shè)置自己需要的提示信息。如果某個字段沒有message信息，這時才調(diào)用默認的提示信息。
messages: {
UserName: {
required: "請輸入用戶名！" //注意，同樣是必填項，但是優(yōu)先顯示在messages里的提示信息
},
Email:{
required:"請輸入郵箱地址!" //不會統(tǒng)一輸出 必填字段 了哦
}
}
實際上，jQuery.Validate默認的錯誤提示是生成一個class=error的label，所以，如果想設(shè)置樣式，最簡單的方法就是針對這個label設(shè)置就OK了，當然默認的label是可以手動更改的。
四、ajax異步驗證
只需要用到remote即可，注意后臺返回的JSON只能夠是true或false。
以下給出一個綜合示例，前臺HTML代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表單驗證插件</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: "請輸入用戶名！",
minlength: "用戶名長度最少需要3位！",
maxlength: "用戶名長度最大不能超過18位！",
remote: "此用戶名已存在！"
},
Email: {
required: "請?zhí)顚戉]箱",
email: "請輸入正確的郵箱格式"
},
UserPassword: {
required: "請?zhí)顚懩愕拿艽a!",
minlength: "密碼長度不能小于6位"
},
Mobile: {
required: "請?zhí)顚懩愕氖謾C號碼",
number:"手機號碼只能為數(shù)字"
},
IdCard: {
required: "請輸入身份證號碼！",
isIdCardNo:"請輸入正確的身份證號碼！"
},
Age: {
required: "請輸入年齡!",
number: "請輸入數(shù)字",
min: "年齡不能小于1",
max: "年齡不能大于100"
}
},
/*錯誤提示位置*/
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> 手機號碼:<input type="text" value="" name="Mobile" /> </p>
<p> 身份證號碼:<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>
后臺控制器代碼:
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);
}
}
最終效果如下圖所示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助。
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試