validate验证+ajax

最新推荐文章于 2022-04-12 12:52:13 发布

小雨飞

最新推荐文章于 2022-04-12 12:52:13 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

分类专栏： validate js

本文链接：https://blog.youkuaiyun.com/qq19566/article/details/78250802

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

validate

1 篇文章

订阅专栏

本文档详细介绍了如何在HTML页面中利用validate.js进行表单验证，并结合Ajax实现数据的异步提交，确保用户输入的合法性与交互的流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

======================controller：控制层====================

    @RequestMapping("roleName1")
	@ResponseBody
	public Object selByName(String roleName){
 	   	boolean res=true;
 	    List<String> tpc=roleService.selAdByName(roleName);
 	    for(String ad : tpc){
 		    if(StringUtils.isNotEmpty(ad)){
 		    	res=false;
 		    	break;
 		    }
 	    }
 	   //System.out.println("=======name1"+roleName);
 	   return res;
    }

======================html====================

<form action="" method="post"  class="form form-horizontal" id="form-admin-role-add" >
    <input type="text" name="auth">
    <input type="text" class="input-text" id="roleName" name="roleName">
    <button type="button" onclick="saveFreeTime()" class="btn btn-success radius">提交</button>
</form>

======================js====================

//需要引入validate.js

$(function(){
	$("#form-admin-role-add").validate({
		rules:{
			auth:{
				required : true
			},
		
			roleName:{
				required : true,
				remote:{  
	                                url:"list/name1",
	                                type: "POST",  	   
	                                dataType:"json",
	                                async:false,
	                                data: {                     //要传递的数据
	               		            roleName: function() {
					            return $("#roleName").val();
					    }
				        }
	                        }
	                }
		},
		messages:{   
			auth:{
				required:"请选择权限"
			},
			
			roleName:{  
				required:"请填写账号",
	                        remote:"该账号已被占用！"
	                }
		},
		//是否在获取焦点时验证  
        onfocusout:false,  
        //是否在敲击键盘时验证  
        onkeyup:false,  
        //提交表单后，（第一个）未通过验证的表单获得焦点  
        focusInvalid:true,  
        //当未通过验证的元素获得焦点时，移除错误提示  
        focusCleanup:true 
	});
	
});


function saveFreeTime()
{
	var flag = $("#form-admin-role-add").valid();
	if(!flag){
   		//没有通过验证
    	return;
	}
	
    var data = $('form').serializeArray();
    //console.log("======Da:"+data.name);
    $.ajax({
        type: "POST",
        url: "/list",
        dataType: "json",
        data: data,
        success: function () {
        	
           alert("成功")
        	
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        	
            alert("失败");
        	
        }
    });

}