easyui datagrid的editor編輯器如何為validatebox控件添加改變事件

項目中需要為行編輯器Editor的某個列的文本框添加改變事件

需求：新增行時，為用戶名輸入特殊字符進行驗證，不允許保存用戶數據

html頁面

 <table  id="gridlist" data-bind="datagrid:grid" > 
    <thead>  
        <tr>  
            <th field="ck" checkbox="true"  readOnly:true ></th>        
            <th field="OptimisticLockField"  hidden="true"></th> 
            <th field="UserCode"        sortable="true" align="left"    width="80"   editor="{type:'validatebox',options:{required: true }}" >用戶名   </th>  
            <th field="UserName"        sortable="true" align="left"    width="200"    editor="{type:'validatebox',options:{required: true }}" >名稱   </th> 
            <th field="OriginalPassword" sortable="true" align="left"    width="200"    >密碼 </th>
            <th field="Org"             sortable="true" align="left"    width="200" editor="{type:'lookup',options:{required:true,lookupType:'cloud.PcsOrg',window:{title:'所屬機構'},queryParams:{State:9,Ou:false}}}" formatter="formatOrg" >所屬機構 </th>
            <th field="IsEnable"        sortable="true" align="center"    width="120" editor="{type:'checkbox',options:{on:1,off:0}}" formatter="com.formatCheckbox" >是否可用</th>
            <th field="IsAdmin"         align="center"  width="120"        editor="{type:'checkbox',options:{on:1,off:0}}" formatter="com.formatCheckbox">是否管理員</th>
            <th field="LoginCount"      sortable="true" align="right"    width="120"  >登錄次數</th>
            <th field="LastLoginDate"   sortable="true" align="left"    width="135"  formatter="com.formatDate">最后登錄日期</th>
            <th field="LastLoginOU"     align="left"  width="170" hidden="true"  >最后登錄組織</th>
            <th field="OrganizeNames" align="left" width="170">最后登錄組織</th>
            <th field="Permit"          align="center"  width="320" formatter="formatterButton"> 操作     </th> 
            <th field="Description"     align="left"  width="150"  editor="text">描述</th>
        </tr>                            
    </thead>      
</table>

js代碼：

       //創建editor編輯器之后執行事件
        this.grid.OnAfterCreateEditor = function (editors,row) {          
            //編輯器userCode添加改變事件
            if (row != undefined && row._isnew!=undefined) {
            editors["UserCode"].target.bind("change",function()
            {               
                var getUser = editors["UserCode"].target.val();                   
                //判斷新增狀態下用戶名只能使用數字或着字母或着下划線
                if (!/^[\w]+$/.test(getUser)) {
                    com.message('error', '用戶名只能數字、字母、下划線.');
                    return;                 
                }             
            });
            }          
        }

頁面效果：

 

 總結：

使用easyui的datagrid的OnAfterCreateEditor事件，通過 editors["UserCode"].target.bind("change",function(){ } 綁定改變事件，其中獲取文本框的值的語法是：

 editors["UserCode"].target.val(); 

 

  //創建editor編輯器之后執行事件
        this.grid.OnAfterCreateEditor = function (editors,row) {          
            //編輯器userCode添加改變事件
            if (row != undefined && row._isnew!=undefined) {
            editors["UserCode"].target.bind("change",function()
            {               
                var getUser = editors["UserCode"].target.val();                   
                //判斷新增狀態下用戶名只能使用數字或着字母或着下划線
                if (!/^[\w]+$/.test(getUser)) {
                    com.message('error', '用戶名只能數字、字母、下划線.');
                    return;                 
                }             
            });
            }          
        }