您的位置：首页 > Web前端 > JQuery

关于jquery formValidator表单验证插件的使用

2015-11-27 11:20 796 查看

一、在java后台开发中，新增、修改页面时常会用到表单验证。可以手动验证，但用插件验证会提高开发效率。

二、

1、首先下载插件

地址：http://download.csdn.net/download/liangzehao521/5213684

2、将下载的文档放入Webapp目录下面的下（最好自己建一个文件夹，这样可以将所有的插件都放入这个文件夹目录下）

3、在webapp目录下面新建一个jsp页面

引入插件中的三个文件：jquery-1.4.4.min.js、formValidator-4.1.3.min.js、formValidatorRegex.js 即可。

4、具体的代码编写如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="includes/formvalidator4.1.3/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="includes/formvalidator4.1.3/formValidator-4.1.3.min.js"></script>
<script type="text/javascript" src="includes/formvalidator4.1.3/formValidatorRegex.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.formValidator.initConfig({alertMessage:true,onError:function(msg){alert(msg);}});
$("#sfz").formValidator({ onShow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", onCorrect: "输入正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你输入的身份证格式不正确" }); ;
$("#username").formValidator({
onShow: "请输入用户名",
onfocus: "请输入用户名",
onCorrect: "输入正确"
}).inputValidator({
min:4,max:10,
onError:"你输入的用户名非法,请确认"
});
$("#pass").formValidator({onShow: "请输入密码", onfocus: "请输入密码",onCorrect: "输入正确" }).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},onError:"密码不能为空,请确认"});
$("#pass1").formValidator({
onShow:"输再次输入密码",
onFocus:"至少1个长度",
onCorrect:"密码一致"})
.inputValidator({
min:1,
empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},
onError:"重复密码不能为空,请确认"
})
.compareValidator({
desID:"pass1",
operateor:"=",
onError:"两次次密码不一致,请确认"
});
});
function aa(){
if(!$.formValidator.pageIsValid()) return ;
}
</script>
</head>
<body>
<table border="0px" style="font-size:12px">
<tr><input type="button" value="提交" onclick="aa();"/></tr>
<tr>
<td align="right">身份证(正则表达式库):</td>
<td><input name="sfz" type="text" id="sfz" /></td>
<td><div id="sfzTip" style="width:300px"></div></td> 
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" value="zhangsan" id="username" name="username"/></td>
<td><div id="usernameTip" style="width:300px"></div></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pass" name="pass"/></td>
<td><div id="passTip" style="width:300px"></div></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="pass1" name="pass1"></td>
<td><div id="pass1Tip" style="width:300px"></div></td>
</tr>
</table>
</body>
</html>

5、在地址栏输入链接：http://localhost:8888/test5/inputForm.jsp 回车

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 表单验证

相关文章推荐

新的分享

章节导航