jquery.validate 表单验证管理

最新推荐文章于 2025-12-02 17:50:12 发布

转载最新推荐文章于 2025-12-02 17:50:12 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lvcreator/blog/184573

文章标签：

#xhtml #javascript #python #ViewUI

本文介绍了一个使用jQuery实现的表单验证示例，通过不同按钮触发创建、编辑及返回事件，并根据不同事件调整表单验证规则。

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/lvcreator/blog/184573