LigerUI 自动表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
    <link href="ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /> 
    <script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="ligerUI/js/ligerui.all.js" type="text/javascript"></script>
       
    <script src="jquery-validation/jquery.validate.min.js"></script>
    <script src="jquery-validation/jquery.metadata.js" type="text/javascript"></script>
    <script src="jquery-validation/messages_cn.js" type="text/javascript"></script>
       
    <style type="text/css">
        textarea{
            resize: none;
        }
        .l-verify-tip{ left:230px; top:120px;}
           
    </style>
</head>
<body>
    <form id="form2">
        <input type="submit" value="提交"/>
    </form>
</body>
<script type="text/javascript">
        var groupicon = "ligerUI/skins/icons/communication.gif";
        $(function ()
        {
            $.metadata.setType("attr", "validate");
            var v = $("#form2").validate({
                debug: true,
                
//                rules: {
//                    ProductName: "required"
//                },
//                messages: {
//                    ProductName: "Please enter your first name."
//                },
                errorPlacement: function (lable, element)
                {
                    if (element.hasClass("l-textarea"))
                    {
                        element.addClass("l-textarea-invalid");
                    }
                    else if (element.hasClass("l-text-field"))
                    {
                        element.parent().addClass("l-text-invalid");
                    }
                    $(element).removeAttr("title").ligerHideTip();
                    $(element).attr("title", lable.html()).ligerTip();
                       
                },
                success: function (lable)
                {
                    var element = $("#" + lable.attr("for"));
                       
                    if (element.hasClass("l-textarea"))
                    {
                        element.removeClass("l-textarea-invalid");
                    }
                    else if (element.hasClass("l-text-field"))
                    {
                           
                        element.parent().removeClass("l-text-invalid");
                    }
                    $(element).removeAttr("title").ligerHideTip();
                },
                   
                submitHandler: function ()
                {
                    console.log('submitHandler');
                    $("form .l-text,.l-textarea").ligerHideTip();
                    $.ligerDialog.success("Submitted!");
                }
            });
//           
            //创建表单结构
            $("#form2").ligerForm({
                inputWidth: 170, labelWidth: 90, space: 40,appendID: false,
                fields: [
                    { name: "ProductID", type: "hidden" },
                    { display: "产品名称", name: "ProductName", newline: true, type: "text" , group: "基础信息", groupicon: groupicon, attr: { id: 'ProductName' }, validate: { required: true, minlength:5, maxlength:8 }},
                    { display: "类别 ", name: "CategoryID", newline: true, type: "select", comboboxName: "CategoryName", options: { valueFieldID: "CategoryID", data: getCountryData() }, width: 240 },
                    { display: "日期 ", name: "AddTime", newline: true, type: "date"  },
                    { display: "折扣", name: "QuantityPerUnit", newline: false, type: "number" },
                    { display: "单价", name: "UnitPrice", newline: true,  type: "number" },
                    { display: "库存量", name: "UnitsInStock", newline: true, type: "digits", group: "库存", groupicon: groupicon },
                    { display: "订购量", name: "UnitsOnOrder", newline: false, type: "digits" },
                    { display: "备注", name: "Remark", newline: true, type: "text" ,width:470 }
                ],
                buttons:[
                    {
                        text: '提交',
                        type: 'submit'
//                        click: function(){
//                            console.log('Validate Start');
//                            $("form").validate({
//                                debug: true,
//                                errorPlacement: function (lable, element)
//                                {
//                                  
//                                   if (element.hasClass("l-textarea"))
//                                    {
//                                        element.ligerTip({ content: lable.html(), target: element[0] });
//                                    }
//                                    else if (element.hasClass("l-text-field"))
//                                    {
//                                        element.parent().ligerTip({ content: lable.html(), target: element[0] });
//                                    }
//                                    else
//                                    {
//                                        lable.appendTo(element.parents("td:first").next("td"));
//                                    }
//                                },
//                                success: function (lable)
//                                {
//                                   
//                                    lable.ligerHideTip();
//                                    lable.remove();
//                                },
//
//                                submitHandler: function ()
//                                {
//                                    $.ligerDialog.success("Submitted!");
//                                }
//                            });
//                            console.log('Validate End');
//                        }
                    }
                ]
            });
               
            function getCountryData() {
                return [
                { text: '中国', id: 'ZG' },
                { text: '德国', id: 'DG' },
                { text: '美国', id: 'MG' },
                { text: '澳大利亚', id: 'ADLY' },
                { text: '加拿大', id: 'JND' }
                ];
            }
               
        });
</script>
</html>


知识共享许可协议
《LigerUI 自动表单验证》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     151.94ms