`
zjx2388
  • 浏览: 1325136 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

页面JS的判断组件

阅读更多
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"  isELIgnored="false" %>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="<%=basePath%>js/Validator.js"></script>


</head>

<body>
<form action=""  
    	name="customerForm" method="post" onsubmit="return Validator.Validate(this,2)">
<table >

<tr>
<td width="15%" height="20">企业名称:</td>
<td width="35%">
<input  type="text" name="corporate_name" value="" size="20" maxlength="40"
    			dataType="Require"  msg="企业名称不能为空"/>
<font color="red">*</font>
</td>

<td width="15%">编号:</td>
<td width="35%">
<input  type="text" name="contact_phone" value="" size="20" maxlength="12"
    			require="false" dataType="Number" msg="请填写正确的数字编号"/>
<font color="red">*</font>
</td>
</tr>

<tr>
<td width="15%" height="20">下发电话:</td>
<td width="35%">
<input  type="text" name="send_sms_phone" value="" size="20" 
    			maxlength="12" require="false" dataType="Number" msg="请填写正确的手机号码,如:13810018008 "/>
</td>

<td width="15%">联系电话:</td>
<td width="35%">
<input  type="text" name="contact_phone" value="" size="20" maxlength="12"
    			dataType="Phone" msg="请填写正确的联系电话,如:13810018008"/>
<font color="red">*</font>
</td>
</tr>

<tr align="left">
  <td colspan="4">
  &nbsp;
  </td>
</tr>

  <tr>
    <td>&nbsp;</td>
    <td>
		<input type="submit" name="sure" class="btn_2k3" value="提交"/>
      	<input type="button" name="back" class="btn_2k3" value="返回"onclick="javascript:history.go(-1)"/>
	</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

</table>
</body>
</html>
Validator = {
	Require : /.+/,
	Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
	Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
	Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
	Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
	IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
	Currency : /^\d+(\.\d+)?$/,
	Number : /^\d+$/,
	Zip : /^[1-9]\d{5}$/,
	QQ : /^[1-9]\d{4,8}$/,
	Integer : /^[-\+]?\d+$/,
	Double : /^[-\+]?\d+(\.\d+)?$/,
	English : /^[A-Za-z]+$/,
	SafeAccount:/[a-zA-Z_0-9]/,
	Chinese :  /^[\u0391-\uFFE5]+$/,
	UnSafe : /^(([A-Z]*|[a-z]*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
	IsSafe : function(str){return !this.UnSafe.test(str);},
	SafeString : "this.IsSafe(value)",
	Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
	LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
	Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
	Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
	Range : "getAttribute('min') < value && value < getAttribute('max')",
	Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
	Custom : "this.Exec(value, getAttribute('regexp'))",
	Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
	ErrorItem : [document.forms[0]],
	ErrorMessage : ["错误信息提示"],
	Validate : function(theForm, mode){
		var obj = theForm || event.srcElement;
		var count = obj.elements.length;
		this.ErrorMessage.length = 1;
		this.ErrorItem.length = 1;
		this.ErrorItem[0] = obj;
		for(var i=0;i<count;i++){
			with(obj.elements[i]){
				var _dataType = getAttribute("dataType");
				if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
				this.ClearState(obj.elements[i]);
				if(getAttribute("require") == "false" && value == "") continue;
				switch(_dataType){
					case "Date" :
					case "Repeat" :
					case "Range" :
					case "Compare" :
					case "Custom" :
					case "Group" : 
					case "Limit" :
					case "LimitB" :
					case "SafeString" :
						if(!eval(this[_dataType]))	{
							this.AddError(i, getAttribute("msg"));
						}
						break;
					default :
						if(!this[_dataType].test(value)){
							this.AddError(i, getAttribute("msg"));
						}
						break;
				}
			}
		}
		if(this.ErrorMessage.length > 1){
			mode = mode || 1;
			var errCount = this.ErrorItem.length;
			switch(mode){
			case 2 :
				for(var i=1;i<errCount;i++)
					this.ErrorItem[i].style.color = "red";
			case 1 :
				alert(this.ErrorMessage.join("\n"));
				this.ErrorItem[1].focus();
				break;
			case 3 :
				for(var i=1;i<errCount;i++){
				try{
					var span = document.createElement("SPAN");
					span.id = "__ErrorMessagePanel";
					span.style.color = "red";
					this.ErrorItem[i].parentNode.appendChild(span);
					span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
					}
					catch(e){alert(e.description);}
				}
				this.ErrorItem[1].focus();
				break;
			default :
				alert(this.ErrorMessage.join("\n"));
				break;
			}
			return false;
		}
		return true;
	},
	limit : function(len,min, max){
		min = min || 0;
		max = max || Number.MAX_VALUE;
		return min <= len && len <= max;
	},
	LenB : function(str){
		return str.replace(/[^\x00-\xff]/g,"**").length;
	},
	ClearState : function(elem){
		with(elem){
			if(style.color == "red")
				style.color = "";
			var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
			if(lastNode.id == "__ErrorMessagePanel")
				parentNode.removeChild(lastNode);
		}
	},
	AddError : function(index, str){
		this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
		this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
	},
	Exec : function(op, reg){
		return new RegExp(reg,"g").test(op);
	},
	compare : function(op1,operator,op2){
		switch (operator) {
			case "NotEqual":
				return (op1 != op2);
			case "GreaterThan":
				return (op1 > op2);
			case "GreaterThanEqual":
				return (op1 >= op2);
			case "LessThan":
				return (op1 < op2);
			case "LessThanEqual":
				return (op1 <= op2);
			default:
				return (op1 == op2);            
		}
	},
	MustChecked : function(name, min, max){
		var groups = document.getElementsByName(name);
		var hasChecked = 0;
		min = min || 1;
		max = max || groups.length;
		for(var i=groups.length-1;i>=0;i--)
			if(groups[i].checked) hasChecked++;
		return min <= hasChecked && hasChecked <= max;
	},
	IsDate : function(op, formatString){
		formatString = formatString || "ymd";
		var m, year, month, day;
		switch(formatString){
			case "ymd" :
				m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
				if(m == null ) return false;
				day = m[6];
				month = m[5]--;
				year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
				break;
			case "dmy" :
				m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
				if(m == null ) return false;
				day = m[1];
				month = m[3]--;
				year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
				break;
			default :
				break;
		}
		if(!parseInt(month)) return false;
		month = month==12 ?0:month;
		var date = new Date(year, month, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
		function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
	}
 }

 

分享到:
评论

相关推荐

    C#判断webbrowser页面最终加载完成

    3. **JavaScript交互**:如果页面允许,可以通过执行JavaScript代码来判断页面是否准备好。例如,可以编写一个JavaScript函数检查所有图片是否加载完成,或者等待特定的DOM元素出现。然后,使用WebBrowser的`...

    JavaScript生成的月份组件

    1. **DOM操作**:为了在页面上显示月份组件,我们需要使用JavaScript来创建和操作HTML元素。这包括动态生成`&lt;select&gt;`元素或自定义的UI元素,如按钮和列表项,以及在用户交互时更新这些元素。 2. **事件监听**:...

    spreadjs_判断当前单元格是否为富文本-demo.zip

    SpreadJS是一款强大的JavaScript电子表格组件,它允许开发者在Web应用中实现类似于Microsoft Excel的功能。在本示例中,我们关注的是如何识别单元格的数据类型,特别是富文本。 富文本是指包含多种格式(如字体、...

    常用JS脚本页面判断

    在JavaScript中,页面判断是网页开发中不可或缺的一部分,主要用于数据验证、用户交互和浏览器兼容性处理。以下是对标题和描述中涉及的知识点的详细说明: 一、验证类 1. 数字验证: - 整数:使用正则表达式`/^(-|...

    【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

    Vant List组件是Vue.js框架中的一个常用的列表渲染组件,由Vant UI库提供。它主要用于展示大量数据的列表,并且通常与上拉加载、下拉刷新等交互效果结合使用。在某些场景下,比如在页面之间切换时,我们希望用户在...

    js使用i18n实现页面国际化的方法

    本文将详细探讨如何使用JavaScript(简称js)中的i18n库实现页面国际化。 首先,需要理解i18n的含义。"i18n"是一个行业术语,代表“internationalization”,是指软件或文档在设计阶段就考虑了不同地区和语言的用户...

    element 中 el-menu 组件的无限极循环思路代码详解

    除了实现无限级菜单的展示之外,还可以添加一些交互功能,比如点击菜单项时可以跳转到相应的页面或者执行特定的 JavaScript 函数。这在 el-menu 的 item 属性中可以实现,通过点击事件可以绑定方法,处理用户的点击...

    微信小程序日历组件(可多选单选)

    在日历组件中,JS负责处理用户的交互事件,如点击日期、选择范围等,同时处理逻辑,如判断是否已选择某个日期、更新数据状态等。JS代码通常包含在组件的`&lt;script&gt;`标签内,通过`Page`或`Component`对象定义页面或...

    Vue组件实现触底判断

    总结来说,Vue组件实现触底判断的核心在于监听滚动事件,判断滚动位置是否到达页面底部,并通过父组件传递的回调函数进行相应的操作。在实际应用中,为了优化性能,应考虑使用节流或防抖函数。这个简单的示例展示了...

    vue-cli监听组件加载完成的方法

    在Vue.js开发中,有时我们需要监听组件的加载完成状态,以便在所有组件加载完毕后执行特定的操作。在使用Vue CLI构建项目时,这个问题可以通过结合Vuex的状态管理库来解决。本文将详细介绍如何在Vue CLI项目中监听...

    手机外国js判断仅限手机端查看_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    例如,这个资源可能包含一个js函数,用于判断用户是否在移动设备上浏览,并据此显示或隐藏特定内容。 4. **H5模板**: H5通常是指HTML5,是HTML的最新版本,增加了许多新的元素和功能,如离线存储、媒体元素、画布、...

    初始登录页面和导航页面,有判断时间的上午、下午、晚上等代码

    在IT行业中,登录页面和导航页面是任何Web应用程序的基础组件,它们为用户提供访问系统的入口,并指导用户在系统内部进行操作。在这个项目中,我们关注的是一个包含特定时间判断功能的登录和导航页面,这通常涉及到...

    tld,TreeTag组件

    `jenkov_ajaxScript.js`是一个JavaScript文件,可能包含了与TreeTag组件相关的AJAX功能。AJAX(Asynchronous JavaScript and XML)技术允许页面在不刷新整个页面的情况下更新部分内容,提高用户体验。这个脚本可能...

    vue分页器组件跳转下一页上一页

    在Vue.js开发中,分页器组件是一种常见的UI元素,用于在大量数据中实现分页浏览,提升用户体验。本项目是基于Vue实现的一个分页器组件,具备设置初始页码和输入页码直接跳转的功能。 1. **Vue.js基础知识**: Vue....

    解决vue一个页面中复用同一个echarts组件的问题

    4. 在组件的JavaScript部分,通过判断传入的`type`值来决定初始化ECharts实例时使用的DOM元素。 这样,每个ECharts实例都会使用一个唯一的id进行初始化,从而避免了冲突和数据覆盖的问题。 以下是一个简化的示例...

    基于vue20开发的分页组件

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面,尤其在单页面应用程序(SPA)中广泛应用。Vue 2.0是其一个重要的版本,它带来了许多改进和优化,提升了性能和开发体验。本项目“基于vue20开发的分页...

    详解Vue.js3.0 组件是如何渲染为DOM的

    本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的。对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)...

    基于vue与elementui组件中talbe实现的无限级联treetable

    在Vue.js框架中,Element UI库提供了一套丰富的UI组件,其中包括Table组件。当我们需要展示具有层级关系的数据时,Tree Table(树形表格)是一种很好的解决方案。本篇将深入探讨如何利用Vue.js和Element UI来实现一...

    JavaScript拖拽组件

    JavaScript拖拽组件是一种常见于前端开发中的交互功能,它允许用户通过鼠标拖动元素在页面上自由移动。这种技术在创建可自定义布局、图表、窗口应用或任何需要动态定位的用户界面时非常有用。在JavaScript中实现拖拽...

    精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能组件。

    在H5页面设计中,一个常见的交互元素是列表组件,而其中的侧滑功能则为用户提供了一种便捷的操作方式,比如删除或修改列表项。本文将深入探讨“精致的H5 列表侧滑组件”及其在H5页面中的应用。 首先,侧滑功能通常...

Global site tag (gtag.js) - Google Analytics