表单验证插件及一些属性的用法 validate

注:必须配合jq使用。

基本语法 例如有如下:

<form action="" method="post" id="demoForm">
			<p>
				<label name="email">email:</label>
				<input type="text" id="email" value="" name="email1"/>
			</p>
			<p>
				<label name="pasword1">password:</label>
				<input type="text" id="password1" value="" name="pass1"/>
			</p>
			<p>
				<label name="pasword2">confirm-password:</label>
				<input type="text" id="password2" value="" name="pass2"/>
			</p>
			<p>
				<input type="submit" id="btn" name="" />
			</p>
		</form>

 基本类型:

  

$(function(){
				$("#demoForm").validate({
					rules:{
						//指定元素对应的规则
					},
					messages:{
						//如果不符合要求时要提示的信息
					},
				
				})
			})

  属性:

require :true   必填  布尔类型
rangelength:[2,6]  长度范围
equalTo  保证两次密码一致
email: true  布尔类型
submitHandler:function(){

         //校验通过时可执行的东西  
}

invalidHander:function(){
         校验通不过时可执行
}

focusInvalid  : true 布尔
提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 


focusCleanup : false 默认
当未通过验证的元素获得焦点时,并移除错误提示 (避免和 focusInvalid.一起使用)

errorElement:'div'将错误信息放在什么地方

errorClass:'worng'  可给错误信息添加一个类名 通过类名可给错误信息修饰样式
highlight:function(element,erroeClass){
      $(element).addClass(errorClass);
      $(element).fadeOut().fadeIn();
}
出错时的样式设置
minlength :  num 最小值
maxlength: num  最大值
digits:true   年龄必须为正整数
range:[]范围
date:true  日期格式要求较宽泛
dateISO:true; 日期规范较严格

      jq 表单验证插件不仅可以在数据获取之前在前端做首要的的判断,还通过submintHandler:这个属性通过ajax获取数据

ajax获取数据的同时结合php接口对数据进行添加至数据库

 

原文地址:https://www.cnblogs.com/cyj-dz/p/7057626.html