<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate表单验证插件的使用(仅供参考)</title>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<style type="text/css">
body{
background-color: #DDDDDD;
}
.myform{
position: relative;
width: 400px;
left: 50%;
margin-left: -200px;
}
</style>
</head>
<body>
<div id="mydiv">
<form id="myform" class="myform">
<h1>用户登录</h1>
<p>
<label id="lusername" class="lusername">用户名</label>
<input type="text" id="username" class="username" name="username"/>
</p>
<p>
<label id="lpassword" class="lpassword">密码</label>
<input type="password" id="userpassword" class="userpassword" name="userpassword"/>
</p>
<p>
<label id="lpassword" class="lpassword">确认密码</label>
<input type="password" id="confirm-password" class="confirm-password" name="confirm-password"/>
</p>
<p>
<button id="check" class="check">检查表单是否有效</button>
</p>
<p>
<input type="submit" id="login" class="login" />
</p>
</form>
</div>
<script type="text/javascript">
// 获取validtor对象
var vd;
//valid();方法检查表单是否填写正确有效
$("#check").click(function(){
alert($("#myform").valid()?"表单有效":"表单无效");
})
$(document).ready(function(){
// 获取validtor对象
vd = $("#myform").validate({
rules:{
username:{
required:true,
// 最小长度
// minlength:2,
// 最大长度
// maxlength:10,
// 长度范围
// rangelength:[2,10],
// 远程校验
// remote:"remote.json",
// 最大值和最小值
// max:10,
// min:0,
// 校验Email
// email:true,
// url校验
// url:true,
// 日期校验
// date:true,
// dateISO:true,
// 数字校验
// number:true,
// 整数校验
digits:true,
},
userpassword:{
required:true,
minlength:2,
maxlength:10
},
"confirm-password":{
required:true,
minlength:2,
maxlength:10,
//校验两次输入密码是否一致
equalTo:"#userpassword",
}
},
messages:{
username:{
required:"必须填写用户名",
minlength:"最小为2位",
maxlength:"最大为10位",
remote:"用户不存在"
},
userpassword:{
required:"必须填写密码",
minlength:"最小为2位",
maxlength:"最大为10位"
}
},
highlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
},
unhighlight:function(element,errorClass,validClass){
$(element).addClass(validClass).removeClass(errorClass);
},
// success:"验证通过",
// submitHandler:function(form){
console.log($(form).serialize());
// },
// invalidHandler:function(event,validtor){
console.log("错误:"+validtor.numberOfInvalids());
// },
// groups:{
// login:"username userpassword"
// },
// erroPlacement:function(error,element){
console.log(""+error);
// },
// showErrors:function(errorMap,errorList){
console.log(""+errorMap);
console.log(""+errorList);
this.defaultShowErrors();
// }
});
});
</script>
<h2>rules规则</h2>
<ul>
<li>添加rules规则1：rules:{
name:{属性:值,},
}</li>
<li>获取rules规则：$("类名/id名").rules()</li>
<li>添加rules规则2：$("类名/id名").rules("add",{属性:值})</li>
<li>移除rules规则：$("类名/id名").rules("remove","属性名")</li>
</ul>
<h2>Validator对象</h2>
<ul>
<li>Validator.form() <p>验证表单是否有效，返回true/false</p></li>
<li>Validator.element(ele) <p>验证某个元素是否有效,其中ele为选择器(如："#id/.class")返回true/false</p></li>
<li>Validator.rsetForm() <p>把表单恢复到验证前原来的状态，</p></li>
<li>Validator.showErrors({name:"需要提示的内容"，name:"需要提示的内容"}) <p>name为元素的name名称，针对某个元素显示特定的错误信息</p></li>
<li>Validator.numberOfInvalids()<p>返回无效的元素数量</p></li>
</ul>
<h2>Validator对象静态方法</h2>
<ul>
<li>jQuery.validtor.addMethod(name,method[,message])<p>增加自定义的验证方法 name:方法名；menthod:方法体;message：提示信息</p></li>
<li>jQuery.validtor.format(template,argument,argimentN...)<p>格式化字符串，用参数代替末班中的{n}</p></li>
<li>jQuery.validtor.setDefaults(options)<p>修改插件默认设置</p></li>
<li>jQuery.validtor.addClassRules(name,rules)<p>为某些class="XXX"增加组合验证类型jQuery.validtor.addClassRules(XXX:{属性:值})</p></li>
</ul>
<h2>Validator()方法配置项</h2>
<ul>
<li>submitHandler<p>验证通过后运行的函数，可以加上表单提交的方法 submitHandler:function(form){
console.log($(form).serialize());
},</p></li>
<li>invalidHandler<p>无效表单提交后运行的函数 invalidHandler:function(event,validtor){
console.log("错误:"+validtor.numberOfInvalids());
}</p></li>
<li>ignore<p>对某些元素不进行验证 ignore:"xxx" xxx为选择器(#id/.class)</p></li>
<li>rules<p>定义校验规则</p></li>
<li>messages<p>定义提示信息</p></li>
<li>groups<p>对一组元素的验证，用一个错误提示，用erroPlacement控制把出错信息放在哪里 groups:{
<!--name1,name2为哪些元素的name名称-->
login:"name1 name2 "
},
erroPlacement:function(error,element){
<!--error错误信息-->
<!--element为哪些元素-->
console.log(""+error);
} groups是对那些元素进行校验，然后用erroPlacement把错误显示在哪里</p></li>
<li>onsubmit<p>是否在提交时验证</p></li>
<li>onfocusout<p>是否在获取焦点时验证</p></li>
<li>onkeyup<p>是否在敲击键盘时验证</p></li>
<li>onclick<p>是否在鼠标点击时验证,一般用于checkbox或者radio</p></li>
<li>focusInvalid<p>提交表单后,未通过验证的表单(第一个或者提交之前获得焦点的未通过验证的表单)是否会获得焦点</p></li>
<li>focusCleanup<p>当未通过验证的元素获得焦点时，是否移除错误提示</p></li>
<li>errorClass<p>指定错误提示的css类名，可以自定义错误提示的样式</p></li>
<li>validClass<p>指定验证通过的css类名</p></li>
<li>errorElement<p>使用指定标签标记错误</p></li>
<li>wrapper<p>使用指定标签把errorElement包起来</p></li>
<li>errorLabelContainer<p>把错误信息统一放在一个容器里面</p></li>
<li>errorContainer<p>显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏</p></li>
<li>showErrors<p>可以显示总共有多少个未通过验证的元素 showErrors:function(errorMap,errorList){
// console.log(""+errorMap);
// console.log(""+errorList);
// this.defaultShowErrors();
}</p></li>
<li>errorPlcement<p>自定义错误信息放到哪里</p></li>
<li>success<p>要验证的元素标签通过验证后的动作(实际上是表单中的某个元素验证通过后,提示的Lablel标签增加类名)</p></li>
<li>highlight<p>可以给未通过验证的元素加效果 highlight:function(element,errorClass,validClass){
<!--$(element).addClass(errorClass).removeClass(validClass);-->
<!--$(element).fadeOut().fadeIn();-->
},
</p></li>
<li>unhighlight<p>去除未通过验证的元素的效果，一般和highlight同时使用 unhighlight:function(element,errorClass,validClass){
<!--$(element).addClass(validClass).removeClass(errorClass);-->
},</p></li>
</ul>
<h2>选择器扩展</h2>
<ul>
<li>:blank<p>选择所有值为空的元素</p></li>
<li>:filled<p>选择所有值不为空的元素</p></li>
<li>:unchecked<p>选择所有没有被选中的元素</p></li>
</ul>
</body>
</html>
HTML5之Validation Plugin表单插件使用(仅供参考)
最新推荐文章于 2023-03-27 02:26:22 发布
扫一扫
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
