JQuery表单验证+ligerUI自动表单

来源：互联网发布：宁波奥凯网络怎么样编辑：程序博客网时间：2024/04/30 02:54

一、JQuery 表单验证插件——Validation

Validation是历史悠久的JQuery插件之一，经过多年的项目验证，得到了开发者的一致好评。

1、特点：

1）内置验证规则：拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则

2）自定义验证规则：可以很方便自定义验证规则

3）简单强大的验证信息提示：默认了验证信息提示，并支持自定义提示信息覆盖默认提示

4）实时验证：可以通过keyup（每次按键时）或blur（当控件失去焦点时）事件触发验证，而不仅仅是在表单提交的时候验证

2、使用步骤

（1）引入JQUery库和Validation插件

   <script src="../lib/jquery/jquery.js" type="text/javascript"></script>
   <script src="../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
    <script src="../lib/jquery-validation/messages_cn.js" type="text/javascript"></script>

（2）设定验证规则(项目实例)

   $('#form').validate({
                event: "keyup",
                rules: {
                    ApplTimelength: { required: true, digits: true, maxlength: 4 },
                    LeaderSelect: { required: true },
                    Reason: { required: true, maxlength: 100 },
                    Type: { required: true }
                },
                messages: {
                    ApplTimelength: {
                        required: "请输入借阅天数",
                        digits: "时间必须为整数",
                        maxLength: "时间不能长于4位"
                    },
                    LeaderSelect: {
                        required: "请选择审批领导"
                    },
                    Reason: {
                        required: "请输入借阅理由",
                        maxLength: "字数不能超过100"
                    },
                    Type: {
                        required: "请选择借阅类型"
                     }
                },
                errorPlacement: function (lable, element) {
                    element.ligerTip({ content: lable.html(), appendIdTo: lable });
                },
                success: function (lable) {
                    lable.ligerHideTip();
                }
            });
 

