(Jquery功能篇)easy UI 验证功能

阿里阅读：659 2021-04-01 10:21:30 评论：0
截图展示：
源代码展示：
<%@ 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>esay_ui框架 验证功能</title> 
		<!--引入相关的资源文件（js）  --> 
		<!--Jquery 核心js 文件  --> 
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
		<!--easy _ui组件  --> 
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
		<!--引入相关资源文件(css)  --> 
		<!--esay_ui 的css  --> 
		<link rel="stylesheet" type="text/css" href="css/easyui.css"> 
		<!--easy_ui 验证框架 的css文件   --> 
		<link rel="stylesheet" type="text/css" href="css/validatebox.css"> 
 
		<script> 
	function validate() { 
		//获取Id为name的input的值   
		var name = document.getElementById("name").value; 
		//alert("相关参数 ："+name); 
		var password = document.getElementById("password").value; 
		var repassword = document.getElementById("repassword").value; 
		if (password != repassword) { 
			document.getElementById("password").value = ""; 
			document.getElementById("repassword").value = ""; 
			alert("输入密码与密码确认不一致 "); 
			return false; 
		} 
		var email = document.getElementById("email").value; 
 
		if (email == null || email == "") { 
			alert("请输入邮箱地址 "); 
			return false; 
		} 
		//无法获取时间控件的值，待解决 (Easy UI的Bug问题) 
		var birthday = document.getElementById("birthday").value; 
		if (birthday == null || birthday == "") { 
			alert("请输入正确生日日期  "); 
			return false; 
		} 
		var phone = document.getElementById("phone").value; 
		if (phone == null || phone == "") { 
			alert("请输入正确电话号码   "); 
			return false; 
		} 
		var url = document.getElementById("url").value; 
		if (url == null || url == "") { 
			alert("请输入正确的url"); 
			return false; 
		} 
 
		alert("验证数据成功 ，可以进行相关的异步请求了 ！"); 
 
	} 
</script> 
 
 
 
	</head> 
 
	<body> 
		<div class="easyui-panel" title="Register" 
			style="width: 400px; padding: 10px"> 
			<table> 
				<tr> 
					<td> 
						r用户名: 
					</td> 
					<!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 --> 
					<td> 
						<input class="easyui-validatebox" 
							data-options="required:true,validType:'length[3,10]'" id="name"> 
					</td> 
				</tr> 
				<tr> 
					<td> 
						密码: 
					</td> 
					<!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 --> 
					<td> 
						<input class="easyui-validatebox" type="password" 
							data-options="required:true,validType:'length[3,10]'" 
							id="password"> 
					</td> 
				</tr> 
				<tr> 
					<td> 
						密码确认: 
					</td> 
					<!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 --> 
					<td> 
						<input class="easyui-validatebox" type="password" 
							data-options="required:true,validType:'length[3,10]'" 
							id="repassword"> 
					</td> 
				</tr> 
				<tr> 
					<td> 
						邮箱地址: 
					</td> 
					<!--数据要求：必须输入，验证数据类型：邮箱类型  --> 
					<td> 
						<input class="easyui-validatebox" 
							data-options="required:true,validType:'email'" id="email"> 
					</td> 
				</tr> 
				<tr> 
					<td> 
						生日日期: 
					</td> 
					<td> 
						<input class="easyui-datebox" id="birthday"> 
					</td> 
				</tr> 
				<tr> 
					<td> 
						URL: 
					</td> 
					<!--数据要求：必须输入，验证数据类型：URL类型  --> 
					<td> 
						<input class="easyui-validatebox" 
							data-options="required:true,validType:'url'" id="url"> 
					</td> 
				</tr> 
				<tr> 
					<td> 
						电话号码: 
					</td> 
					<!--数据要求：必须输入，验证数据类型：电话类型  --> 
					<td> 
						<input class="easyui-validatebox" data-options="required:true" 
							id="phone"> 
					</td> 
				</tr> 
			</table> 
		</div> 
		<input type="submit" value="验证" οnclick="validate()"> 
 
 
	</body> 
</html>
标签:jquery
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。