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 解疑
Nov 11 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
ES6字符串的扩展实例
Dec 21 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网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Python  连接字符串(join %)
2008/09/06 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Django开发中复选框用法示例
2018/03/20 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Django框架 querySet功能解析
2019/09/04 Python
Django框架模板用法入门教程
2019/11/04 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
上班打牌检讨书
2014/02/07 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
简单租房协议书
2014/10/21 职场文书
2014年组织部工作总结
2014/11/14 职场文书
九寨沟导游词
2015/02/02 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers