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 28 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python实现时钟显示效果思路详解
2018/04/11 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
七年级作文之秋游
2019/10/21 职场文书