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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
React Native之prop-types进行属性确认详解
Dec 19 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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php文件系统处理方法小结
2016/05/23 PHP
php实现的双色球算法示例
2017/06/20 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python实现井字棋小游戏
2020/03/09 Python
python新手学习可变和不可变对象
2020/06/11 Python
浅析Python __name__ 是什么
2020/07/07 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
情人节活动总结范文
2015/02/05 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
感恩教育观后感
2015/06/17 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Python语言内置数据类型
2022/02/24 Python