jquery easyui form表单的验证

最新推荐文章于 2024-04-14 16:00:37 发布
最新推荐文章于 2024-04-14 16:00:37 发布
阅读量582 收藏 1
点赞数
分类专栏： Jquery easyui学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41617901/article/details/118143250
版权 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @*添加Jquery EasyUI的样式*@
    <link href="@Url.Content("~/Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />

    @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
    <script src="@Url.Content("~/Content/JqueryEasyUI/jquery-1.8.0.min.js")"></script>
    <script src="@Url.Content("~/Content/JqueryEasyUI/jquery.easyui.min.js")"></script>
    <script src="@Url.Content("~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js")"></script>

    @*日期格式的引用*@
    <script src="@Url.Content("~/Content/datapattern.js")"></script>
    <script type="text/javascript"> 
        
        $(function () {
            //初始化绑定各种事件
            BindUpdatePermissionInfo();
            BindBtnDialog();
         }
        )
        function BindBtnDialog() {
            $('#btnDialog').click(function () {
                $("#DivUpdatePermission").dialog('open').dialog('setTitle', '修改权限信息');
            }
            );

        }
        function BindUpdatePermissionInfo() {
            $("#btnUpdate").click(function () {
                //首先也是对用户进行检测，以下是对form表单的验证
                var validate = $("#ffUpdate").form("validate");
                if (validate == false) {
                    return false;
                }
                //构造参数发送给后台
                var posData = $("#ffUpdate").serializeArray();
                $.get("/Permission/UpdatePermissionInfo", posData, function (date) {
                    if (date == "OK") {
                        //修改成功，关闭弹出层，刷新DataGird
                        debugger
                        $.messager.alert("友情提示", "修改成功");
                        $("#DivUpdatePermission").dialog('close');//关闭弹窗
                      //  $("#test").datagrid("reload");
                    }
                    else {
                        $.messager.alert("友情提示", "修改失败，请您检查");
                    }
                })
            });
        }


    </script>
</head>
<body>

    <div>
        <a href="#" id="btnDialog" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存申请</a>
    </div>

    <!------------------------弹出修改权限信息的弹出层---------------------------------->
    <div id="DivUpdatePermission" class="easyui-dialog" style="width: 580px; height: 382px; padding: 10px 20px"
         closed="true" resizable="true" modal="true" buttons="#dlg-buttons">
        <form id="ffUpdate" method="post" novalidate="novalidate">
            <fieldset>
                <legend>权限信息的修改</legend>
                <table id="tblUpdate">
                    <tr>
                        <td>
                            <input type="hidden" id="ID" name="ID" />
                            <label for="PerMission1">权限名称：</label>
                        </td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="PerMission1" name="PerMission" data-options="required:true,validType:'length[1,32]'" />
                        </td>
                        <td>
                            <label for="RequestHttpType1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请求类型：</label>
                        </td>
                        <td>
                            <select id="RequestHttpType1" class="easyui-combobox" style="width: 154px;" name="RequestHttpType" data-options="required:true">
                                <option value="0" selected="selected">HttpGet</option>
                                <option value="1">HttpPost</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="ActionType">权限类型：</label>
                        </td>
                        <td>
                            <select id="ActionType1" class="easyui-combobox" style="width: 154px;" name="ActionType" data-options="required:true">
                                <option value="0">普通权限</option>
                                <option value="1" selected="selected">特殊权限</option>
                            </select>
                        </td>
                        <td>
                            <label for="SortCode1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排序码：</label>
                        </td>
                        <td>
                            <input class="easyui-validatebox" type="text" id="SortCode1" name="SortCode" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="RequestURL1">请求地址：</label>
                        </td>
                        <td colspan="3">
                            <input style="width:400px;" class="easyui-validatebox" type="text" id="RequestURL1" name="RequestURL" data-options="required:true" />
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <label for="AllowDelete1">允许删除：</label>
                        </td>
                        <td>
                            <select class="easyui-combobox" id="AllowDelete1" style="width: 154px;" name="AllowEdit" data-options="required:true">
                                <option value="1">允许</option>
                                <option value="0">不允许</option>
                            </select>
                        </td>
                        <td>
                            <label for="AllowEdit1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;允许编辑：</label>
                        </td>
                        <td>
                            <select class="easyui-combobox" id="AllowEdit1" style="width: 154px;" name="AllowEdit" data-options="required:true">
                                <option value="1">允许</option>
                                <option value="0">不允许</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="IsVisible1">是否显示：</label>
                        </td>
                        <td>
                            <select id="IsVisible1" class="easyui-combobox" style="width: 154px;" name="IsVisible" data-options="required:true">
                                <option value="1">显示</option>
                                <option value="0">不显示</option>
                            </select>
                        </td>
                        <td>
                            <label for="Enabled1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否有效：</label>
                        </td>
                        <td>
                            <select class="easyui-combobox" id="Enabled1" style="width: 154px;" name="Enabled" data-options="required:true">
                                <option value="1">有效角色</option>
                                <option value="0">无效角色</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="Description1">备注信息：</label>
                        </td>
                        <td colspan="3">
                            <textarea style="height: 50px; width: 406px;" id="Description1" name="Description"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="text-align: center; padding-top: 10px">
                            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok">确定</a>
                            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#DivUpdatePermission').dialog('close')">关闭</a>
                        </td>
                    </tr>
                </table>
            </fieldset>

        </form>
    </div>

