HTML5之Validation Plugin表单插件使用(仅供参考)

青旅半醒 2022-07-12 12:29 161阅读 0赞

<!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:{
    						
    						login:"name1 name2 "
    					},
    					erroPlacement:function(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){
    						
    						
    					},
    					</p></li>
    			<li>unhighlight<p>去除未通过验证的元素的效果，一般和highlight同时使用  unhighlight:function(element,errorClass,validClass){
    						
    					},</p></li>
    		</ul>
    		<h2>选择器扩展</h2>
    		<ul>
    			<li>:blank<p>选择所有值为空的元素</p></li>
    			<li>:filled<p>选择所有值不为空的元素</p></li>
    			<li>:unchecked<p>选择所有没有被选中的元素</p></li>
    		</ul>
    	</body>
    </html>