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字符串函数String.replace()
Apr 07 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
深入理解js中this的用法
May 28 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
JS实现鼠标移动拖尾
Dec 27 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
详解python分布式进程
2018/10/08 Python
实例详解Python装饰器与闭包
2019/07/29 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
教师实习自我鉴定
2013/12/14 职场文书
自立自强的名人事例
2014/02/10 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
学前班教学反思
2016/02/24 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python