jquery.validate 表单验证管理

原创
2013/12/15 17:12
阅读数 206

JS版本:1.4.2

JV版本:1.10.0

如果JV版本较高的话,基于 JS 1.4.2 将会初始化失败。

参照下例,创建、编辑、返回按钮事件处理在同一个表单中。利用 rules() 的参数 "add" "remove" 功能,来精确控制到事件对应的项目检查上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>当前模式:设计 - 编码管理</title>
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <script type="text/javascript">
        // 信息设置
        jQuery.extend(jQuery.validator.messages, {
            required: "此为必填字段。"
        });

        // jQuery Loading
        $(document).ready(function() {

            // 表单验证初始化
            $("#EcudForm").validate();

            // 创建事件处理
            $("#butnCrte").click(function() {
                chckByEvntMage("CRTE");
                alert("CRTE : " + $("#EcudForm").valid());
                $("#EcudForm").submit();
            });

            // 编辑事件处理
            $("#butnEdit").click(function() {
                chckByEvntMage("EDIT");
                alert("EDIT : " + $("#EcudForm").valid());
                $("#EcudForm").submit();
            });

            // 返回事件处理
            $("#butnBack").click(function() {
                chckByEvntMage("BACK");
                alert("BACK : " + $("#EcudForm").valid());
                $("#EcudForm").submit();
            });
        });

        // 事件检查项目控制
        function chckByEvntMage(evntType) {

            // 创建事件处理时,追加编码ID的检查属性
            if ("CRTE" == evntType) {
                $("#codeName").rules("remove");
                $("#codeId").rules("add", {required:true});
            } else if ("EDIT" == evntType) {
                $("#codeId").rules("remove");
                $("#codeName").rules("add", {required:true});
            } else {
                $("#codeId").rules("remove");
                $("#codeName").rules("remove");
            }
        }
        </script>
    </head>

    <body>
    <form id="EcudForm">
        编码ID:<input type="text" id="codeId" name="codeId"/><br/>
        编码名称:<input type="text" id="codeName" name="codeName"/>
        <hr/>
        <input type="button" id="butnCrte" value="CRTE"/>
        <input type="button" id="butnEdit" value="EDIT"/>
        <input type="button" id="butnBack" value="BACK"/>
    </form>
    </body>
</html>

展开阅读全文
打赏
0
13 收藏
分享
加载中
更多评论
打赏
0 评论
13 收藏
0
分享
返回顶部
顶部