验证表单的两种方式

news/2024/7/11 1:20:38 标签: jquery, javascript, mvc, 表单

在提交表单前  往往要验证表单内容是否符合格式或者不为空,这时候需要验证表单内容 ,如果通过自己写js代码的话 相当麻烦 ,这里有两种验证方式:

1、通过引用   jquery.validate.js (当然要先引用jquery.js 此时这个js文件可能版本会不匹配导致效果出不来,这时候可以更换版本使其都是高版本或者低版本)

    例如要验证form1   加入如下代码 完成验证 (如果验证不通过内部会return false  终止执行下面的代码并提示相应的信息)

    注意:代码中的firstname 等属性  是和form中的name属性是对应的

javascript"><script type="text/javascript">
        $(function () {
            $("#form1").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    //topic: {
                    //    required: "#newsletter:checked",
                    //    minlength: 2
                    //},
                    //agree: "required"
                },
                messages: {
                    firstname: "请输入您的名字",
                    lastname: "请输入您的姓氏",
                    username: {
                        required: "请输入用户名",
                        minlength: "用户名必需由两个字母组成"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字母"
                    },
                    confirm_password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字母",
                        equalTo: "两次密码输入不一致"
                    },
                    email: "请输入一个正确的邮箱",
                    // agree: "请接受我们的声明",
                    // topic: "请选择两个主题"
                }
            })

        });
    </script>

      通过审查元素发现提示信息在class="error"的label中,如果想改变提示信息的样式,可以依据此处进行修改,例如

      

<style type="text/css">
        .error{
            color:red;
            font-size:15px;
        }
    </style>
2、第二种方法是mvc特有的 (需要引用jquery.js,   jquery.validate.js ,jquery.validate.unobtrusive三个js文件):

在实体模型类中加上相应的特性标签 例如[Required(ErrorMessage="错误提示信息")]、[RegularExpression("正则表达式",ErrorMessage="邮箱")],并且要求表单所在的页面是该模型的强类型视图页面,


http://www.niftyadmin.cn/n/1761791.html

相关文章

一.Windows I/O模型之选择(select)模型

1.选择(select)模型:选择模型&#xff1a;通过一个fd_set集合管理套接字&#xff0c;在满足套接字需求后&#xff0c;通知套接字。让套接字进行工作。避免套接字进入阻塞模式&#xff0c;进行无谓的等待。选择模型的核心的FD_SET集合和select函数。通过该函数&#xff0c;我们可…

MINIUI边框CSS详解

一、工具栏mini-toolbar a) 去掉所有边框 .hideToolbarBorder{ border: solid 0px ; } 单独去掉某个样式以此类推(上、下、左、右) .hideToolbarBorder-top{ border-top: solid 0px ; } .hideToolbarBorder-bottom{ border-bottom: solid 0px ; } .hideToolbarBorder-left{ bor…

ActiveReportsJS V3.2 EN Crack-2022-08

ActiveReportsJS V3.2 改进了对报表中冻结标题的支持。2022 年 8 月 18 日 - 10:35新版本特征 Frozen Headers - 表和 tablix 数据区域现在公开 Frozen Row 和 Frozen Column 属性&#xff0c;以指示滚动报表时应保持多少行和列可见。此功能仅在报表查看器处于图库模式时有效。…

HTML DOM getElementById() 方法

定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法&#xff0c;除了 getElementById() 之外&#xff0c;还有 getElementsByName() 和 getElementsByTagName()。 不过&…

Entity Framework 的注意点

1 、表单请求提交到控制器中的方法 如果表单中name属性中的值恰好和方法参数中的模型的属性对应上的时候&#xff0c;会自动赋值给参数模型对象的属性&#xff0c; 包括表单中的字符串格式的时间也会自动转换成对象的时间类型的属性 2 、关于 SaveChanges()方法的int返回值…

FastReport 2022-2 VCL 企业版-FastReport

用于 Delphi、CBuilder、RAD Studio 和 Lazarus 的报告和文档创建 VCL 库 FastReport VCL - 用于 Delphi 7-XE8、CBuilder 2005-XE8、Embarcadero RAD Studio 10 Seattle、Embarcadero RAD Studio 10.1 Berlin、Embarcadero RAD Studio 10.2 Tokyo 的报告和文档创建库&#xf…

mysql数据库常见错误代码列表

mysql出错代码列表1005&#xff1a;创建表失败 1006&#xff1a;创建数据库失败 1007&#xff1a;数据库已存在&#xff0c;创建数据库失败 1008&#xff1a;数据库不存在&#xff0c;删除数据库失败 1009&#xff1a;不能删除数据库文件导致删除数据库失败 1010&#xff1a;不…

TeeChart Pro for .NET 2022.7.14 Crack

TeeChart.NET Pro 图表组件为 .NET 桌面、WPF 和通用 Windows 平台 (UWP)、用于 ASP.NET、MVC 和 NetCore 的 Javascript 库提供完整的跨平台服务。 TeeChart for .NET 为各种计算需求提供图表控件&#xff0c;包括财务、统计和科学等重要垂直领域。它管理您的信息&#xff0c;…