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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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自动生成后台导航网址的最佳方法
2013/08/27 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
JS实现放烟花效果
2020/03/10 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python调用java的Webservice示例
2014/03/10 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python浪漫表白源码
2019/04/05 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2014年环卫工作总结
2014/11/22 职场文书
喋血孤城观后感
2015/06/08 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android