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截取中文字符串的实现代码
Dec 22 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
javascript实现前端input密码输入强度验证
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笔记之常用文件操作
2010/10/12 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
应聘医药销售自荐书范文
2014/02/08 职场文书
学徒工职责
2014/03/06 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
保护野生动物倡议书
2014/05/16 职场文书
研究生求职自荐书
2014/06/23 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
小学老师对学生的评语
2014/12/29 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技