• .NET MVC第七章、jQuery插件验证

    .NET MVC第七章、jQuery插件验证

    目录

    .NET MVC第七章、jQuery插件验证

    环境引入

    MVC使用script脚本

    示例

    效果

    可复制使用案例

     注：

    环境引入

    基础jQuery，这个在MVC项目内是自带的。

    <script src="https://code.jquery.com/jquery-3.4.0.min.js">script>

    验证js，MVC里是没有默认引入的，需要人为的主动引入。

    1. <script src="~/Scripts/jQuery.validate.js">script>
    2. <script src="~/Scripts/jQuery.metadata.js">script>
    3. <script src="~/Scripts/jQuery.validate.messages_cn.js">script>

    如果是VS2019需要引入一下几个包

    1. <script src="~/Scripts/jquery.validate.js">script>
    2. <script src="~/Scripts/jquery.validate.min.js">script>
    3. <script src="~/Scripts/jquery.validate.unobtrusive.js">script>
    4. <script src="~/Scripts/jquery.validate.unobtrusive.min.js">script>

    如果是VS2019在创建的过程中自带这些内容，VS2017则会少一些，例如jQuery是1.0版本的，也会有验证功能的js。 

    MVC使用script脚本

    MVC中由于母版页中已经引入了jQuery故而直接使用即可，但是这里需要使用@section Scripts来写入script的脚本信息。 

    1. @section Scripts{
    2.     <script type="text/javascript">
    3.     script>
    4. }

    示例

    视图层

    1.  
    2. @{
    3.     ViewBag.Title = "Index";
    4. }
    5.  
    6. <h2>jQuery验证h2>
    7. <hr />
    8. <form action="~/Test/Index" method="get" id="form_test">
    9.     <p>
    10.         用户名：<input type="text" name="userName" placeholder="请输入用户名" />
    11.     p>
    12.     <p>
    13.         密码：<input type="text" name="pwd1" id="pwd1" placeholder="请输入用户密码" />
    14.     p>
    15.     <p>
    16.         确认密码：<input type="text" name="pwd2" placeholder="请输入用户密码" />
    17.     p>
    18.     <input type="submit" value="提交" />
    19. form>
    20. @ViewBag.Info
    21. @section Scripts{
    22.     <script src="~/Scripts/jquery.validate.js">script>
    23.     <script src="~/Scripts/jquery.validate.min.js">script>
    24.     <script src="~/Scripts/jquery.validate.unobtrusive.js">script>
    25.     <script src="~/Scripts/jquery.validate.unobtrusive.min.js">script>
    26.     <script type="text/javascript">
    27.         $(function () {
    28.             $("#form_test").validate({
    29.                 rules: {
    30.                     userName: { required: true },// 用户名非空
    31.                     pwd1: { required: true },// 密码非空
    32.                     pwd2: { required: true, equalTo: "#pwd1" }// 确认密码非空,是否和密码一致
    33.                 }, messages: {
    34.                     userName: { required: "请输入用户名！！" },
    35.                     pwd1: { required: "请输入密码！" },
    36.                     pwd2: {
    37.                         required: "请输入确认密码！",
    38.                         equalTo: "两次密码输入的不一致！"
    39.                     },
    40.                 }
    41.             });
    42.         });
    43.     script>
    44. }

    控制器

    1. public ActionResult Index(string userName,string pwd1)
    2. {
    3.     ViewBag.userName = userName;
    4.     ViewBag.pwd = pwd1;
    5.     ViewBag.Info = userName + ":" + pwd1;
    6.     return View();
    7. }

    效果

    所有信息不允许为空

    两次密码不同 

    正确输入

    提交成功

    可复制使用案例

    为了让表单结构简单而清晰，我们将表单的每个元素都包裹在一个div结构中：用label标签用来标记元素的名称，接着便是表单元素本身。

    注明：

    1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时，浏览器就会自动将焦点转到和label相关的表单控件上。

    2.每个需要校验的表单元素都应该设置id和name属性，方便在使用插件时将元素绑定校验规则和校验信息。】

    源码

    1.  
    2. @{
    3.     ViewBag.Title = "Index";
    4. }
    5. <h2>jQuery验证h2>
    6. <hr />
    7. HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    8. <html>
    9. <head>
    10.     <title>jquery validate验证title>
    11.     @section Scripts{
    12.         <script src="~/Scripts/jquery.validate.js">script>
    13.         <script src="~/Scripts/jquery.validate.min.js">script>
    14.         <script src="~/Scripts/jquery.validate.unobtrusive.js">script>
    15.         <script src="~/Scripts/jquery.validate.unobtrusive.min.js">script>
    16.         <script type="text/javascript">
    17.             $(function () {
    18.  
    19.                 //让当前表单调用validate方法，实现表单验证功能
    20.                 $("#ff").validate({
    21.                     debug: true, //调试模式，即使验证成功也不会跳转到目标页面
    22.                     rules: { //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
    23.                         sname: {
    24.                             required: true, //必填。如果验证方法不需要参数，则配置为true
    25.                             rangelength: [4, 12],
    26.                             remote: {
    27.                                 url: "ajax_check.action",
    28.                                 type: "post"
    29.                             }
    30.                         },
    31.                         spass: {
    32.                             required: true,
    33.                             rangelength: [6, 16]
    34.                         },
    35.                         spass2: {
    36.                             required: true,
    37.                             equalTo: '#password' //表示和id="spass"的值相同
    38.                         },
    39.                         saddress: {
    40.                             required: true
    41.                         },
    42.                         sphone: {
    43.                             required: true,
    44.                             phone: true
    45.                         },
    46.                         slike: {
    47.                             required: true,
    48.                         },
    49.                         semail: {
    50.                             required: true,
    51.                             email: true
    52.                         },
    53.                         simage: {
    54.                             required: true,
    55.                             extension: 'gif|jpe?g|png'
    56.                         }
    57.                     },
    58.                     messages: {
    59.                         sname: {
    60.                             required: "请输入用户名",
    61.                             rangelength: $.validator.format("用户名长度为{0}-{1}个字符"),
    62.                             remote: "该用户名已存在！"
    63.                         },
    64.                         spass: {
    65.                             required: "请输入密码",
    66.                             rangelength: $.validator.format("密码长度为{0}-{1}个字符")
    67.                         },
    68.                         spass2: {
    69.                             required: "请再次输入密码",
    70.                             equalTo: "两次密码必须一致" //表示和id="spass"的值相同
    71.                         },
    72.                         sphone: {
    73.                             required: "请输入手机号"
    74.                         },
    75.                         saddress: {
    76.                             required: "请选择地址"
    77.                         },
    78.                         slike: {
    79.                             required: "请选择爱好",
    80.                         },
    81.                         semail: {
    82.                             required: "请填写邮件",
    83.                             email: "邮箱格式不正确"
    84.                         },
    85.                         simage: {
    86.                             required: "请选择要上传的头像",
    87.                             extension: "文件后缀名必须为jpg,jpeg,gif,png"
    88.                         }
    89.                     }
    90.                 });
    91.             });
    92.         script>
    93.         }
    94.     head>
    95.  
    96. <body>
    97.     <form action="http://www.hao123.com" method="post" id="ff">
    98.         <fieldset>
    99.             <legend>jQuery-Validate表单校验验证legend>
    100.             <div class="item">
    101.                 <label for="username" class="item-label">用户名:label>
    102.                 <input type="text" id="username" name="sname" class="item-text" placeholder="设置用户名"
    103.                        autocomplete="off" tip="请输入用户名">
    104.             div>
    105.             <div class="item">
    106.                 <label for="password" class="item-label">密码:label>
    107.                 <input type="password" id="password" name="spass" class="item-text"
    108.                        placeholder="设置密码" tip="长度为6-16个字符">
    109.             div>
    110.             <div class="item">
    111.                 <label for="password" class="item-label">确认密码:label>
    112.                 <input type="password" name="spass2" class="item-text" placeholder="设置确认密码">
    113.             div>
    114.             <div class="item">
    115.                 <label for="phone" class="item-label">手机号码:label>
    116.                 <input type="text" id="phone" name="sphone" class="item-text" placeholder="输入手机号码" tip="请输入手机号码">
    117.             div>
    118.             <div class="item">
    119.                 <label for="saddress" class="item-label">所在地:label>
    120.                 <select name="saddress" class="item-select">
    121.                     <option value="">---请选择---option>
    122.                     <option value="北京">北京option>
    123.                     <option value="上海">上海option>
    124.                     <option value="深圳">深圳option>
    125.                 select>
    126.             div>
    127.             <div class="item">
    128.                 <label for="slike" class="item-label">爱好：label>
    129.                 上网：<input type="checkbox" name="slike" value="上网" />
    130.                 唱歌：<input type="checkbox" name="slike" value="唱歌" />
    131.                 编程：<input type="checkbox" name="slike" value="编程" />
    132.                 书法：<input type="checkbox" name="slike" value="书法" /><br />
    133.             div>
    134.             <div class="item">
    135.                 <label for="semail" class="item-label">邮箱:label>
    136.                 <input type="text" id="semail" name="semail" class="item-text" placeholder="设置邮箱"
    137.                        autocomplete="off" tip="请输入邮箱">
    138.             div>
    139.             <div class="item">
    140.                 <label for="simage" class="item-label">头像:label>
    141.                 <input type="file" name="simage" class="item-file">
    142.             div>
    143.             <div class="item">
    144.                 <input type="submit" value="提交" class="item-submit">
    145.             div>
    146.         fieldset>
    147.     form>
    148. body>
    149. html>

     注：

    jQuery1.9之后的版本把所有在早期版本里标记为deprecated的api都正式删除了，不再向后兼容。所以使用MVC模板自动生成的jQuery-3.3.1.min.js时会报脚本错，导致无法完成验证。 Visual Studio 2019中生成的mvc项目中，自动生成的jQuery-3.4.1.min.js已解决该问题。建议使用最新版本。

  • 相关阅读:
    nextjs上手
    FFmpeg5.1.3编译动态库踩坑之旅(基于Linux虚拟机)
    神经网络参数量和计算量,神经网络是参数模型吗
    Lesson4-1:OpenCV图像特征提取与描述---角点特征
    解决问题的思路---常见的算法思想
    CTO强烈禁止使用Calendar，那用啥？
    Spring Batch -配置步骤 (XML/Java)
    ROS2与turtlebot4仿真入门教程-测试雷达和相机
    面试算法题(shell/日志数据查询统计)
    软考-网络攻击原理与常用方法
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/127127103