easyui表单提交验证form

方式一,不需要考虑jquery.easyui.min.js版本

 <script>
        $(function () {
            //针对 设置 novalidate:true 
            $('.validatebox-text').bind('blur', function () {
                $(this).validatebox('enableValidation').validatebox('validate');
            });
            $("#btn_ok").click(function () {
                //启用
                $('.validatebox-text').validatebox('enableValidation').validatebox('validate')
                $.messager.progress(); // 显示进度条 
                var b = $("#ff").form('validate');//验证
                if (b) {
                    $.messager.progress('close'); // 如果提交成功则隐藏进度条
                }
                else { $.messager.progress('close'); } // 如果提交成功则隐藏进度条 }
            });
        });

    </script>
<div id="ff">
        <input class="easyui-textbox  easyui-validatebox" type="text" name="name" data-options="required:true,novalidate:true" />
        <input style="width: 150px;" class="easyui-textbox   easyui-validatebox" data-options="required:true,validType:'length[4,20]',missingMessage:'用户名不能为空,请输入用户名',invalidMessage:'用户名的长度为4-20位'" />
        <input class=" textbox easyui-validatebox" data-options="required:true,validType:'email' ,missingMessage:'用户名不能为空,请输入用户名',invalidMessage:'邮件'" />
    </div>
    <input id="btn_ok" type="button" value="确定" /> 

  方式2,暂时发现1.3.6版本一下不支持

<script>
        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    var b = $(this).form('enableValidation').form('validate');
                    if (b) {
                        alert("成功");
                    }
                    else { alert("不成功"); }
                }
            });
        }
        $(function () {
            $("#btn_ok").click(function () {
                var b = $('#ff').form("enableValidation").form('validate');
                if (b) {
                    alert("成功");
                }
                else { alert("不成功"); }
            });
        });
    </script>
<body>
    <div id="ff"  class="easyui-form" data-options="novalidate:true">
        <input class="easyui-textbox" type="text" name="email" data-options="required:true" />
    </div>
    <div style="text-align: center; padding: 5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_ok">OK</a>
    </div>


</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

查找修改时间在指定区间的文件并打包

#!/bin/bash # find file and tar # joyousphper@gmail.com # find_and_tar.sh read ...

2513
来自专栏Java技术

使用Spring AOP实现MySQL数据库读写分离案例分析

分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量。

782
来自专栏FreeBuf

如何阻止微软强制更新你的操作系统

不管Windows 7和Windows 8.1操作系统用户是否想要保留原来的操作系统,微软已经开始帮助Windows 7和Windows 8.1用户更新到Win...

1859
来自专栏云计算教程系列

如何在CentOS 7上使用Postgres,Nginx和Gunicorn设置Django

Django是一个功能强大的Web框架,可以帮助您启动Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码,但是对于任何与生...

1053
来自专栏云计算教程系列

如何使用Apache驱动Django

Django是一个功能强大的Web框架,可以帮助您快速启动Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码。但是其也需要...

2365
来自专栏小白安全

小白博客 Xiaobai___详细教你如何在Linux环境下安装mysql数据库

需要Linux版本:centos7  64位 好,我们开始了 1、下载安装包“mysql-5.6.33-linux-glibc2.5-x86_64.tar.g...

2475
来自专栏冷冷

tomcat不能运行或共存多个项目

我在Tomcat下部署了两个项目,但是一个可以运行,另一个不可以,第一感觉是内存问题,给tomcat多分配了内存.但是没有作用. 原因是少了webAppRoot...

1959
来自专栏电光石火

eclipse配置tomcat运行时访问路径不要项目名称

1:双击打开tomcat 2:选择Modules,选择你要修改的项目 ? 3:点击Edit,把path修改成空或者你自己想要的路径即可! ?

2976
来自专栏学一学大数据

一文上手zabbix安装配置【运维篇】

1203
来自专栏源哥的专栏

把JSP放到WEB-INF后以保护JSP源代码

    本人在看《J2EE核心模式》(“Core J2ee Patterns”,刘天北、熊节译),里面提到了一种实现资源保护的方法,那就是把那些限制访问的资源(...

783

扫码关注云+社区