使用jQuery的validation插件实现表单校验

前端表单校验:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单校验(使用validation插件实现)</title>
 6     <script src="../jslib/jquery-1.11.0.js"></script>
 7     <script src="../jslib/jquery.validate.js"></script>
 8     <script src="../jslib/messages_zh.js"></script>
 9
10     <script>
11         $(function () {
12             $("#formid").validate({
13                 rules:{
14                     username:{
15                         required:true
16                     },
17                     password:{
18                         required:true,
19                         rangelength:[6,10]
20                     },
21                     repassword:{
22                         required:true,
23                         equalTo:"[name=‘password‘]"
24                     },
25                     height:{
26                         required:true,
27                         min:[180]
28                     },
29                     age:{
30                         required:true,
31                         range:[18,56]
32                     }
33                 },
34                 messages:{
35                     username:{
36                         required:"不能为空"
37                     },
38                     password:{
39                         rangelenght:"密码长度必须在在6-10个字符之间"
40                     },
41                     height:{
42                         min:"身高必须在180以上"
43                     },
44                     age:{
45                         range:"年龄必须在在18岁到56岁之间"
46                     }
47                 }
48             });
49         });
50     </script>
51 </head>
52 <body>
53 <form id="formid" action="#">
54
55     <!--不能为空-->
56     用户名:<input type="text" name="username"/> <br/>
57
58     <!--长度在6-10个字符之间-->
59     密码:<input type="text" name="password"/> <br />
60
61     重复密码:<input type="text" name="repassword"/> <br />
62
63     <!--大于180cm-->
64     身高:<input type="text" name="height"/> <br />
65
66     <!--在18岁到56岁之间-->
67     年龄:<input type="text" name="age"/> <br />
68
69     邮箱:<input type="text" name="email"/> <br />
70
71     <input type="submit" value="提交"/>
72 </form>
73 </body>
74 </html>

原文地址:https://www.cnblogs.com/gdwkong/p/8267451.html

时间: 2024-12-29 11:23:25

使用jQuery的validation插件实现表单校验的相关文章

jQuery常用插件与jQuery使用validation插件实现表单验证实例

jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . pickadate.  Echarts.chosen.(编辑器插件) ckeditor在百度上都可以直接搜索 表单校验 jQuery插件validation:https://jqueryvalidation.org/ validation是一个基于jQuery的插件,里面有了jQuery的一些函数

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

使用jquery.validate.js插件进行表单里控件的验证

jsp中具体实现的代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos

JQuery中内容操作函数、validation表单校验

JQuery:内容体拼接(可以直接拼接元素节点和内容节点) JQuery实现: 方案1:A.append(B); == B.appendTo(A);A的后面拼接B 方案2: A.prepend(B); == B.prependTo(A);A文本的最前面插入B text()与html()比较: 1.相同点: 都可以设置或获取内容 2.不同点: 获取时,html()获取的是所有内容体:标签+文本 text()获取的只是文本 设置时,如果设置的内容有html()标签 html()设置的内容可以被浏览器

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields

自己编写jQuery插件 之 表单验证

吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar([email protected]) */ (function ($) { $.fn.checkFor

JQuery 表单校验插件 validate 实践纪录

JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个. 官网地址 : http://jqueryvalidation.org/ 官网文档:http://jqueryvalidation.org/documentation/ 下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考: http://jq

JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)

一.jQuery 使用插件 插件的查找与帮助 - jQuery 官方网站的插件库(http://plugins.jquery.com) 提供了大量的插件.并给出去了每个插件的用户评级.版本及bug等 - 库中列出了每个插件的ZIP文件下载.演示.示例代码及教程 使用插件 - step 1:将插件包导入到页面中,并确保它在jQuery源文件之后 <script src="jqeury-1.11.1.js"></script> <script></