• Jquery.Form和jquery.validate 的使用


    来自http://blog.163.com/zhi_qingfang@126/blog/static/11747756320125268035680/

    有些功能需要我们利用Ajax技术进行POST提交表单,这时候就需要用到jquery.Form ,它有两种方式进行提交, AjaxFormAjaxSubmit方式。

               AjaxForm 方式必须先绑定表单,它一般在$(document).ready(function () {}里定义,它能让表单不刷新页面的情况下POST到目标。
    如:
                        $(document).ready(function () {
                      $("#UpdateForm").ajaxForm(function(){
                              Alert(AjaxForm提交完成”)
                      }); 
             }

    AjaxSubmit方式是以相应事件来通过Ajax方式提交表单,比如单击某个按钮触发该表单的提交

    如:

    $(#btnTest).click(function(){
              $("#UpdateForm").AjaxSubmit (function(){
                     Alert(AjaxForm提交完成”)
             }); 
    })
    一、参数说明
    1)BeforeSubmit

    BeforeSubmit参数用来在表单提交到Server之前 验证其数据的合法性,如果提交之前执行的回调函数返回False,表单的提交将会终止。

    2)Success
         Success参数表单提交完成之后执行
     
    二、API接口说明
    1) FormSerialize
    将表单序列化成查询串。这个方法将返回一个形如: name1=value1&name2=value2的字符串。
    如:
                         var queryString = $('# myFormId).formSerialize();
    等效于var queryString = $.param(formData)方法
    这两个方法返回的值是相同的
     
    2) fieldSerialize
    将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。这个方法将返回一个形如: name1=value1&name2=value2的字符串。
    var queryString = $('#myFormId .specialFields').fieldSerialize();
    specialFields是该元素的Class
     
    3) fieldValue
    取出所有匹配要求的域的值,以数组形式返回。 0.91 版本开始, 这个方法始终返回一个数组。如果没有符合条件的域,这个数组将会是个空数组,否则它将会包含至少一个值。
                         var value = $('# myFormId':password').fieldValue();
              alert('The password is: ' + value[0]);
     
    4) resetForm
    通过调用表单元素的内在的DOM 上的方法把表单重置成最初的状态。
    $('#myFormId').resetForm();
     
    5) clearForm
    清空表单所有元素的值。这个方法将会清空所有的文本框,密码框,文本域里的值,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。
    $('#myFormId').clearForm();
     
    6) clearFields
    清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。
    $('#myFormId .specialFields').clearFields();
    specialFields是该元素的Class
     
     
    三、Server端返回格式处理
     
    1)Json格式

    在设置返回Json格式时,要设置OptionDataType格式如下

    dataType: 'json',
    JS验证成功到Server端代码
     if (ModelState.IsValid)
     { 
        return Json(new { a = "a", b = "b" });
    }

    Form提交完成之后success方法将被执行,responseText responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型)

      success: function (responseText, statusText, xhr, $form) {
                    alert(responseText.a);
                }
     
    2)XML格式

    在设置返回XML格式时,要设置OptionDataType格式如下

      dataType: 'xml',
    JS验证成功到Server端代码:
     //返回一个XML类型 
      string xmlString = "<?xml version="1.0" encoding="gb2312" ?><tree id="0"><item text="北京欢迎你"/></tree>";
      return this.Content(xmlString, "text/xml"); 

    Form提交完成之后success方法将被执行

      success: function (responseText, statusText, xhr, $form) {
                      alert(xhr.responseText) 
                }
    3)HTML格式

    在设置返回HTML格式时,要设置OptionDataType格式如下

      dataType: HTML,
    JS验证成功到Server端代码:
       string htmlString = "<div style="background:red">Test<div>";
                return Content(htmlString);

    Form提交完成之后success方法将被执行

      success: function (responseText, statusText, xhr, $form) {
                      alert(responseText) 
                }
     

    jquery.validate 使用

     

    一、使用Jquery.Validate进行验证方法
    $(document).ready(function () {
    
    
     
            $("#pageForm").validate({
    
    
                rules: {
    
    
                    DictKey: { required: true, maxlength: 10 },
                    DictContent: { required: true, maxlength: 10 }
                },
                messages: {
    
    
                    DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },
                    DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }
                },
                submitHandler: function (form) {
                    form.submit();
                }
            })
    })

    DictKey DictContent:指需要验证的控件ID

    submitHandler :指通过验证后运行的函数,里面写入表单要提交的函数,否则表单不会提交

     

    二、列出常用默认验证规则

    (1)required:true               必输字段
    (2)email:true                 
    必须输入正确格式的电子邮件
    (3)url:true                   
    必须输入正确格式的网址
    (4)date:true                  
    必须输入正确格式的日期
    (5)dateISO:true               
    必须输入正确格式的日期(ISO),例如:2009-06-231998/01/22 只验证格式,不验证有效性
    (6)number:true                
    必须输入合法的数字(负数,小数)
    (7)digits:true                
    必须输入整数
    (8)creditcard:                
    必须输入合法的信用卡号
    (9)equalTo:"#field"          
    输入值必须和#field相同
    (10)accept:                   
    输入拥有合法后缀名的字符串(上传文件的后缀)
    (11)maxlength:5               
    输入长度最多是5的字符串(汉字算一个字符)
    (12)minlength:10              
    输入长度最小是10的字符串(汉字算一个字符)
    (13)rangelength:[5,10]        
    输入长度必须介于 5 10 之间的字符串")(汉字算一个字符)

    (14)equalLength:10            输入长度必须是10
    (14)range:[5,10]              
    输入值必须介于 5 10 之间
    (15)max:5                     
    输入值不能大于5
    (16)min:10                    
    输入值不能小于10

     

    三、使用ajax方法验证输入值是否存在
    当文本框输入值时,或改变输入值时会自动到Server去验证输入值是否在数据库中存在
    JS代码如下 
    DictKey: { required: true, maxlength: 10,
                        remote: { //验证用户名是否存在
                            type: "POST",
                            url: '@Url.Content("~/Account/Test/")' //servlet
                          
                        }
                    },
    DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
     

    Server端:

     [HttpPost]
            public JsonResult Test(string DictKey)   //DictKey即要验证控件的ID
            {
                bool result;
                if (DictKey == "a")
                {
                    result = true;
                }
                else
                {
                    result = false;
                }
                return Json(result);
            }

    根据Server端返回的True,False来决定验证是否通过

     

    四、非submit按钮结合Jquery.Form进行提交

    如果不是submit提交按钮,比如单击某个按钮触发表单验证,这时表单验证可用如下方式

    function validateForm() {     

       //validate方法参数可选     

       return $("#form1").validate({     

           rules: {     

           },     

           messages:{     

           }

            }).form();     

    }     

    function doSubmit(){     

        //do other things     

        //验证通过后提交     

         if(validateForm()){     

            form.submit()     

    //这边可以结合Jquery.Form进行AjaxSubmit方式异步提交

               $("#UpdateForm").AjaxSubmit (function(){
                              Alert(AjaxForm提交完成”)
                     }); 

        }    


  • 相关阅读:
    适配器设计模式初探(Java实现)
    装饰器设计模式初探及Java中实际应用举例
    主要介绍JavaEE中Maven Web 项目的结构及其它几个小问题
    基于alibaba开源的分布式数据同步系统安装配置文档otter之manager单实例配置
    基于alibaba开源的分布式数据同步系统安装配置文档otter之环境配置
    zabbix监控redis DB key的总数量
    C#操作Access数据库(创建&修改结构)
    WebDev.WebServer.exe遇到问题需要关闭
    DataSet
    ADO.NET
  • 原文地址:https://www.cnblogs.com/eterwei/p/3651902.html
Copyright © 2020-2023  润新知