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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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服务器实现多session并发运行
2006/10/09 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python通过post提交数据的方法
2015/05/06 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
品质主管的岗位职责
2013/12/04 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
家长对孩子的评语
2014/04/18 职场文书
兽医医药专业求职信
2014/07/27 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis