如何驗證表單意味着電子郵件，名稱，電話號碼，描述在jqgrid

Question

你如何驗證表單（電臺，密碼，textfeild，下拉，textarea，電子郵件，電話號碼）在jqgrid？另外，如何增加和減少添加彈出框的大小？

var mydata =[ 
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf"}, 
{id:"LST 0457",employe:"naveena",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf"}, 
{id:"LST 0458",employe:"anil",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf"}, 
{id:"LST 0459",employe:"ajay",role:"employee",department:"developer",joinedate:"june12th",gender:"male",description:"fdggf"}, 
{id:"LST 0456",employe:"praveesha",role:"employee",department:"developer",joinedate:"june12th",gender:"female",description:"fdggf"}] 


$(document).ready(function() { 
     setupGrid(); 
     option(); 
     attachDeleteButton(); 
    });  

    //Build radio button 
function radioelem(value, options) { 
    var receivedradio = '<input type="radio" name="receivednaradio" value="Male"'; 
    var breakline = '/>Male<br>'; 
    var naradio = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="receivednaradio" value="Female"'; 
    var endnaradio = '/>Female<br>'; 
    if (value == 'Male') { 
     var radiohtml = receivedradio + 'checked="checked"' + breakline + naradio + endnaradio; 
     return radiohtml; 
    } 
    else if (value == 'Female') { 
     var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio; 
     return radiohtml; 
    } 
    else { 
     return receivedradio + breakline + naradio + endnaradio; 
    } 
}; 

function radiovalue(elem, operation, value) { 
    if (operation === 'get') { 
     return $(elem).val(); 
    } else if (operation === 'set') { 
     if ($(elem).is(':checked') === false) { 
      $(elem).filter('[value=' + value + ']').attr('checked', true); 
     } 
    } 
};  



function dataSentOK(){ 
    jQuery("#navgrid4").jqGrid().trigger("reloadGrid"); 
} 



function setupGrid(){ 
jQuery("#navgrid4").jqGrid({ 
url:'editing.php?q=1', 
data:mydata, 
postData: sopt, 
datatype:"local", 
colNames:['Id','Employee Name','gender','Role','Department','Join Date','Description'], 

    colModel:[ 
    {name:'id',index:'id', width:55, editable:false,editrules:{required:true},searchoptions:{sopt: ['eq', 'ne']}},    
    {name:'employe',index:'employe', width:90,editable:true,formoptions:{rowpos:2,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"},editrules:{required:true}}, 
    {name:'gender',index:'gender', width:55,editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue},formoptions:{rowpos:4,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}}, 
    {name:'role',index:'role', width:100,editable:true,edittype:"select", 
     editoptions:{dataUrl:'test.txt', defaultValue:'Intime'}, 
     formoptions:{rowpos:3,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }}, 
    {name:'department',index:'department', width:80, align:"right",editable:true,edittype:"select", 
     editoptions:{dataUrl:'test.txt', defaultValue:'Intime'}, 
     formoptions:{rowpos:5,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;" }}, 
    {name:'joinedate',index:'joinedate', width:80, 
     editable:true, 
     editoptions:{size:12, 
      dataInit:function(el){ 
       $(el).datepicker({dateFormat:'yy-mm-dd '}); 
      }, 
      defaultValue: function(){ 
       var currentTime = new Date(); 
       var month = parseInt(currentTime.getMonth() + 1); 
       month = month <= 9 ? "0"+month : month; 
       var day = currentTime.getDate(); 
       day = day <= 9 ? "0"+day : day; 
       var year = currentTime.getFullYear(); 
       return year+"-"+month + "-"+day;     
      } 
     }, 
     formoptions:{ rowpos:6,elmsuffix:" yyyy-mm-dd", elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}, 
     editrules:{required:true} 
    },  
    {name:'description',index:'description', width:55, editable:true,editrules: {required:true},formoptions:{rowpos:7,elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}}, 

], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pagernav4', 
    sortname: 'employe', 
    mtype: 'GET', 
    viewrecords: true, 
    sortorder: "desc",  
    caption:"Navigator Example", 
    editurl:"someurl.php", 
    multiselect:true, 
    height:350, 
    width:600 
    }); 
jQuery("#navgrid4").jqGrid('navGrid','#pagernav4', 
{view:true,add:true,search:true, multipleSearch: true,edit:true}, 

{jqModal:true,checkOnUpdate:true,savekey: [true,13], navkeys: [true,38,40], checkOnSubmit:true, closeOnEscape:true,bottominfo:"Fields marked with (*) are required"}); 
} 

在上面的代碼

我想補充驗證這些精密組件的精密組件請回復我

感謝adavance你可以做你的驗證

Answer 1

一種方式是通過建立和事件處理程序對每個您要驗證的列數據。

例如：

$self.jqGrid("setColProp", "ColumnName", { 
        editoptions: { 
         dataEvents: [ 
           { 
            type: 'blur', ---> Event 
            fn: function (e) { 
             var rowId = $(e.target).closest('tr.jqgrow').attr('id'); 
             var row = $(e.target).closest('tr.jqgrow'); 
             var RowData = $("#tablename").getRowData(rowId); 
             var Param1 = RowData.ColumnName; 

             Write your validation logic here 

            } 
           } 
           ] 
        } 
       }); 

您可以使用常規experssions驗證

希望這有助於..

注：該事件可以是模糊或改變或任何東西取決於控制