<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>validate插件</title>

    <script type="text/javascript" src="jquery-3.2.1.js"></script>

    <script type="text/javascript" src="jquery.validate.js"></script>

    <script type="text/javascript" src="messages_zh.js"></script>

    <script>

$().ready(function() {

 $("#signupForm").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

          },

          agree: "required"

        },

        messages: {

          firstname: "请输入您的名字",

          lastname: "请输入您的姓氏",

          username: {

            required: "请输入用户名",

            minlength: "用户名必需由两个字母组成"

          },

          password: {

            required: "请输入密码",

            minlength: "密码长度不能小于 5 个字母"

          },

          confirm_password: {

            required: "请输入密码",

            minlength: "密码长度不能小于 5 个字母",

            equalTo: "两次密码输入不一致"

          },

          email: "请输入一个正确的邮箱",

          agree: "请接受我们的声明",

        }

    });

});

</script>

<style>

.error{

    color:red;

}

</style>

</head>

<body>

<form class="cmxform" id="signupForm" method="get" action="">

  <fieldset>

    <legend>验证完整的表单</legend>

    <p>

      <label for="firstname">名字</label>

      <input id="firstname" name="firstname" type="text">

    </p>

    <p>

      <label for="lastname">姓氏</label>

      <input id="lastname" name="lastname" type="text">

    </p>

    <p>

      <label for="username">用户名</label>

      <input id="username" name="username" type="text">

    </p>

    <p>

      <label for="password">密码</label>

      <input id="password" name="password" type="password">

    </p>

    <p>

      <label for="confirm_password">验证密码</label>

      <input id="confirm_password" name="confirm_password" type="password">

    </p>

    <p>

      <label for="email">Email</label>

      <input id="email" name="email" type="email">

    </p>

    <p>

      <label for="agree">请同意我们的声明</label>

      <input type="checkbox" class="checkbox" id="agree" name="agree">

    </p>

    <p>

      <input class="submit" type="submit" value="提交">

    </p>

  </fieldset>

</form>

</body>

</html>

validate插件的更多相关文章

  1. validate插件深入学习-01 小白从看透一个插件开始

    没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...

  2. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  3. jQuery Validate 插件[表单验证 属性介绍]

    详细介绍一下Validate插件 $("#form的Id").validate({ }) 属性 规则 描述 required:true 必须输入的字段 required: &quo ...

  4. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  5. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  6. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  7. jQuery validate插件，自动验证无效的原因及解决方法归纳

    最近在使用validate插件进行验证的时候,出现有的控件在个别事件(比如keydown.foucs.onchange等)下不能自动验证,而有的控件却又正常,当时觉得很诡异,后来仔细测试查看,归纳原因 ...

  8. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

  9. validate插件使用

    validate插件使用 官网:http://jqueryvalidation.org/ 项目实操 引入文件 add.html调用(注意顺序问题) 为form表单定义一个ID,以方便获取该元素 添加验 ...

  10. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

随机推荐

  1. PHP 获取天气

    /** * 获取天气 */ function get_tq () { //获取用户ip地址 $ip = get_real_ip(); // $ip = '123.125.71.38'; //根据ip地 ...

  2. PHP SDK短信接口

    /** * sdk 短信接口 * @param $tel 手机号 * @param $content 短信内容 * @return bool */ public function telSDK($te ...

  3. 给编译出的程序添加图标（exe的图标）

    安装依赖: go get github.com/akavel/rsrc 在对应程序的源码路径下创建manifest文件,图标也要放进去(xxx.ico), 命名:main.exe.manifest : ...

  4. 如何使用 VS Code开发.NET Core应用程序

    Visual Studio Code(VS Code)是Microsoft为Windows,Linux和Mac操作系统开发的免费,跨平台,轻量级的源代码编辑器,它是源代码编辑器,而Visual Stu ...

  5. Spark内核解析

    Spark内核概述 Spark内核泛指Spark的核心运行机制,包括Spark核心组件的运行机制.Spark任务调度机制.Spark内存管理机制.Spark核心功能的运行原理等,熟练掌握Spark内核 ...

  6. SpringBoot嵌入式Servlet容器

    SpringBoot默认是将Tomcat作为嵌入式的servlet容器. 问题: 如何修改嵌入式的servlet容器? 1)在配置文件中设置对应的属性值 server.port=8081 # Tomc ...

  7. kubernets集群的安全防护(上)

    一  了解认证机制 1.1   API的服务器在接收来自客户端的请求的时候会对发起的用户进行几个步骤 认证插件进行认证,确认发起的用户是外部用户,还是集群中的某个命名空间里面的pod 确认用户属于哪个 ...

  8. LeetCode530. 二叉搜索树的最小绝对差

    题目 又是常见的BST,要利用BST的性质,即中序遍历是有序递增序列. 法一.中序遍历 1 class Solution { 2 public: 3 vector<int>res; 4 v ...

  9. CTFshow萌新赛-密码学签到

    查看密码信息 猜测为base家族 存在"^"符号,所以应该是在base64以上 使用base85解密 成功拿到flag

  10. java虚拟机入门（五）- 常见垃圾回收器及jvm实现

    上节讲完了垃圾回收的基础,包括java的垃圾是什么,如何寻找以及常用的垃圾回收算法,那么那么多的理论知识讲完了,具体是什么样的东西在做着回收垃圾的事情呢?我们接下来就好好聊聊jvm中常用的垃圾回收器. ...