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 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
学习javascript文件加载优化
Feb 19 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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分页显示制作详细讲解
2006/12/05 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
中学校庆方案
2014/03/17 职场文书
新学期教师寄语
2014/04/02 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
2014年施工员工作总结
2014/11/18 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Pytest allure 命令行参数的使用
2021/04/18 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python