jquery.validate不用submit提交,用js提交的,怎么触发验证啊?

JavaScript021

jquery.validate不用submit提交,用js提交的,怎么触发验证啊?,第1张

用 button.click提交。

举例如下:

$("#form").validate()

$("#btn).click(function(){

 if($("#form").valid()){

  $("#form").submit()

}

})

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

扩展资料

query-validate 插件

基本用法:

1、页面中引入js依赖,因为validate是依赖jquery的需要先引入jquery。

2、表单校验,首先得有一个表单,即form标签,然后由于浏览器是通过name属性来提交表单数据的,所以需要给校验的控件都加上name属性。

rules里每个控件可以给多个验证方式,常用的有:

1、required 必填验证元素。

2、minlength(length) maxlength(length)。

3、rangelength(range)设置最小长度、最大长度和长度范围 [min,max]。

4、min(value) max(value) range(range) 设置最大值、最小值和值的范围。

5、email() 验证电子邮箱格式。

表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例

原始的表单提交有 button 按钮提交和 <input />类型的。它们又什么区别呢?

(1) 默认表单提交

(2)默认不会提交表单

(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面

(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转

(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面

(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面

(7) 下面的提交会发生什么?

分析 : 点击提交按钮:

(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 <form>的 onsubmit 句柄,又因为该句柄 return false 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'

(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效

现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。

1 如果是格式性的验证(不和后台交互) 首先写验证逻辑 如果符合进行下一步,不符合return结束方法

例:

if (gwmc.length >= 200) {

showAlertDialog("岗位名称不能超过100个字符!", null, null)

return

}

if (gwlx == "") {

showAlertDialog("岗位类型不能为空", null, null)

return

} else if (gwmc == "") {

showAlertDialog("岗位名称不能为空", null, null)

return

} else if (ckjls == "") {

showAlertDialog("参考警力数不能为空", null, null)

return

}

2 如果是进入后台查询数据进行判断 也一再ajax回掉函数中和action中写逻辑校验

例:

$.post(context +"/position/savePosition.action", {

"positionBean.name" : gwmc,

"position.name" : gwmc,

"position.positionType" : gwlx,

"position.referPeopleNum" : ckjls,

"position.controlAddr" : kzqymc,

"position.use" : qy

}, function(json) {

var flag = json.flag

//console.log(flag)

if (flag == true) { //后台返回 名称不重复 flag为true 否则位false

showAlertDialog("添加成功", null, null)

undo()

findPosition(0)

change=0

} else {

showAlertDialog("岗位名称不能重复!", null, null) //名称重复 弹框提示

//findByName(gwmc)

findPosition(0) //刷新 列表

}

})

}