• 表单验证插件及一些属性的用法 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接口对数据进行添加至数据库

     

  • 相关阅读:
    缓慢变化纬的解决方法
    行转列且有序
    异常处理
    继承
    js的隐式转化
    初步了解微任务
    axios中断请求AbortController
    Vue解决V-HTML指令潜在的XSS攻击('v-html' directive can lead to XSS attack vue/no-v-html)
    axios下载后台传过来的流文件并设置下载文件名(如excel)
    axios异步获取文件流数据
  • 原文地址:https://www.cnblogs.com/cyj-dz/p/7057626.html
Copyright © 2020-2023  润新知