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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
js获取div高度的代码
Aug 09 Javascript
javascript radio 联动效果
Mar 04 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
微信小程序点击保存图片到本机功能
Dec 13 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python实现决策树分类
2018/08/30 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python读取实时数据流示例
2019/12/02 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
推荐信模板
2014/05/09 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
教师调动申请报告
2015/05/18 职场文书
植物园观后感
2015/06/11 职场文书
高中开学感言
2015/08/01 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python