使用jQuery的validate插件实现一个简单的表单验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> </head>
<body style="margin: 50px;">
<form id="form1" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
<!--引入JQ库-->
<script src="../js/jquery-3.3.1.js"></script>
<!--引入validate库-->
<script src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$("#form1").validate({
rules:{
username:{
required:true
},
password:{
required:true,
minlength:4,
maxlength:6
}
},
messages:{
username:{
required:"用户名必填"
},
password:{
required:"密码不能为空",
minlength:"密码的最小长度为4",
maxlength:"密码的最大长度为6"
}
}
})
</script>
</body>
</html>

如果是radio或者checkbox,校验不通过时默认的提示信息在第一个radio后面,的解决方案:

//在radio标签前后面加上以下标签:注意,lable的for属性值要与radio的name属性值保持一致。

    <label class="error" for="gender" style="display: none;"></label>

JQuery表单验证插件的更多相关文章

  1. 【jquery】Validform,一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  2. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  3. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  4. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  5. 轻量级实用JQuery表单验证插件:validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

  6. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  7. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  8. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  9. jQuery 表单验证插件——Validation(基础)

    这个插件不错,是用jquery写的.能进行表单验证.我喜欢它的原因是因为 1.他有自带的验证规则 2.你可以自己写验证规则 3.可以通过ajax与后台交互,与后台数据比较.最后返回结果!我在表单中要验 ...

随机推荐

  1. LRU缓存算法与pylru

    这篇写的略为纠结,算法原理.库都是现成的,我就调用了几个函数而已,这有啥好写的?不过想了想,还是可以介绍一下LRU算法的原理及简单的用法.   LRU(Least Recently Used,最近最少 ...

  2. (fields.E130) DecimalFields must define a 'decimal_places' attribute.

    DecimalField类型:固定精度的十进制数,一般用来存金额相关的数据.额外的参数包括DecimalField.max_digits(整个数字的长度)和DecimalField.decimal_p ...

  3. UVa 10817 - Headmaster's Headache(状压DP)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  4. BZOJ3238:[AHOI2013]差异(SAM)

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...

  5. 【[HAOI2009]逆序对数列】

    发现自己学了几天splay已经傻了 其实还是一个比较裸的dp的,但是还是想了一小会,还sb的wa了几次 首先这道题的状态应该很好看出,我们用\(f[i][j]\)表示在前\(i\)个数中(即\(1-i ...

  6. CF311E Biologist

    嘟嘟嘟 很显然是一道最小割模型. 做完几道题后.图的大概就能想出来了: 1.对于每一个动物,如果是0,就和s连一条边,否则向t连一条边. 2.对于每一个任务,题中要求最大利润,可以转化成最小损失. ( ...

  7. BZOJ 3399 [Usaco2009 Mar]Sand Castle城堡:贪心【最小匹配代价】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3399 题意: 给你一个数列a,和一个可变换顺序的序列b(数列长度≤25000). a增加一 ...

  8. 20165214 2018-2019-2 《网络对抗技术》Exp6 信息搜集与漏洞扫描 Week9

    <网络对抗技术>Exp6 信息搜集与漏洞扫描 Week9 一.实验目标与内容 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 使用搜索 ...

  9. 十二、IntelliJ IDEA 中的版本控制介绍(中)

    由于 IntelliJ IDEA 支持的版本控制工具非常的多,但咱们真正能够用到的也就两三个而已,因此在本篇博文中,咱们主要介绍 SVN.Git 和 GitHub 的配置方法. SVN 如果想要在 I ...

  10. mininet的安装

    安装Mininet主要参照李呈的教程 http://www.sdnlab.com/11495.html 我的做法是: 安装虚拟机VM(很容易查找). 需要开启虚拟化: BIOS中依次选择:Advanc ...