<!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. 如何在面试中介绍自己的项目经验（面向java改进版）

    本人于3年前写的博文,如何在面试中介绍自己的项目经验,经过大家的捧场,陆续得到了将近7万个点击量,也得到了众多网站公众号的转载,不过自己感觉,这篇文章更多的是偏重于方法,没有具体给到Java方面相关的 ...

  2. 天梯赛练习 L3-008 喊山 (30分) bfs搜索

    题目分析: 本题是一题比较简单的bfs搜索题,首先由于数据给的比较多不能直接开二维数组存放,而是用了vector的动态的二维数组的形式存放,对于每个出发点,我们bfs向四周搜索,标记搜索过的点,遇到搜 ...

  3. Java开发手册之异常日志

    1.捕获异常的时候,有一种特殊情况,就是方法体内部所抛出的并不是Exception而是Error,这个时候,上层方法捕获Exception就会失败.所以在某些场合需要捕获更高一级别的Throwable ...

  4. MySQL查询优化之 index 索引的分类和使用

    索引的分类 主键索引 (PRIMARY KEY) 唯一的标识符, 主键不可重复, 只能有一列作为主键 唯一索引 (Unique KEY) 避免重复的列出现, 唯一索引可以重复, 多个列都可以标识为唯一 ...

  5. 【RAC】双节点RAC搭建

    本文主要是双节点的RAC进行搭建,根据黄伟老师的视频进行总结和使用. 搭建环境: 1.两台安装好Linux_x64系统的服务器 2.IP设置 注意:Priv-IP的IP是自己一个网段,而剩下的SCAN ...

  6. 【Oracle】查看oracle用户相关权限

    系统权限 SELECT * FROM DBA_SYS_PRIVS WHERE GRANTEE = 'CHAXUN' UNION ALL SELECT * FROM DBA_SYS_PRIVS WHER ...

  7. SWPU2019

    一.题目打开介绍 这是题目本身打开的样子,继续进入题目 二.做题 简单的登陆界面和注册界面,没有sql注入已经尝试 申请发布广告 习惯性的测试 然后开始尝试注入,抓包, 两个都要,经过union注入判 ...

  8. git创建分支并关联远程分支

    1.新建本地分支: 如图,再输入你的分支名字,然后选择从哪个远程分支拉代码,如选择master 至此本地分支创建完成. 2.关联远程分支: (1).先输入git branch -vv,看看分支与远程分 ...

  9. Kubernetes 开船记-脚踏两只船：用 master 服务器镜像克隆出新集群

    自从2020年2月23日 园子全站登船 之后,我们一边感叹"不上船不知道,一上船吓一跳" -- kubernetes 比 docker swarm 强大太多,一边有一个杞人忧天的担 ...

  10. commons-lang3相关类实例

    一.ArrayUtils //1.判断两个数组长度是否相等 ArrayUtils.isSameLength(new int[] {1,2,3,4}, new int[] {1,2,3,4});//tr ...