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 相关文章推荐
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
JS实现简易计算器
Feb 14 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php 动态多文件上传
2009/01/18 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
js播放wav文件(源码)
2013/04/22 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
js实现拖拽功能
2017/03/01 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
Python FTP操作类代码分享
2014/05/13 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python入门教程 python入门神图一张
2018/03/05 Python
python学生管理系统
2019/01/30 Python
python实现XML解析的方法解析
2019/11/16 Python
Django设置Postgresql的操作
2020/05/14 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
年会搞笑主持词
2014/03/27 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
给医院的感谢信
2015/01/21 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
举起手来观后感
2015/06/09 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python