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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 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
星际玩家的三大定律
2020/03/04 星际争霸
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
DOM 基本方法
2009/07/18 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
Python错误处理操作示例
2018/07/18 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
python中实现栈的三种方法
2020/12/19 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
XML文档面试题
2015/08/05 面试题
公务员个人自我评价分享
2013/11/06 职场文书
2014春晚主持词
2014/03/25 职场文书
对教师的评语
2014/04/28 职场文书
材料化学专业求职信
2014/07/15 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
男方婚前保证书
2015/02/28 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python