第二版
(-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);
}
})
});