【Java EE 学习 33 下】【validate表单验证插件】
一、validate
1.官方网站:http://jqueryvalidation.org/
2.文档说明:http://jqueryvalidation.org/documentation/
3.js文件下载:官方网站首页,提供一个最新版本的链接
二、验证表单的一般步骤
1.准备好从JQuery官方网站下载JQuery.js文件和validate官网下载的jquery.validte.js文件
注意事项:validate并不支持所有版本的JQuery,支持的版本目前有:JQuery-1.7.2,1.8.3,1.9.1,1.11.1,该信息可以从官网首页Required字段查找到。
2.在网页代码中引入两个文件(不要使用自带的JQuery.js文件,该文件在之前的版本中使用比较方便,但是最新版本的JQuery.js文件里面没有任何实质性的内容,最后还是引入了外部的js文件,大多会使用JQuery-1.11.1.js文件,所以最好直接使用该js文件)。
3.调用验证的方法
$("#empForm").validate(
{
//自定义规则
rules:{ },
//自定义提示信息
messages:{ }
}
);
三、validate的系统规则详情(可参考官网doc)
1.英文原版
required
– Makes the element required.remote
– Requests a resource to check the element for validity.minlength
– Makes the element require a given minimum length.maxlength
– Makes the element require a given maxmimum length.rangelength
– Makes the element require a given value range.min
– Makes the element require a given minimum.max
– Makes the element require a given maximum.range
– Makes the element require a given value range.email
– Makes the element require a valid emailurl
– Makes the element require a valid urldate
– Makes the element require a date.dateISO
– Makes the element require an ISO date.number
– Makes the element require a decimal number.digits
– Makes the element require digits only.creditcard
– Makes the element require a credit card number.equalTo
– Requires the element to be the same as another one
2.中文版
(1)required:true,必须字段
(2)remote:"check.jsp",使用ajax方法调用check.jsp验证输入
(3)email:true,必须输入正确格式的电子邮件
(4)url:true,必须输入正确格式的网址
(5)date:true,必须输入正确格式的日期
(6)dateISO:必须输入正确格式的日期(ISO),例如:2009-1-1,1009/1/1,只验证格式,不验证有效性
(7)number:true,必须输入合法的数字
(8)digits:true,必须输入整数
(9)creditcard:true,必须输入合法的信用卡号
(10)equalTo:"#filed",输入的值必须和filed的值相同
(11)accept:输入拥有合法后缀名的字符串
(12)maxlength:5,输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10,输入长度最多是最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10],输入长度必须在5到10之间的字符串,汉字算一个字符。
(15)range:[5,10],输入的值必须在5到10之间
(16)max:5,输入的值最大不能大到5
(17)min:5,输入的值最小不能小于5
3.使用样例
rules:{
realname:{
required:true
},
username:{
required:true,
rangelength:[5,8]
},
psw:{
required:true,
rangelength:[6,12]
},
psw2:{
required:true,
rangelength:[6,12],
equalTo:"#psw"
},
gender:{
required:true
},
age:{
required:true,
range:[26,50]
},
edu:{
required:true
},
birthday:{
required:true,
dateISO:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
cart:{
required:true,
checkIdLength:true,
checkId:true
}
},
四、提示信息messages的写法
写法格式和rules相同,但是在每个方法之后需要写上字符串,用于提示信息用。
例:
messages:{
realname:{
required:"真实姓名不能为空!"
},
username:{
required:"登录名不能为空!",
rangelength:"登录名长度应当在5-8之间"
},
psw:{
required:"密码不能为空!",
rangelength:"密码长度为6-12!"
},
psw2:{
required:"请再次输入密码!",
rangelength:"密码长度为6-12!",
equalTo:"两次输入的密码不一致!"
},
gender:{
required:"性别必须进行选择!"
},
age:{
required:"年龄不能为空!",
range:"年龄范围应在26-50之间!"
},
edu:{
required:"请选择学历信息!",
},
birthday:{
required:"请输入日期信息!",
dateISO:"请输入正确格式的日期!"
},
checkbox1:{
required:"请至少选择一个兴趣爱好!"
},
email:{
required:"电子邮箱不能为空!",
email:"请输入正确的电子邮箱!"
},
cart:{
required:"身份证号码不能为空!",
checkIdLength:"身份证号码长度应为15或者18",
checkId:"身份证号码不合法!"
}
}
}
五、自定义规则
1.流程
(1)在定义校验规则之前先定义一个方法用于执行校验规则的逻辑
(2)在rules中指定某个域使用该校验
(3)在messages中指定这个域使用此校验规则没有通过的提示信息
2.自定义校验规则的格式
$.validator.addMethod("规则名称,如required",function(value,element,params)
{
//value是元素的值,如text格式的input元素value值
//element是元素本身,如Input
//params是指在rules中设置的参数
},"错误提示信息");
3.示例:
(1)定义方法
$.validator.addMethod("checkIdLength",function(value,element,params){
if(value.length!=15&&value.length!=18)
return false;
return true;
},"长度错误!");
(2)rules中指定某个域使用该校验
cart:{
required:true,
checkIdLength:true
}
(3)在messages中定义错误提示信息
cart:{
required:"身份证号码不能为空!",
checkIdLength:"身份证号码长度应为15或者18"
}
六、综合练习
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
/*********************************************************************************************************/ </script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td><label for="realname">真实姓名(不能为空 ,没有其他要求)</label></td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>
<label for="username">登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</label>
</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>
<label for="psw">密码(不能为空,长度6-12字符或数字,不能包含中文字符):</label>
</td>
<td><input type="password" id="psw" name="psw" style="width:120px" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
</tr>
<!-- -->
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
<label style="display: none" for="gender" class="error">请选择性别</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr> <tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">--请选择你的学历--</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr> <tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td>
</tr> <tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/>乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" />上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" />购物
<label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" style="width:120px" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="cart" style="width:200px" name="cart" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table> </form>
<script type="text/javascript">
$.validator.addMethod("checkIdLength",function(value,element,params){
if(value.length!=15&&value.length!=18)
return false;
return true;
},"长度错误!");
$.validator.addMethod("checkId",function(value,element,params){
if(value.length==15){
//正则表达式不能带上引号
var pattern=/^\d{15}$/;
//alert("长度为15!");
var result=pattern.test(value);
return result;
}
if(value.length==18){
var pattern=/^\d{18}|\d{17}[X|x]$/;
var result=pattern.test(value);
return result;
}
return false;
});
</script>
<script type="text/javascript">
/* $(document).ready(function(){
alert("开始加载页面!");
}); */
$("#empForm").validate({
//定义规则
rules:{
realname:{
required:true
},
username:{
required:true,
rangelength:[5,8]
},
psw:{
required:true,
rangelength:[6,12]
},
psw2:{
required:true,
rangelength:[6,12],
equalTo:"#psw"
},
gender:{
required:true
},
age:{
required:true,
range:[26,50]
},
edu:{
required:true
},
birthday:{
required:true,
dateISO:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
cart:{
required:true,
checkIdLength:true,
checkId:true
}
},
//定义犯错的时候使用的提示信息
messages:{
realname:{
required:"真实姓名不能为空!"
},
username:{
required:"登录名不能为空!",
rangelength:"登录名长度应当在5-8之间"
},
psw:{
required:"密码不能为空!",
rangelength:"密码长度为6-12!"
},
psw2:{
required:"请再次输入密码!",
rangelength:"密码长度为6-12!",
equalTo:"两次输入的密码不一致!"
},
gender:{
required:"性别必须进行选择!"
},
age:{
required:"年龄不能为空!",
range:"年龄范围应在26-50之间!"
},
edu:{
required:"请选择学历信息!",
},
birthday:{
required:"请输入日期信息!",
dateISO:"请输入正确格式的日期!"
},
checkbox1:{
required:"请至少选择一个兴趣爱好!"
},
email:{
required:"电子邮箱不能为空!",
email:"请输入正确的电子邮箱!"
},
cart:{
required:"身份证号码不能为空!",
checkIdLength:"身份证号码长度应为15或者18",
checkId:"身份证号码不合法!"
}
}
});
</script>
</body>
</html>
validate_form.html
运行结果:
七、总结一些注意事项
1.实际上对域的监听是通过<label></label>标签实现的,所以尽量要在被监听的元素旁边声明Label标签,如<label for="username">用户名</label>,其中for的名字要和被监听域的name属性相同,如<input type="text" name="username">,事实上如果没有改标签的话validate插件会自动检测并通过dom添加一个label标签。
2.对于下拉列表框,如果让某一个option元素的值变成"",那么该元素就不会被监听,这样就算是单击了该项,也不会被认为执行了选择的动作,这种情况适用于提示的option,如<option value="">请选择一个省份</option>。
3.规则添加的顺序决定了该规则的执行顺序,所以要谨慎选择添加规则选项的顺序。
4.不要使用""将正则表达式引起来,否则后果很严重。使用形式:/^内容$/
5.单选框、复选框必须加上label标签,下拉菜单则可以不用。
单选框:
<input type="radio" id="gender_male" value="m" name="gender"/>男
<input type="radio" id="gender_female" value="f" name="gender"/>女
<label style="display: none" for="gender" class="error">请选择性别</label>
复选框:
<input type="checkbox" name="checkbox1" id="qq1"/>乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" />上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" />购物
<label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
【Java EE 学习 33 下】【validate表单验证插件】的更多相关文章
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
随机推荐
- less简介
Less是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(mixins).操作(operations)和功能(functions)等等,最棒的 ...
- MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案
1.选中报错的jquery文件例如"jquery-1.8.0.min.js". 2.右键选择 MyEclipse-->Exclude From Validation . 3. ...
- Python Day1
一.安装python windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装到C盘下 3.配置环境变量 右键计算机属性---高级系统设置 ...
- Thinkphp中controller控制器根据curl函数请求数据
public function member(){ $url="http://aitequn.tjnit.com/UserAction_findAllUser"; $ch =cur ...
- asp rs开启关闭问题
使用rs.close关闭后,可以直接用rs.open来打开数据表:如果用了set rs = nothing 从内存中清除rs对象,再次加载rs对象就需要使用set rs=server.createob ...
- 在Application中集成Microsoft Translator服务之优化
在一篇文章中我们已经实现了功能,但是一个明显的问题是响应时间非常长,用户体验非常糟糕,这篇文章将带你找出问题所在并进行优化 为了找出追魁祸首,这里使用 System.Diagnostics.Stopw ...
- asp.net中套用母版页之后的findcontrol
套用模板页之后,如果要在内容页中查找某个控件,需要先找到模板页中的ContentPlaceHolder,在通过ContentPlaceHolder查找代码,如下: LinkButton btn = t ...
- [Linux] Linux指令汇总(持续更新中...)
写在前面: 以前真心没有玩过Linux系统,总感觉整天摆弄Linux的同学都是大牛.如今,在公司里实习需要远程登录Linux服务器,所有的代码都要在开发板上完成,所以被逼无奈也不得不定下心来好好学学L ...
- android微信聊天记录导出到电脑【微信安卓版技巧】
微信,对它又爱又恨!爱的是微信能替代很多手机通话短信,恨的是有些较早前的手机不能友好支持,比如ytkah之前用的i8000,挺上手的,就是没办法装微信,当时工作需要必须用微信,只好忍痛割爱买了个and ...
- springmvc 表单提交
Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...