一周乱弹: jquery validate 手动触发方式
来源:互联网 发布:网王之数据涟漪了 编辑:程序博客网 时间:2024/06/07 14:46
jquery validate 手动触发方式
1,onkeyup 键盘离开
2,onfocusout 失去焦点
3,valid()方法手动调用
但如果直接按照文档中的用法来用onkeyup和onfocusout会出现:SCRIPT438: 对象不支持“call”属性或方法 这个错误
要写成:
onfocusout/onkeyup的默认值是false,如果需要开启对当前文本域的验证,则应该写成:
onfocusout: function(element) { $(element).valid(); }onkeyup: function(element) { $(element).valid(); }
valid()就很好理解了,直接根据id或者其它元素选择器调用就可以了。
栗子:
HTML:
<form class="form-horizontal" role="form" id="type-reward-form-1" action="mvc/onDuty/onDuty_set_ondutyType.json" method="post"> <div class="well"> <div class="form-group"> <%--隐藏域--%> <input type="hidden" name="id"> <%--类型--%> <input type="hidden" name="type" value="1"> <%--角色报酬--%> <input type="hidden" name="typeRewardJson" id="dailysJson"> <div class="col-sm-12"> <p><span>日常值班:</span>中午<input type="text" name="startTime" id="daily-start1-dutyTime" class="myInputWidth ">至<input type="text" name="endTime" id="daily-end1-dutyTime" class="myInputWidth "> 晚上:<input type="text" name="startTime2" id="daily-start2-dutyTime" class="myInputWidth ">至<input type="text " name="endTime2" id="daily-end2-dutyTime" class="myInputWidth "></p> </div> </div> <div class="form-group"> <div class="col-sm-12"> <p>角色A:<input type="number" name="dailyA" id="dailyA" class="myInputWidth" required> 角色B:<input type="number" id="dailyB" name="dailyB" class="myInputWidth "> 角色C:<input type="number" id="dailyC" name="dailyC" class="myInputWidth "> 角色D:<input type="number" id="dailyD" name="dailyD" class="myInputWidth "> 角色E:<input type="number" id="dailyE" name="dailyE" class="myInputWidth "> </p> </div> </div> </div> </form>
JS:
//验证类型报酬表单 $("#type-reward-form-1").validate({ onfocusout: function(element) { var res = $(element).valid(); if(!res) { $(element).css("border-color", "red"); }else { $(element).removeAttr("style"); } }, rules : { startTime : { required : true }, endTime : { required : true }, startTime2 : { required : true }, endTime2 : { required : true }, dailyA : { required : true }, dailyB : { required : true }, dailyC : { required : true }, dailyD : { required : true }, dailyE : { required : true }, }, }); // 或者点击保存时手动调用 //提交表单 function submitDutyInfo() { var dailyForm = $("#type-reward-form-1").valid();//dailyForm 为布尔类型 }
效果:
阅读全文
0 0
- 一周乱弹: jquery validate 手动触发方式
- 一周乱弹(1,jquery窗口变化触发的方法。2,Intellij出现 java.lang.OutOfMemory)
- jQuery Validate 触发机制
- Jquery手动触发事件
- jQuery手动触发事件
- 触发jquery.validate方法验证
- Jquery插件-Validate使用方式
- jQuery 绑定 select 联动 手动触发
- jQuery事件触发和js手动触发事件
- 一周乱弹 2012-07-15
- 一周乱弹(eclipse git重复输入密码、jQuery自动补全)
- 一周乱弹(1,jQuery vilidate验证表单隐藏域2,nivoSlider调整图片大小)
- jquery validate让普通按钮触发表单验证
- jquery.validate手动调用校验,方便ajax请求
- jQuery Validate自定义验证方法实现方式
- jquery的validate插件验证方式
- 【jQuery】调用trigger()方法手动触发指定的事件
- 【JQuery】调用trigger()方法手动触发指定的事件
- 如何打造自己的pe呢?微软官方WinPE的制作流程
- 运用XML建立零件BOM
- Mybatis的sql封装
- 牛牛的数值变换
- 配置项---java环境变量的配置
- 一周乱弹: jquery validate 手动触发方式
- springboot使用AOP
- Oracle 11g数据库详细安装步骤图解
- 输出9 * 9乘法口诀
- springboot使用拦截器
- Qt客户服务端传输数据总结
- leetcode-第十七周
- Pagodas --(hdu5512)2015ACM/ICPC亚洲区沈阳站
- 欢迎使用CSDN-markdown编辑器