JQuery插件Validation的使用-遁地龙卷风

时间:2022-12-04 16:48:12

第二版

(-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);

}

})

});