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类库D
Oct 24 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
vue.js封装switch开关组件的操作
Oct 26 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 魔术函数使用说明
2010/02/21 PHP
file_get_contents("php://input", "r")实例介绍
2013/07/01 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python调用私有属性的方法总结
2020/07/24 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python re.match()用法相关示例
2021/01/27 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
行政管理毕业生自荐信
2014/02/24 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
暑假安全保证书
2015/02/28 职场文书
python 镜像环境搭建总结
2022/09/23 Python