jQuery Validate让普通按钮触发表单验证的方法


Posted in Javascript onDecember 15, 2016

 一般的表单校验都是直接注册在页面上的匿名函数,导致只能通过固定的提交方式触发表单校验,如果想自定义一个按钮触发表单校验如何实现呢?

目前写法:

$(function(){
 $("#form").validate({
  rules : {
   user_name : {
    required : true
   },
   ……
  },
  messages : {
   user_name : {
    required : '用户名必填',
   },
   ……
  }
 });
});

改写方法:

//编写表单验证函数validform,在验证按钮注册按钮点击事件内调用验证函数对象
function validform(){
 /*关键在此增加了一个return,返回的是一个validate对象,这个对象有一个form方法,返回的是是否通过验证*/
 return $("#form").validate({
  rules : {
   user_name : {
    required : true
   },
   ……
  },
  messages : {
   user_name : {
    required : '用户名必填',
   },
   ……
  }
 });
}
//注册表单验证
$(validform());
以上部分已经实现匿名函数的作用,下面介绍如何通过普通按钮实现表单验证
$("#btn").click(function(){
 if(validform().form()) {
  //通过表单验证,以下编写自己的代码
 } else {
  //校验不通过,什么都不用做,校验信息已经正常显示在表单上
 }
});

以上所述是小编给大家介绍的jQuery Validate让普通按钮触发表单验证的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 #Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 #Javascript
javascript数组去重方法分析
Dec 15 #Javascript
JS碰撞运动实现方法详解
Dec 15 #Javascript
浅述节点的创建及常见功能的实现
Dec 15 #Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 #Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 #Javascript
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
20个常用Python运维库和模块
2018/02/12 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Django模板语言 Tags使用详解
2019/09/09 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
班队活动设计方案
2014/01/30 职场文书
机械工程师岗位职责
2014/06/16 职场文书
敬老院标语
2014/06/27 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
党员自我评价范文2015
2015/03/03 职场文书
python和anaconda的区别
2022/05/06 Python