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 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
es6数据变更同步到视图层的方法
Mar 04 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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 explode()函数用法、切分字符串
2012/10/03 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python中使用支持向量机SVM实践
2017/12/27 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python对wav文件的重采样实例
2020/02/25 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
创意活动策划书
2014/01/15 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
防火标语大全
2014/10/06 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Python经常使用的一些内置函数
2022/04/11 Python