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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
axios基本入门用法教程
Mar 25 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php实现网站留言板功能
2015/11/04 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP递归的三种常用方式
2019/02/28 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
外语专业毕业生个人的自荐信
2013/11/19 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
竞聘自述材料
2014/08/25 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
关于安全的广播稿
2014/10/23 职场文书
初中家长评语和期望
2014/12/26 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript