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 相关文章推荐
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
Json实现传值到后台代码实例
Jun 30 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实现指定字段的多维数组排序函数分享
2015/03/09 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
javascript正则表达式总结
2016/02/29 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
js闭包学习心得总结
2018/04/17 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Python之用户输入的实例
2018/06/22 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
cf收人广告词大全
2014/03/14 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
与美同行演讲稿
2014/09/13 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
个人业务学习心得体会
2016/01/25 职场文书