表单元素验证的几种场景

表单验证在项目中使用还是比较多的,常见的场景我尝试着综合一下,只选取两个例子:

1,简单的表单验证:

    // 表单验证
    $inputForm.validate({
        rules: {
            consignee: "required",
            areaId: "required",
            address: "required",
            zipCode: {
                required:true,
                pattern:/^[0-9]{6}$/
            },
            phone: {
                required:true,
                pattern:/(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/
            }
        }
    });

2,表单提交时进行验证:

// 表单验证
    $inputForm.keypress(function(event){
        if(event.keyCode !=13 ){
            $inputForm.validate({
                rules: {
                    productCategoryId: "required",
                    name: "required",
                    sn: {
                        pattern: /^[0-9a-zA-Z_-]+$/,
                        remote: {
                            url: "check_sn.jhtml",
                            cache: false
                        }
                    },
                    price: {
                        required: true,
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    electronicPrice: {
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    cost: {
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    overReadFiguresj: {
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    overReadBook: {
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    overReadFigure: {
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    marketPrice: {
                        min: 0,
                        decimal: {
                            integer: 12,
                            fraction: ${setting.priceScale}
                        }
                    },
                    thcj: {
                        pattern:/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
                    },
                    thzj: {
                        pattern:/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
                    },
                    grossWeight: {
                        pattern:/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
                    },
                    netWeight: {
                        pattern:/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
                    },
                    importDate: {
                        pattern: /^[1-2][0-9][0-9][0-9][0-1]{0,1}[0-9][0-3]{0,1}[0-9]$/,
                    },
                    weight: "digits",
                    preEntryNumber: "digits",
                    pieces: "digits",
                    stock: "digits",
                    thhh: "digits",
                    thbb: "digits",
                    //thfd: "digits",
                    //thsl: "digits",
                    thsp: "digits",
                    thbeian: "digits",
                    point: "digits",
                    pages: "digits",
                    words: "digits"
                },
                messages: {
                    sn: {
                        pattern: "${message("admin.validate.illegal")}",
                        remote: "${message("admin.validate.exist")}"
                    }
                },
                submitHandler: function(form) {
                    var isRepeats1 = null;
                    var parameters1 = new Array();
                    $timePriceTable.find(".timePriceValueTr").each(function() {
                        var tdArr = $(this).children();
                        var parameter = tdArr.eq(0).find("span").text();
                        if ($.inArray(parameter, parameters1) >= 0) {
                            $.message("warn", "${message("admin.product.timePriceValueRepeat")}");
                            isRepeats1 = true;
                            return false;
                        } else {
                            parameters1.push(parameter);
                        }
                    });
                    if ($specificationIds.filter(":checked").size() > 0 && $specificationProductTable.find("tr:gt(1)").size() == 0) {
                        $.message("warn", "${message("admin.product.specificationProductRequired")}");
                        return false;
                    } else {
                        var isRepeats0 = false;
                        var parameters0 = new Array();
                        $specificationProductTable.find("tr:gt(1)").each(function() {
                            var parameter = $(this).find("select").serialize();
                            if ($.inArray(parameter, parameters0) >= 0) {
                                $.message("warn", "${message("admin.product.specificationValueRepeat")}");
                                isRepeats0 = true;
                                return false;
                            } else {
                                parameters0.push(parameter);
                            }
                        });
                        if (!isRepeats0&&!isRepeats1) {
                            $specificationProductTable.find("tr:eq(1)").find("select").prop("disabled", true);
                            addCookie("previousProductCategoryId", $productCategoryId.val(), {expires: 24 * 60 * 60});
                            form.submit();
                        }
                    }
                }
            });
        }else{
            return false;
        }
    });
时间: 2024-10-08 10:27:52

表单元素验证的几种场景的相关文章

获取form表单元素值的4种方式

<html><head><title></title><script type="text/javascript"> function checkForm(){ var name=document.form1.number.value; //or form1.number.value var name=document.forms[0].number.value; var name=document.forms[0]['num

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

第 10 章 表单元素[下]

学习要点: 1.其他元素 2.输入验证 主讲教师:李炎恢 本章主要探讨 HTML5 中表单中剩余的其他元素,然后重点了解一下表单的输入验证功能. 一.其他元素 表单元素还剩下几个元素没有讲解,包括下拉框列表 select.多行文本框 textarea.和 output 计算结果元素. 元素名称 说明 select 生成一个下拉列表进行选择 optgroup 对 select 元素进行编组 option select 元素中的项目 textarea 生成一个多行文本框 output 表示计算结果

第十章 表单元素(下)

第 10章表单元素[下]学习要点:1.其他元素2.输入验证 本章主要探讨 HTML5中表单中剩余的其他元素,然后重点了解一下表单的输入验证功能.一.其他元素表单元素还剩下几个元素没有讲解,包括下拉框列表 select.多行文本框 textarea.和 output计算结果元素. 元素名称 说明select 生成一个下拉列表进行选择optgroup 对 select元素进行编组option select元素中的项目 textarea 生成一个多行文本框output 表示计算结果 1.生成下拉列表<

第10章 表单元素(中)

第 10章表单元素[中]学习要点:1.type属性总汇2.type属性解析 本章主要探讨 HTML5中表单中 input元素的 type属性,根据不同的值来显示不同的输入框.一.type属性总汇input元素可以用来生成一个供用户输入数据的简单文本框.在默认的情况下,什么样的数据均可以输入.而通过不同的属性值,可以限制输入的内容. 属性名称 说明text 一个单行文本框,默认行为password 隐藏字符的密码框search 搜索框,在某些浏览器键入内容会出现叉标记取消submit.reset.

表单的验证:客户端验证和服务器端验证

表单的验证:客户端验证和服务器端验证 表单的确认 客户端确认: 减少服务器负载 缩短用户等待时间 兼容性难 服务器端确认: 统一确认 兼容性强 服务器负载重 客户端验证例子 首先建立一个表单,在其提交时用JavaScript方法进行验证,若该方法返回true,则进行表单的提交,若返回false,则表单不提交. <!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false,那么表单是不会提交的 --> <form onsubmit="return

H5 表单元素

HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No datalist 元素 datalist 元素规定输入域的选项列表. 列表是通过 dat

表单元素的submit()方法和onsubmit事件

1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submit"的元素 这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(