easyui form表单提交自定义验证数据是否已存在

最新推荐文章于 2023-06-01 09:59:01 发布

aa1049372051

最新推荐文章于 2023-06-01 09:59:01 发布

阅读量7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/aa1049372051/article/details/21600591

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

easyui form表单提交自定义验证数据是否已存在

html代码

html代码中Yii::app()->createUrl('jpdata/parts/getyear')指向actiongetyear()方法(这是Yii 框架的写法)

 <td width=185><input name="OENO" class="easyui-validatebox input" validType="checkOE" required="true"></td>
<tr class="fitem" style="height:30px;">
                <td align="right" width=55>起始年:</td>
                <td width=185><input name="beginyear" id="beginyear" class="easyui-combobox input" data-options="
					url:'<?php echo Yii::app()->createUrl('jpdata/parts/getyear') ?>',
					method:'get',
					valueField:'id',
					textField:'text',
					panelHeight:'auto'
			" validType="year"></td>
                <td align="right" width=70>结束年:</td>
                <td width=185><input name="endyear" id="endyear" class="easyui-combobox input" data-options="
					url:'<?php echo Yii::app()->createUrl('jpdata/parts/getyear') ?>',
					method:'get',
					valueField:'id',
					textField:'text',
					panelHeight:'auto',
                                        validType:['year','checkyear[\'beginyear\']']
			"></td>
            </tr>

html js代码

$(document).ready(function(){
           //自定义number规则,验证用量不能为空,默认是1,且是正整数
            $.extend($.fn.validatebox.defaults.rules, {
                number: {
                         validator: function (value, param) {
                         return /^[1-9]{1,4}$/.test(value);
                         },
                         message: '用量不能为空,默认是1,且是正整数'
                },
                
                year: {
                         validator: function (value, param) {
                         return /^[1-2]([0-9]{3})$/.test(value);
                         },
                         message: '请输入或选择正确年份'
                },
                
                checkyear: {
                         validator: function (value, param) {
                         var s = $("input[name="+param[0]+"]").val();
                         if(value==null)
                             return true;
                         return value>=s;
                         },
                         message: '结束年必须大于起始年'
                },
                
                //验证输入的OE号在数据库是否已存在,已存在请重新输入
                checkOE: {
                         validator: function (value, param) {
                             var url=Yii_baseUrl+'/parts/CheckOE';  //指向下面actioncheckoe()方法
                             var data = {'OE':value};
                             var bool=false;
                             $.ajax({
                                 type: "post",
                                 //dataType: 'json',
                                 async:false,   //没有async属性表单不能通过验证
		 	         url: url,
		 	         data:data,
			         cache: false,
		 	         success:function(result){
                                    if(result){
                                      $.fn.validatebox.defaults.rules.checkOE.message = '该OE号已存在,请重新输入'; 
                                      bool=false;
                                    }else{
                                      $.fn.validatebox.defaults.rules.checkOE.message ='该OE号不存在,可以输入';
                                      bool=true;        
                                  }
			       }
		          });
                         return bool;   
                      },
                         message: ''
                }
           });

 });

php后台代码部分(yii框架)

//easyui获取下拉年份
          public function actiongetyear()
          {
              for($i=date("Y")-10,$j=0;$i<date("Y")+10;$i++,$j++)
              {
                  $year[$j]['id']=$i;
                  $year[$j]['text']=(string)$i;
              }
              echo json_encode($year);
          }

//OE号是否存在
          public function actionCheckOE()
          {
              $oe=$_POST['OE'];
              //$oe='S12-5000010-DY';
              $data=Yii::app()->db->createCommand()->select('*')->from('jpd_parts')->where('OENO=:oe',array(':oe'=>$oe))->queryRow();
              echo $data;  //存在返回数据,不存在为false;
          }

问题:

上面验证OE号时每次输入改变时都会请求数据库。这会造成很大的负担。后来将它改为焦点离开文本框才会验证

html如下

<td width=185><input name="OENO" class="easyui-validatebox input" οnblur="onblurevent(this,'checkOE')" οnfοcus="onfocusevent(this)" required="true"></td>

js如下

function onblurevent(obj,validType){
   //console.log($(obj));
    $(obj).validatebox({
    validType :validType
   }); 
}

function onfocusevent(obj)
{
    $(obj).validatebox({
     required:true,
     validType :''
     }); 
     $(obj).validatebox('isValid');
}