使用validate.js验证并用ajax提交表单的实例

最新推荐文章于 2021-08-06 12:33:29 发布

转载最新推荐文章于 2021-08-06 12:33:29 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tonety/p/5458663.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了一个使用jQuery进行表单验证的方法，并结合AJAX实现表单数据的无刷新提交。具体包括验证规则设置、点击事件绑定、数据有效性检查及错误提示等功能。

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

使用时需要依赖jQuery库

验证规则：

var validator = $("#form").validate({ 
　　rules:{ 
　　　　name: {
　　　　　　 required: true 
　　　　}, 
　　　　email: { 
　　　　　　 required: true,
　　　　　　 email:true 
　　　　}, 
　　　　message: { 
　　　　　　required: true
　　　　}
   } 
});

点击验证并执行ajax：

$("#form .submit").click(function(){
	if($("#form").valid()){
		$.ajax({
			url:url,
			type:'post',
			data:new FormData($("#form")[0]),
			processData : false,  
			contentType : false,
			success:function(msg){
                              //do someting
			}
		})
	}else{
　　     　　   validator.focusInvalid();//没通过验证的标签获得焦点
        }