代码说明：
1.event 是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发
2.如果在提交前还需要进行一些自定义处理使用submitHandler 参数，其它的都比较简单，详细信息可在API中查阅.
3.debug 如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便.
4.rules 所有的检验规则都写在这个参数里面.
校验规则参数格式为：
ID:{rule1,rule2,...}
(1) required: true 必输
(2) number: true 只能输入数字(包括小数)
(3) digits:true 只能输入整数
(4) minValue: 3 不能小于3
(5) maxValue: 100 最大不超过100
(6) rangeValue:[50,100] 值范围为50-100
(7) minLength: 5 最小长度(汉字算一个字符)
(8) maxLength: 10 最大长度(汉字算一个字符)
(9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
(10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
(11) email:true 电子邮件
(12) equalTo: "#field" 与#field值相同
(13) dateISO:true 日期型，格式为1998/01/22 1999-12-12
 
5.messages ，自定义错误信息，格式与rules类似，需要注意的是如果使用此项，那么所有的校验项都必需自定义出错信息，如果只想定义其中的某一些，那么就把其它的出错信息定义为空（即""），系统即会使用默认值。

扩展：

（一）自定义校验规则

可以通过自定义检验函数的方式新增加校验规则，步骤如下：
1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息

    将校验规则写到控件中将校验规则写到控件中//这里定义了一个名为equal的规则
    //value是指当前校验域的值
    //element是指当前检验的域
    //param是指在rules中设定的参数
    //这三个参数会在进行校验时由系统自动带入
    $.validator.methods.equal = function(value, element, param){
        //在这里使用上面的三个参数进行校验
        if(value == param) return true;
        //如果当前域的值等于指定的参数就通过校验
    };
    $('#form1').validate({
    rules:{
          field1:{equal:20 }//在这里指定field1的检验规则是equal，并且参数是20
        },
        messages:{
          field1:{equal:'您的计算有误！'}//在这里定义field1的equal规则校验出错后的提示信息
        }
    });

（二）将校验规则写到控件中

有时候我们的控件是动态生成的，这个时候就不可能提前先写好校验规则，需要在生成控件的同时写校验规则.
这样写校验规则有两种写法，一是将规则写到class属性中，二是将规则写到单独的validate属性中，其中：
写到class属性的写法如下，例子中在规则前添加了名为some, other, styles 的三个class：


<script src="../js/jquery.js" type="text/javascript" />
<script src="../js/jquery.validate.js" type="text/javascript" />
<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" class="{required:true}"</textarea> 
 
另外一种写法如下，使用自定义的validata属性，但必需加载jquery.metadata.js 这个文件
<script src="../js/jquery.js" type="text/javascript" />
<script src="../js/jquery.metadata.js" type="text/javascript" />
<script src="../js/jquery.validate.js" type="text/javascript" />
<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" /> 
 
二、ligerUI自动创建表单
    var data = [
            { id: '0', text: '在线浏览' },
            { id: '1', text: '实体借阅' }
            ];
     var mainform = $("#form");
     mainform.ligerForm({
         inputWidth: 280,
         validate: true,
         fields: [
         { display: "借阅类型", name: "Type", newline: true, labelWidth: 100, width: 120, space: 30, type: "select", comboboxName: "Type", 
   options: { data: data} //获取自定义数据
},
         { display: "借阅时长(天数)", name: "ApplTimelength", newline: true, labelWidth: 140, width: 80, space: 30, type: "text", options: { type: "int", isNegative: false} },
         { display: "借阅理由", name: "Reason", newline: true, labelWidth: 100, width: 320, space: 30, type: "textarea" },
         { display: "选择审批人", name: "LeaderSelect", newline: true, labelWidth: 140, space: 30, type: "select", comboboxName: "LeaderSelect",
 options: {//后台获取数据
             url: "../handler/LeaderSelect.ashx?deptid=" + deptID,
             valueField: 'ID',
             textField: 'Name'
         }
        }
            ],
       toJSON: JSON2.stringify
 }); 
相关参数说明：
ligerUI API：http://api.ligerui.com/
 
三、判断验证是否通过并提交
方法一：
submit 按钮
通不过submit按钮方法，会调用jquery的验证，如果验证不成功就不可以提交。


方法二：
 
通过JS方法，通过jquery的valid()方法判断表单是否通过验证，如果验证通过则提交表单数据。
function checkvalidate(){
     if($("#form1").valid()){
     $("#form1").submit();
 } 
 
方法三：综合方案（项目中使用）
  $("#save").bind('click', function () {
                if ($("#form").valid()) {//判断验证是否通过
                    var form = liger.get("form");
                    var data = form.getData();//提取form中的数据
                    data = liger.toJSON(data);
                    $.ajax({
                        load: "正在加载.....",
                        type: "post",
                        url: "../handler/AddApplication.ashx",
                        data: { "item": data },
                        success: function (appid) {
                            if (appid) {
                                var datas = grid.getSelecteds();    //获取Grid表格选中的行数据集合,同getSelectedRows
                                for (var index in datas) {
                                    var Appid = appid;
                                    var Id = datas[index]["ID"];
                                    var Description = datas[index]["Description"];
                                    var FileType = datas[index]["FileType"];
                                    var Unit = datas[index]["Unit"];
                                    $.ajax({
                                        load: "正在加载.....",
                                        type: "post",
                                        datatype: "json",
                                        url: "../handler/InsertApplication.ashx",
                                        data: { "id": Id, "appid": Appid, "description": Description, "filetype": FileType, "unit": Unit },
                                        success: function (resualt) {
                                            if (resualt) {
                                            }
                                        },
                                        error: function (message) {
                                            alert(message);
                                        }
                                    })
                                }
                                $.ajax({
                                    url: "../handler/ClearSession.ashx",
                                    data: { "SessionName": "cart" },
                                    success: function (resualt) {
                                        alert("添加成功");
                                        window.location.href = "../ArchiveBorrow/Applicant.aspx";//跳转页面
                                    },
                                    error: function (message) {
                                        alert(message);
                                    }
                                })
                            }
                        },
                        error: function (message) {
                            alert(message);
                        }
                    })
                }
            });  //按钮 
此项目中的方案是，首先判断表单验证是否通过，如果通过就分别获取此页面的表单form数据和表格grid数据，然后提交给后台进行相应处理。其中嵌套了三个ajax方法，设计非常严密，值得我们学习！
 
html代码：
<body>
    <div>
        <form  id="form" method = "post" action="">
        </form>
        <div class="right">
            <input type="button" id="save" value="提交申请" />
        </div>
         <br/>
        <div id = "grid" ></div>
    </div>  
</body>

0 0