首页 > 其他分享 >jquery.validate清除表单的验证结果

jquery.validate清除表单的验证结果

时间:2023-02-13 15:00:49浏览次数:44  
标签:jquery form 验证 required resetForm 表单 validate bug


文章目录

  • ​​发现bug:​​
  • ​​分析bug:​​
  • ​​解决bug:​​

发现bug:

jquery.validate无法清除同表单的上次验证结果,如下:

jquery.validate清除表单的验证结果_bug

分析bug:

查阅官方文档之后,观察validate的返回类型,可以发现validate 方法返回一个 Validator 对象。

名称

返回类型

描述

validate(options)

Validator

验证所选的Form

Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容,下面列出几个常用的方法。

名称

返回类型

描述

form()

Boolean

验证form返回成功还是失败

element(element)

Boolean

验证单个元素是成功还是失败

resetForm()

undefined

把前面验证的Form恢复到验证前的状态

showErrors(errors)

undefined

显示特定的错误信息

我们可以利用上面的resetForm()函数清空上次表单的验证结果

解决bug:

var validate='';
function vform(dom,func) {
validate=$('#'+dom).validate({
rules: {
snoAllocation: {
required: true
},
statusAllocation1:{
equalTo:'#statusAllocation'
},
"dormInfo.id":{
required:true
}
},
messages:{
snoAllocation:{
required:'请选择要分配的学生'
},
statusAllocation1:{
equalTo:'该宿舍已住满'
},
"dormInfo.id":{
required:'请选择院系'
}
},
submitHandler:function () {
func();
}
});
//下面这句代码加在你代码合适的地方,不一定非要放在这里
validate.resetForm();
}


标签:jquery,form,验证,required,resetForm,表单,validate,bug
From: https://blog.51cto.com/u_15961549/6054155

相关文章

  • 异步提交表单以及代码实现
    异步提交表单在此使用异步提交表单是为了获取服务器响应的数据,因为我们前台使用的是html作为视图层,不能够直接从servlet相关的域对象获取值,只能通过ajax获取响应数据regi......
  • jQuery遍历List对象
    jQuery遍历List对象在​​jQuery​​​中,可以使用​​each()​​​方法以一种非常直观的方式来模拟​​break​​​和​​continue​​​关键字的功能。只需在回调函数中编......
  • Hystrix Dashboard界面中jQuery报错Uncaught: TypeError: e.indexOf is not a functio
    1、问题描述  在使用SpringCloud整合HystrixDashboard组件监控Hystrix时控制台出现jQuery报错Uncaught:TypeError:e.indexOfisnotafunction,并且监控界面一直load......
  • javascript表单提交的内容显示在表格中
    实现三个文本域的内容提交之后显示在表格中,代码直接用文本文件运行,记得后缀改为.html运行结果输入123,并点击提交按钮之后,数据就会显示在下面的表格中,有什么问题可以私聊我......
  • 注册功能分析以及表单校验
    注册功能分析      表单校验表单校验:1.用户名:单词字符,8到20位长度2.密码:单词字符,8到20位长度3.email:邮件格式4.姓名:非空......
  • 08 Form表单组件
    Form表单组件form表单向后端提交数据时,需要对用户的输入做校验,比如校验用户是否输入,输入的长度和格式等正不正确。如果用户输入的内容有错误就需要在页面上相应的位置显示......
  • AJAX实现JQuery实现方式get&post
    AJAX-实现-JQuery实现方式-get&postGET<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/jquery-3......
  • 前端项目实战28-表单置空数据重置为null
     这样可以实现原来的值......
  • AJAX实现JQuery实现方式_ajax()
    AJAX-实现-JQuery实现方式-ajax()<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/jquery-3.3.1.m......
  • react实战笔记49:获取表单数据1
    利用onchange绑定数据......