</body>
</html>

 

碧山云游
关注
专栏目录
表单校验（js），easyui
07-11
本资源有首页删除、增加、查看、导出表单、模糊查询的。添加、修改、查看用一个页面来控制。增加修改有表单校验，select下拉框控制很出色。
easyui Form验证
java开发指南博客 【转载】
08-14 127
@author YHC 这个教程将向你展示如何验证一个form,easyui框架提供一个validatebox 插件去验证一个form,在这个教程我们将创建一个联系我们的form和应用validatebox 插件 验证form,然后你可以改编这个form到你自己的需求. 查询 Demo 创建 form 让我们创建一个简单的联系我们的form和name, email,...
使用EasyUI一般处理程序完成form表单验证
gods_boy的博客
05-08 800
  使用EasyUi来完成form表单验证首先要引用文件   &lt;link href="EasyUI/themes/material/easyui.css" rel="stylesheet" /&gt; &lt;link href="EasyUI/themes/icon.css" rel="stylesheet" /&gt;--图片样式 &lt;script s
easyui---表单验证
weixin_33859504的博客
10-26 139
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServe...
EasyUI之表单验证(1)
最新发布
2401_84048149的博客
04-14 470
学习技术一定要制定一个明确的学习路线，这样才能高效的学习，不必要做无效功，既浪费时间又得不到什么效率，大家不妨按照我这份路线来学习。大家不妨直接在牛客和力扣上多刷题，同时，我也拿了一些面试题跟大家分享，也是从一些大佬那里获得的，大家不妨多刷刷题，为金九银十冲一波！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！7)][外链图片转存中…(img-DJ3W0WRX-1713081625727)]
jQuery EasyUI提交表单验证
12-07
EasyUI的form表单里面的验证框，先讲解下validatebox类和相关的属性。 验证规则 验证规则是通过使用 required 和 validType 特性来定义的， 这里是已经实施的规则： email：匹配 email 正则表达式规则，系统提供的...
Jquery组件easyUi实现表单验证示例
10-21
在标题和描述中提到的“Jquery组件easyUi实现表单验证”，主要是指使用EasyUI的表单组件和验证功能。下面我们将详细介绍如何使用EasyUI实现表单验证。 首先，我们需要引入EasyUI的相关CSS和JavaScript文件，如在...
Jquery Easyui表单组件Form使用详解（30）
10-20
最后，JQuery Easyui表单组件的使用还涉及到一些细节处理，例如表单验证的配置、表单提交的回调逻辑、以及表单加载过程中的错误处理等。通过合理的配置和编写相应的JavaScript代码，可以实现对表单进行高级控制，如...
轻松学习jQuery插件EasyUI EasyUI表单验证
10-23
【jQuery EasyUI 表单验证与异步提交详解】 在Web开发中，jQuery EasyUI是一个基于jQuery的轻量级框架，提供了丰富的UI组件，其中包括表单验证和异步提交功能，使得开发者能够快速构建交互性良好的用户界面。本文将...
easyui表单的验证
tanjian_的专栏
12-01 761
//扩展easyui表单的验证 $.extend($.fn.validatebox.defaults.rules, {     chs_character: {         validator: function(value, param) {             return /^[\u0391-\uFFE5\w\*\-\(\)]+$/.test(value);        
EasyUI中在表单提交之前进行验证
09-02
主要介绍了EasyUI中在表单提交之前进行验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
EasyUI之表单验证
波波烤鸭的博客
05-06 3634
  当我们开发一个管理类项目的时候，EasyUI是我常用的一个jquery框架，而表单验证显然是我们必须要实现的功能，而使用基于EasyUI的验证功能就比较简便了，本文来介绍下具体的用法 EasyUI表单验证 1.官方提供的验证   验证规则是通过使用 required 和 validType 属性来定义的。 规则 说明 email 匹配 email 正则表达式规则 url 匹...
easyui的textbox的表单验证
zrcshendustudy的博客
08-16 840
easyui的表单绑定，失去焦点弹出值核心代码： 1, &lt;input type="text" class="easyui-textbox" id="name" maxlength="5" style="width:150px"/&gt; $(function() { $("input",$("#name").next("span&q
EasyUI（五）表单验证
qi325的博客
08-22 420
EasyUI表单验证
基于Easyui框架的扩展Easyui表单的验证
u012949335的专栏
08-23 341
&lt;input class="easyui-validatebox" data-options="validType:'minLength[5]'"&gt; &lt;input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="requ
EasyUI验证form表单
海那边天哭了
01-29 1866
missingMessage="必输项提示" data-options="required:true" validType="email" invalidMessage="自定义提示语" (只能使用官方定义好的验证) 自定义验证： $(function(){ 　　$.extend($.fn.validatebox.defaults.rules, { 　　　　　　english : {
EasyUI：form表单提交前验证
KaiSarH
07-15 995
easyUI中form表单提交前验证
easyUI之表单校验
u012814041的专栏
12-01 9493
常用校验： 1.用户名必须填写 2.密码必须填写，且密码长度为3-12位 效果 validType：validatebox中的一个属性，旗下有： email: 正则表达式匹配电子邮件规则。 url: 正则表达式匹配的URL规则。 length[0,100]: 在x和x字符允许。 remote['http://.../actio
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值