第二版 (-1)寫在前面 本文不是要詳細說明Validation插件的使用,而是將滿足開發需求的代碼已最應該使用的方式寫出來,並附有詳細的註釋 想要瞭解更多,去jquery的官網,有最新,最全面的,後續可能會寫怎麼從jquery官網獲得信息的博文 (0)資源配置 官網的jar包: lib 有該插件所 ...
第二版
(-1)寫在前面
本文不是要詳細說明Validation插件的使用,而是將滿足開發需求的代碼已最應該使用的方式寫出來,並附有詳細的註釋
想要瞭解更多,去jquery的官網,有最新,最全面的,後續可能會寫怎麼從jquery官網獲得信息的博文
(0)資源配置
官網的jar包:
lib 有該插件所支持的最高版本jquery ,使用更高版本可能會發生錯誤,例如Jquery3.0
dist\localization\messages_zh.js 可以讓預設報錯信息使用中文
導入的順序
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript" src="jquery.validate.js" ></script>
<script type="text/javascript" src="messages_zh.js"></script>
(1)css代碼
<body>
<form id="chatform">
姓名:<input type="text" size="50" name="name" id="name"/><br/>
密碼:<input type="text" size="50" name="password" id="password"/><br/>
<!--上一版本的兩個id值寫成一樣,導致了一些錯誤,抱歉'-->
<input type="submit" value="提交">
</form>
</body>
(2)js代碼
$(function()
{
//添加自定義方法
$.validator.addMethod(
"test",
//value 表單元素的值,
//element,表單元素
//param 傳的參數
function(value,element,param)
{
if(value == param)
return true;
return false;
},
//錯誤的提示信息
'請輸入正確的密碼'
)
//"#chatform" form表單
$("#chatform").validate({
rules:{
//name、password是元素的name屬性值
name:{
required:true,
minlength:2
},
password:{
//調用自定義方法
test:"12345"
}
},
//自定義提示信息
messages:{
name:{
required:"必須填寫",
minlength:"不能少於兩個"
}
},
//用什麼元素顯示錯誤信息,必填
errorElement:"span",
//error 顯示錯誤信息的元素,你獲得了這個元素的控制權,你可以給它加背景圖片、加個img標簽等
success:function(error)
{
},
//error 顯示錯誤信息的元素,你獲得了這個元素的控制權,你可以給它加背景圖片、加個img標簽等
//element 觸發錯誤信息的表單元素
errorPlacement: function(error, element)
{
//將error 放入到element後面 必須有
element.after(error);
}
})
});