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 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python实现实时监控文件的方法
2016/08/26 Python
transform python环境快速配置方法
2018/09/27 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
业务员岗位职责
2013/11/16 职场文书
房地产项目建议书
2014/03/12 职场文书
周一问候语大全
2015/11/10 职场文书
导游词之青岛崂山
2019/12/27 职场文书