×

手把手教你分分钟搞定“用JS设置表单form”的验证功能

作者:Web前端之家2020.06.08来源:Web前端之家浏览:507评论:1
微信公众号

微信公众号

之前文章也提到过,在Web前端开发的学习中,不要太盲目去追求框架(vue,react),我们还需要掌握原生的JS或者一些JQ等,以便解决一些“燃眉之急”的简单项目。

比如有时候老板让你快速搞定一个form的功能,并且这个页面也就1-2天的存活期,所以这时候没必要去用框架(vue,react)弄了。那么问题来了,如何分分钟搞定“用JS设置表单form”的验证功能?

我们将使用jQuery Validation Plugin来验证我们的表单。该插件的基本原理是为JavaScript中的HTML元素指定验证规则和错误消息。

废话不多说,直接开干吧!!!!

步骤1:包含jQuery

首先,我们需要包括jQuery库。jQuery验证插件已经在jQuery 3.1.1之前进行了测试,但是本文中的演示与最新版本3.4.1完美兼容。

您可以使用以下任何下载选项:

  • 从jquery.com下载

  • 使用Bower下载: $ bower install jquery

  • 使用npm或Yarn下载它:$ npm install jqueryyarn add jquery

  • 使用CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

创建一个名为的新HTML文件,index.html并在结束</body>标记之前包含jQuery :

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery/dist/jquery.min.js"></script>

你也可以使用Bower或npm去操作。

步骤2:包括jQuery验证插件

选择:

  • 从插件的github存储库下载

  • 使用Bower下载: $ bower install jquery-validation

  • 使用npm下载: npm i jquery-validation

  • NuGet:Install-Package jQuery.Validation

  • 使用CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

在jQuery之后添加插件:

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

步骤3:建立HTML表单

对于注册,我们要收集以下用户信息:

  1. 名字

  2. 电子邮件

  3. 密码

因此,让我们创建包含以下输入字段的表单:

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[email protected]"/>

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"/>

    <button type="submit">Register</button>

  </form>
</div>

将其集成到实际应用程序中时,请不要忘记填写action属性,以确保将表单提交到正确的目的地。

步骤4:为表单创建样式

创建一个新文件,css/styles.css并将其包括在<head>HTML文件的部分中:

<link rel="stylesheet" href="css/style.css"/>

将以下样式复制到新创建的文件中:

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Styles */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
form .error {
  color: #ff0000;
}

请注意的样式.error,这些样式将用于验证错误消息。

步骤5:创建验证规则

最后,我们需要初始化表单验证插件。创建一个新文件,js/form-validation.js<script>在jQuery Validation插件的标签之后引用它:

<script src="js/form-validation.js"></script>

将以下代码复制到新创建的文件中:

// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

想要完整DEMO源码的童鞋,可以加Q群@群主,这里就不提供了,谢谢。

结论

就是这样,您完成了!现在您有了一个想法,如何使用jQuery设置表单验证。请记住,这不能代替服务器端验证。恶意用户仍然有可能操纵或绕过验证规则(例如,通过使用浏览器的开发人员工具)。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/js20200602008a2.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • 访客

    点多...

  • kaifa8

    小公司很少会去搞这种开发自动化,都只是看重结果。...

  • 访客

    你可以加群去问...

  • 访客

    怎么注册?不会...

  • ajoy

    说法可以是一样的,毕竟JS和JQ都是有“血缘关系”的,你可以自己改下不就可以了吗,哈哈!...

  • 访客

    标题是JS用了JQ误人子弟呢...

  • absoy

    vue居然还能这么玩,期待你们vue3.0中文版教程。...

  • caij2

    github也中了新冠病毒了吧,哈哈!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.4 Valyria

时时彩平台哪个好 海口飞鱼开奖结果 天津体彩十一选五开奖一定牛 吉林11选5开奖结果 2019上半年上证指数走势 极速快三大小单双技巧 北京十一选五开奖app 吉林11选5任五怎么选号 宁夏十一选五遗漏号历史统计 全民计划软件吉林快三 新手入门股票视频 腾讯一分彩计划 股票行情今天查询大盘 福彩3d字谜天齐网 北京pk10最稳办法 北京快乐8所有开奖结果 参与赌博24小时会被放出来吗