jQuery+easyui validatebox 验证框

最新推荐文章于 2019-03-08 08:54:16 发布

chaoyv

最新推荐文章于 2019-03-08 08:54:16 发布

阅读量119

点赞数

分类专栏： Struts2 文章标签： javascript java ui ViewUI

本文链接：https://blog.csdn.net/chaoyv/article/details/88303121

版权

Struts2 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

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("表单提交成功");
%>

效果图：