yii form 表单提交之前JS在提交按钮的验证方法


Posted in Javascript onMarch 15, 2017

 很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证,我这边设置的方法是在提交按钮上设置监听器,如果部分内容为空(比如多选按钮没有选择),那么提示出错信息。主要目的是页面不用提交后刷新,进入controller的对应函数之后再判断出错。显示rules()验证规则函数的错误信息。

这里为了验证是否选择某个单选按钮,对提交的按钮onclick设置监听,具体如下

<Button onclick = "return fun()"/>

自定义fun()函数,需要有return true和false两种情况

<script>
  function fun(){
    var CheckBox = document.getElementsByName('checkBox[]');//获取所有的checkBox
    var count=0;
    for(i=0;i < CheckBox.length;i++){
      if(CheckBox[i].checked == true){                
        count++;
      }
    }
    if(count == 0 ){
      var errorMeg = document.getElementById('HomeworkTrConfig_flag_em_');
      errorMeg.style.display = "";
      errorMeg.innerHTML="请至少选择一项";      
      return false;
    }else{
      return true;
    }
  }
</script>

补充:Yii表单验证中,提交前验证,不通过不提交

以前记得有这么一个写法,就是当表单中的内容不符合验证规则时,会不允许提交,时间一长忘了怎么写了,手册里面也没写,查了一下资料,做一下笔记 :

$form = $this->beginWidget('CActiveForm',array(
    'id' => 'add_host',
    'enableAjaxValidation' => false,
    'enableClientValidation' => true,
    'clientOptions' => array(
        'validateOnSubmit' => true //在这个位置做验证
      ),
    'focus' => array($model,'ip')
  ));
?>

以上所述是小编给大家介绍的yii form 表单提交之前JS在提交按钮的验证方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 #Javascript
基于React实现表单数据的添加和删除详解
Mar 14 #Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 #Javascript
JS检测数组类型的方法小结
Mar 14 #Javascript
轻松理解JavaScript闭包
Mar 14 #Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 #Javascript
You might like
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
json简单介绍
2008/06/10 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python入门篇之条件、循环
2014/10/17 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python程序如何进行保存
2020/07/03 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
生产副总岗位职责
2013/11/28 职场文书
班干部演讲稿
2014/04/24 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
党校学习党性分析材料
2014/12/19 职场文书
重阳节慰问信
2015/02/15 职场文书
新郎结婚感言
2015/07/31 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技