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 嵌套的函数(作用域链)
Mar 15 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
js中作用域的实例解析
Mar 16 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
js实现html滑动图片拼图验证
Jun 24 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中SSO Cookie登录分析和实现
2015/11/06 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
用console.table()调试javascript
2014/09/04 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
Python 使用office365邮箱的示例
2020/10/29 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
经典c++面试题三
2015/07/08 面试题
remote接口和home接口主要作用
2013/05/15 面试题
小学生清明节演讲稿
2014/09/05 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
大学军训的体会
2014/11/08 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android