jQuery插件之validation插件

2020-05-24 21:27:59易采站长站整理

errorLabelContainer Selector   无 把错误信息统一放在一个容器里面
wrapper String   无 用什么标签再把上边的errorELement包起来

【成功样式】

validate插件有一个success()方法,用来设置要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个css类,也可跟一个函数

success:String,Callback


success: function(label) {
label.html(" ").addClass("success");
}

success: "success"

但实际上,validate插件只是将label标签添加了一个’success’类,且原先的’error’类并没有删除。且经过实际测试,’error’类名无法删除,删除之后,每次验证成功时,validate插件都会自动再生成一个label标签

所以,success的效果无法正常使用,这应该是validate插件的一个bug


<style>
label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;}
</style>
<body>
<form id="demoForm">
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="email">电子邮件:</label>
<input id="email" name="email" />
</p>
<p>
<label for="url">网址:</label>
<input id="url" name="url"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
username:{
required: true,
minlength: 2,
maxlength: 10
},
email:{
required: true,
email:true
},
url:{
required: true,
url:true
}
},
messages:{
username:{
required:"请输入用户名",
minlength:"至少输入{0}个字符",
maxlength:"最多输入{0}个字符"
},
email:{
required:"请输入邮箱",
email:"邮箱格式不正确"
},
url:{
required:"请输入网址",
url:"网址格式不正确(完整的网址应包括http://或https://)"
}
}
})
</script>

自定义验证

由于需求的需要,除提供的默认验证规则外,还需要自定义验证规则,满足业务需要。这时就需要使用addMethod()方法

【addMethod(】

addMethod(name,method,message)方法用来添加一个新的验证方法

参数 name 是添加的方法的名字。参数 method 是一个函数,接收三个参数 (value,element,param)。value 是元素的值,element 是元素本身,param 是参数