jquery,form表单验证后提交

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_30679953/article/details/52253242

</pre>引入的js包:<p></p><p><img src="https://img-blog.csdn.net/20160819180415945?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>为表单设置验证规则:</p><p></p><pre code_snippet_id="1840741" snippet_file_name="blog_20160819_2_8409390" name="code" class="javascript">jQuery(document).ready(function(){
		jQuery("#theForm").validate({
			errorPlacement: function(error, element) {
				element.parent().find("span[class='error']").html("");
			    error.appendTo(element.parent().find("span[class='error']"));
			},
			rules: {
				country: {required:true},
				zip: {required:true},
				area_id: {required:true},
				area_info: {required:true},
				trueName: {required:true},
				telephone: {required:true}
			},
			messages:{
				country: {required:"必填项,不能为空!"},
				zip: {required:"必填项,不能为空!"},
				area_id: {required:"必填项,不能为空!"},
				area_info: {required:"必填项,不能为空!"},
				trueName: {required:"必填项,不能为空!"},
				telephone: {required:"必填项,不能为空!"}
			}
		});
	});

具体验证规则的写法请查看:

http://www.jquerycn.cn/a_4345

http://blog.csdn.net/lhzjj/article/details/17378435

当表单提交时jquery会先进行验证,验证通过才提交。下面是验证不通过的样式:


验证不同,表单当然不会提交,并进行提示。

具体验证的写法清参考上面列出的两个链接。

主动验证表单:

jQuery("#theForm").valid(); //返回值类型为boolean,通是true,不通过为false。

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑以上代码可能会出错

按下面的写


var form = $("#theForm").validate();
	 if(!form.valid()) return;

先去执行validate()方法,然后在去执行valid()方法验证。




阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页