Jquery 验证表单在jqgrid中如何表示电子邮件、姓名、电话号码和描述

如何在jqgrid中验证表单（无线框、密码、文本字段、下拉列表、文本区域、电子邮件、电话号码）？另外，如何增加和减少AddPopuBox的大小

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"});
}

var mydata=[
{id:“LST 0456”，雇员：“praveesha”，角色：“雇员”，部门：“开发商”，合并日期：“6月12日”，性别：“女性”，描述：“fdggf”}，
{id:“LST 0457”，雇员：“naveena”，角色：“雇员”，部门：“开发商”，合并日期：“6月12日”，性别：“女性”，描述：“fdggf”}，
{id:“LST 0458”，雇员：“anil”，角色：“雇员”，部门：“开发商”，合并日期：“6月12日”，性别：“男性”，描述：“fdggf”}，
{id:“LST 0459”，雇员：“ajay”，角色：“雇员”，部门：“开发商”，合并日期：“6月12日”，性别：“男性”，描述：“fdggf”}，
{id:“LST 0456”，雇员：“praveesha”，角色：“雇员”，部门：“开发商”，合并日期：“6月12日”，性别：“女性”，描述：“fdggf”}]
$（文档）.ready（函数（）{
setupGrid（）；
选项（）；
attachDeleteButton（）；
});     
//构建单选按钮
功能radioelem（值、选项）{
var receivedradio='男性
'；
var naradio='女性
'；
如果（值=='男性'）{
var radiohtml=receivedradio+'checked=“checked”+特征线+naradio+endnaradio；
返回radiohtml；
}
else if（值=‘女性’）{
var radiohtml=receivedradio+breakline+naradio+'checked=“checked”+endnaradio；
返回radiohtml；
}
否则{
返回接收DRADIO+特征线+naradio+endnaradio；
}
};
函数值（元素、操作、值）{
如果（操作=='get'）{
返回$（elem.val（）；
}else if（操作=='set'）{
if（$（elem）.is（':checked'）==false）{
$（elem）.filter（'[value='+value+']'）.attr（'checked'，true）；
}
}
};      
函数dataSentOK（）{
jQuery（“#navgrid4”）.jqGrid（）.trigger（“重载网格”）；
}
函数setupGrid（）{
jQuery（“#navgrid4”）.jqGrid({
url:'editing.php？q=1'，
数据：mydata，
postData:sopt，
数据类型：“本地”，
colNames:['Id'，'Employee Name'，'gender'，'Role'，'Department'，'Join Date'，'Description']，
colModel：[
{名称：'id'，索引：'id'，宽度：55，可编辑：false，编辑规则：{required:true}，搜索选项：{sopt:['eq'，ne']}，
{name:'employe'，index:'employe'，width:90，editable:true，formoptions:{rowpos:2，elmprefix:}，editrules:{required:true}，
{name:'gender'，index:'gender'，width:55，editable:true，formatter:'dynamicText'，width:150，edittype:'custom'，editoptions:{custom_元素：radioelem，custom_值：radiovalue}，formoptions:{rowpos 4，elmprefix:'}，
{名称：'role'，索引：'role'，宽度：100，可编辑：true，编辑类型：“select”，
editoptions:{dataUrl:'test.txt'，defaultValue:'Intime'}，
formoptions:{rowpos:3，前缀：'}}，
{名称：'department'，索引：'department'，宽度：80，对齐：“right”，可编辑：true，编辑类型：“select”，
editoptions:{dataUrl:'test.txt'，defaultValue:'Intime'}，
formoptions:{rowpos:5，前缀：'}}，
{名称：'joinedate'，索引：'joinedate'，宽度：80，
是的，
编辑选项：{大小：12，
dataInit:函数（el）{
$（el）.datepicker（{dateFormat:'yy-mm-dd'}）；
},
defaultValue:function（）{
var currentTime=新日期（）；
var month=parseInt（currentTime.getMonth（）+1）；
month=month进行验证的一种方法是为要验证的每个列数据设置事件处理程序

例如：

 $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 

                                    }
                                }
                                ]
                    }
                });

您可以使用常规经验进行验证

希望这有帮助

注意：事件可能会模糊或改变，或者任何事情取决于控件
不，这是一个大过程，我会给你发送一个链接…昨天我收到了感谢回复..但这是一个大过程，你可以遵循此代码