jQuery+easyui validatebox 验证框
程序员文章站
2024-02-04 21:11:04
...
index.jsp 页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>对话框</title>
<!-- easyui 主题样式 -->
<link rel="stylesheet" href="themes/icon.css" type="text/css" />
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- easy ui -->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!-- 本地化 -->
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
//默认邮箱验证
$("#email").validatebox({
required:true,
validType:'email',
missingMessage:'邮箱不能为空',
});
//自定义长度验证
$("#uname").validatebox({
required:true,
missingMessage:'用户名不能为空',
validType:'minLeght[2]'
});
//电话号码验证
$("#phone").validatebox({
validType:'mobile'
});
//日历控件
$("#birth").datebox();
//表单提交
$("#userInfo").form({
url:"server.jsp",
onSubmit:function(){
if($("#userInfo").form("validate")==false){
$.messager.alert("表单","表单输入有误，请检查再提交！","warning");
return false;
}
},
success:function(data){
alert(data);
}
});
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
//最小长度
minLeght:{
//验证规则
validator:function(value,param){
return value.length>=param[0];
},
//报错信息
message:'不能小于{0}个字符.'
},
//手机号
mobile:{
validator:function(value){
return /^1[0-9]{10}$/i.test($.trim(value));
},
message:'手机号码格式错误'
}
});
});
</script>
</head>
<body>
<form id="userInfo" method="post">
姓名：<input type="text" id="uname" name="uname"/><br/>
邮箱：<input type="text" id="email" name="email"/><br/>
电话：<input type="text" id="phone" name="phone"/><br/>
生日：<input type="text" id="birth" name="birth"/><br/>
<input type="submit" value="提交" id="btnSubmit"/>
</form>
</body>
</html>
server.jsp 页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
request.setCharacterEncoding("utf-8");
out.print(request.getParameter("uname"));
out.print("表单提交成功");
%>
效果图：