使用jquery.validate.js插件进行表单里控件的验证
2024-04-10 02:41:33
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/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>Insert title here</title>
8 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
9
10 <script src="jquery-2.1.1.js" type="text/javascript"></script>
11 <script src="jquery.validate.js" type="text/javascript"></script>
12 <script type="text/javascript">
13 /*************************************************************************/
14 //自定义的方法：
15 /*
16 * $.validator.addMethod("af",function(value,element,params)
17 * * af：增加的方法的名称
18 * * function(value,element,params)
19 * * value 元素的值
20 * * element 元素本身
21 * * params 默认值
22 */
23 $.validator.addMethod("cartlength",function(value,element,params){
24 //alert(value+" "+element+" "+params);
25 var len = value.length;
26 if(len!=15 && len!=18){
27 return false;
28 }
29 return true;
30 });
31
32 /*************************************************************************/
33
34 //验证15位身份证是否符合要求
35 $.validator.addMethod("cartlength15",function(value,element,params){
36 var len = value.length;
37 if(len == 15){
38 var pattern=/^\d{15}$/;
39 if(pattern.test(value)){
40 return false;
41 }
42 }
43 return true;
44 });
45 /*************************************************************************/
46 //验证18位身份证是否符合要求
47 $.validator.addMethod("cartlength18",function(value,element,params){
48 var len = value.length;
49 if(len == 18){
50 var pattern=/^\d{18}$/;
51 if(pattern.test(value)){
52 return false;
53 }
54 }
55 return true;
56 });
57 //window.onload();
58 $(document).ready(function() {
59 //调用验证方法
60 $("#exForm").validate({
61 /*************************************************************************/
62 //验证规则
63 rules:{
64 realname:{ //注意：每个字段是dom元素节点的名称name,不是id
65 required:true,
66 maxlength:8,
67 minlength:2
68 },
69 pwd:{
70 required:true,
71 minlength:6,
72 maxlength:16
73 },
74 pwd1:{
75 required:true,
76 minlength:6,
77 maxlength:16,
78 equalTo:("#pwd")
79 },
80 gender:{
81 required:true
82 },
83 sex:{
84 required:true,
85 range:[26,50]
86 },
87 edu:{
88 required:true
89 },
90 birthday:{
91 required:true,
92 date:true
93 },
94 checkbox1:{
95 required:true
96 },
97 email:{
98 required:true,
99 email:true
100 },
101 cart:{
102 required:true,
103 cartlength:"5",
104 cartlength15:"15", //使用自定义的方法验证
105 cartlength18:"18" //使用自定义的方法验证
106 }
107 },
108 /*************************************************************************/
109 //显示验证出错的提示信息
110 messages:{
111 realname:{
112 required:"您的姓名不能为空",
113 maxlength:"您的姓名长度不大于8位字符",
114 minlength:"您的姓名长度不小于2位字符"
115 },
116 pwd:{
117 required:"您输入的密码不能为空",
118 minlength:"您输入的密码不能少于6位",
119 minlength:"您输入的密码不能多于16位"
120 },
121 pwd1:{
122 required:"您确认输入的密码不能为空",
123 minlength:"您确认输入的密码不能少于6位",
124 minlength:"您确认输入的密码不能多于16位",
125 equalTo:"您两次输入的密码不一致"
126 },
127 gender:{
128 /*
129 *
130 */
131 },
132 sex:{
133 required:"年龄不能为空",
134 range:"年龄介于26到50岁之间"
135 },
136 edu:{
137 required:"请选择您的学历"
138 },
139 birthday:{
140 required:"出生日期不能为空",
141 date:"出生日期格式不正确"
142 },
143 checkbox1:{
144 // required:""
145 },
146 email:{
147 required:"电子邮箱 不能为空",
148 email:"电子邮箱格式不正确"
149 },
150 cart:{
151 required:"身份证不能为空",
152 cartlength:"身份证长度只能是15位或者18位",
153 cartlength15:"15位身份证输入有误",
154 cartlength18:"18位身份证输入有误"
155 }
156 }
157 /*************************************************************************/
158 });
159 });
160
161
162
163 </script>
164 </head>
165 <body>
166 <form action="" id="exForm" name="exForm">
167 <center>
168 <h1>验证信息</h1>
169 <table border="1">
170 <tr>
171 <td>真实姓名(不能为空)</td>
172 <td><input type="text" id="realname" name="realname"/></td>
173 </tr>
174 <tr>
175 <td>请输入您的密码(密码6-16位)</td>
176 <td><input type="password" id="pwd" name="pwd"></td>
177 </tr>
178 <tr>
179 <td>请确认输入您的密码(密码6-16位)</td>
180 <td><input type="password" id="pwd1" name="pwd1"></td>
181 </tr>
182 <tr>
183 <td align="center" colspan="3">
184 <input type="radio" id="m" name="gender"/>男
185 <input type="radio" id="f" name="gender"/>女
186 <label style="display: none;" for="gender" class="error">请选择性别</label>
187 </td>
188 </tr>
189 <tr>
190 <td>年龄(26-50)</td>
191 <td><input type="text" id="sex" name="sex"/></td>
192 </tr>
193 <tr>
194 <td>您的学历</td>
195 <td>
196 <select id="edu" name="edu">
197 <option value="">---请选择您的学历--</option>
198 <option value="a">小学</option>
199 <option value="b">初中</option>
200 <option value="c">高中</option>
201 <option value="d">大学</option>
202 <option value="e">研究生</option>
203 <option value="f">硕士生</option>
204 <option value="g">博士生</option>
205 </select>
206 </td>
207 </tr>
208 <tr>
209 <td>出生日期</td>
210 <td><input type="text" id="birthday" name="birthday"/></td>
211 </tr>
212 <tr>
213 <td>兴趣爱好：</td>
214 <td colspan="2">
215 <input type="checkbox" name="checkbox1" id="q1"/>乒乓球
216 <input type="checkbox" name="checkbox1" id="q2" value="q2"/>羽毛球
217 <input type="checkbox" name="checkbox1" id="q3" value="q3"/>篮球
218 <input type="checkbox" name="checkbox1" id="q4" value="q4"/>旅游
219 <label style="display: none;" for="checkbox1" class="error">至少选择一个兴趣爱好</label>
220 </td>
221 </tr>
222 <tr>
223 <td>电子邮箱</td>
224 <td><input type="text" id="email" name="email"/></td>
225 </tr>
226 <tr>
227 <td>身份证(必须是15位或者18位)</td>
228 <td><input type="text" id="cart" name="cart"></td>
229 </tr>
230 </table>
231 <input type="submit" value="提交"/>
232 </center>
233 </form>
234 </body>
235 </html>实现的效果图：
转载于:https://www.cnblogs.com/0519xf/p/4724504.html
使用jquery.validate.js插件进行表单里控件的验证相关推荐
- jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
- python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...
PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...
- asp.net夜话之三：表单和控件
在今天我主要要介绍的有如下知识点: HTML表单的提交方式 HTM控件 获取HTML表单内容 乱码问题 SQL注入 服务器端表单 HTML服务器控件 HTML表单的提交方式对于一个普通HTML表单来说 ...
- H5--新增表单元素控件属性事件
H5网站重构 先简单回顾一下H5新标签:结构性标签.功能性标签 结构性标签:负责web上下文件结构的定义 功能性标签:功能性内容的表达 表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些 ...
- 使用jquery.form.js实现form表单无刷新提交简单示例
2019独角兽企业重金招聘Python工程师标准>>> 直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代 ...
- 使用jquery validate结合zui作表单验证
1.引入jquery validate和zui <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) --> <script src="${_b ...
- servlet html js提交表单,使用jquery.form.js实现form表单无刷新提交简单示例
直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单! Servlet代码: package com.pro ...
- 驰骋工作流引擎表单设计控件-字段类控件(2)
2019独角兽企业重金招聘Python工程师标准>>> Technorati Tags: 开源工作流引擎, 驰骋.net工作流引擎, 开源表单引擎, ccform, ccflow, ...
- VBA，表单及其控件，如何取得表单控件的名字，大小写注意
1 如何取得表单控件的名字? 1.1 问题的由来 表单控件和 表单的 activeX控件,以及窗体控件不同 表单控件不能直接编写其相关代码,也看不到其属性栏 但是可以直接绑定一个sub 但是问题来了: ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
最新文章
- 如何将本地项目上传到自己的GitHub上
- Verilog随机数生成$random
- MySQL触发器的使用
- 数据库之取出表中最新时间的数据
- WinForm 之 程序启动不显示主窗体
- C语言实现Bogo排序(Bogo sort)算法(附完整源码)
- ES5 数组扩展方法 forEach/filter/map的使用与重写
- QPW 企业员工表（tf_company_employee）
- virtualbox怎么共享文件夹 linux,Virtualbox中Ubuntu设置共享文件夹
- 搞定这个月薪50K的AI热门领域，看这9本书就够了
- 垃圾回收算法的实现原理_有关垃圾回收算法工作原理的动画指南
- java rmi 多ip_在rmi连接中客户端指定一个ip地址，但程序执行中却转换成另一个地址...
- WF4.0实战(九)：猜数字游戏，测下你的智力
- PIE SDK PCA融合
- Android中加载Gif动画
- 这游戏到底怎么了？ 一年后，再看《刺客信条奥德赛》
- 关于深恶痛绝的file类的delete问题
- SpringBoot重启后，第一次请求接口请求慢的解决方案
- Linux与Mac系统用SCP互传文件
- 让机器认知中文实体 — 复旦大学知识工场发布中文实体识别与链接服务