一周乱弹: 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 "> &nbsp;&nbsp; &nbsp;&nbsp;                                    晚上:<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 为布尔类型          }  

效果:
这里写图片描述

原创粉丝点击