- 浏览: 25696 次
- 性别:
- 来自: 北京
-
文章分类
通用的JS表单验证
在做web开发时,免不了要对表单信息进行JS验证,如果每次开发都自己写一套验证程序,成本就太高了。一来现在做程序都讲究效率,如果你还在纠结于一个表单验证,那就太费时间了。所以这里有一份通知的表单验证,另附一份使用说明,这样大家在做项目时,就可以拿来就用了,不用再纠结于这个小问题了。
这份JS验证包括了对 空值、数字、汉字、最小长度、最大长度、手机、电话、传真、邮件、邮编、身份证号等验证。还包括一些对 全选按钮、时间格式、及开始-结束时间等验证等都包含进来了。
下面是使用说明样例:
下面这份是JS文件,common.js<%@ 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>My JSP 'index.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<form name="fm" action="" method="post" onsubmit="return validateForm(this)">
<table width="100%" class="default">
<tr>
<td align="right"><b>传真<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入传真" size="30" faxValidatorInfo="请输入正确的传真">
</td>
</tr>
<tr>
<td align="right"><b>邮编<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入邮编" size="30" postValidatorInfo="请输入正确的邮编">
</td>
</tr>
<tr>
<td align="right"><b>电话<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入电话" size="30" telValidatorInfo="请输入正确的电话">
</td>
</tr>
<tr>
<td align="right"><b>手机<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入手机" size="30" mobileValidatorInfo="请输入正确的手机">
</td>
</tr>
<tr>
<td align="right"><b>邮箱<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入邮箱" size="30" emailValidatorInfo="请输入正确的邮箱">
</td>
</tr>
<tr>
<td align="right"><b>名称<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入名称" size="30" maxLen="5" lengthInfo="最多不超过5个字符">
</td>
</tr>
<tr>
<td align="right"><b>地址<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入地址" size="30" minLen="5" lengthMinInfo="最小不少于5个字符">
</td>
</tr>
<tr>
<td align="right"><b>人数<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入人数" numberInfo="必须为数字" size="30" maxLen="10" lengthInfo="最多不超过40个字符">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="sumbit" value="确定" class="btn" >
<input name="reset" type="reset" class="btn" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
//CheckBox全选
function selectAll(formName, cbName) {
var o = document.forms(formName).item(cbName);
if (o.length) {//判断是否只有一项
for (i=0; i<o.length; i++) {
document.forms(formName).item(cbName)[i].checked = true;
}
} else {
o.checked = true;
}
}
//CheckBox取消全选
function unSelectAll(formName, cbName) {
var o = document.forms(formName).item(cbName);
if (o.length) {//判断是否只有一项
for (i=0; i<o.length; i++) {
document.forms(formName).item(cbName)[i].checked = false;
}
} else {
o.checked = false;
}
}
/* 表单验证相关脚本 */
function getStringLength(str) {
var endvalue=0;
var sourcestr=new String(str);
var tempstr;
for (var strposition = 0; strposition < sourcestr.length; strposition ++) {
tempstr=sourcestr.charAt(strposition);
if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {
endvalue=endvalue+2;
} else {
endvalue=endvalue+1;
}
}
return(endvalue);
}
function trim(str) {
if(str==null) return "";
if(str.length==0) return "";
var i=0,j=str.length-1,c;
for(;i<str.length;i++) {
c=str.charAt(i);
if(c!=' ') break;
}
for(;j>-1;j--) {
c=str.charAt(j);
if(c!=' ') break;
}
if(i>j) return "";
return str.substring(i,j+1);
}
function isNumber(input) {
var isNumber = /^[\d]+$/;
if(isNumber.test(input)){
return true;
}
return false;
}
// 匹配任何空白字符
function isNotChinese(input) {
var isNotChinese = /^[\sa-zA-Z\d]*$/;
if(isNotChinese.test(input)){
return true;
}
return false;
}
function isNullOrNumber(input) {
var isNumber = /^[\d]*$/;
if(isNumber.test(input)){
return true;
}
return false;
}
function validateDate(date,format,alt) {
var time=trim(date.value);
if(time=="") return;
var reg=format;
var reg=reg.replace(/yyyy/,"[0-9]{4}");
var reg=reg.replace(/yy/,"[0-9]{2}");
var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");
var reg=reg.replace(/M/,"(([1-9])|1[0-2])");
var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");
var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");
var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");
var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");
var reg=reg.replace(/mm/,"([0-5][0-9])");
var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");
var reg=reg.replace(/ss/,"([0-5][0-9])");
var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");
reg=new RegExp("^"+reg+"$");
if(reg.test(time)==false) {//验证格式是否合法
alert(alt);
date.focus();
return false;
}
return true;
}
function validateDateGroup(year,month,day,alt) {
var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var y=parseInt(year.value,10);
var m=parseInt(month.value,10);
var d=parseInt(day.value,10);
var maxday=array[m-1];
if(m==2) {
if((y%4==0&&y%100!=0)||y%400==0) {
maxday=29;
}
}
if(d>maxday) {
alert(alt);
return false;
}
return true;
}
function validateCheckbox(obj,alt) {
var rs=false;
if(obj!=null) {
if(obj.length==null) {
return obj.checked;
}
for(i=0;i<obj.length;i++) {
if(obj[i].checked==true) {
return true;
}
}
}
alert(alt);
return rs;
}
function validateRadio(obj,alt) {
var rs=false;
if(obj!=null) {
if(obj.length==null) {
return obj.checked;
}
for(i=0;i<obj.length;i++) {
if(obj[i].checked==true) {
return true;
}
}
}
alert(alt);
return rs;
}
function validateSelect(obj,alt) {
var rs=false;
if(obj!=null) {
for(i=0;i<obj.options.length;i++) {
if(obj.options[i].selected==true) {
return true;
}
}
}
alert(alt);
return rs;
}
function validateEmails(email,alt,separator) {
var mail=trim(email.value);
alert("mail");
alert(mail);
if(mail=="") return;
var em;
//var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
var myReg =/^[a-zA-Z0-9_\-]{1,}@[a-zA-Z0-9_\-]{1,}\.[a-zA-Z0-9_\-.]{2,3}$/;
if(separator==null) {
if(myReg.test(email.value)==false) {
alert(alt);
email.focus();
return false;
}
} else {
em=email.value.split(separator);
for(i=0;i<em.length;i++) {
em[i]=em[i].trim();
if(em[i].length>0&&myReg.test(em[i])==false) {
alert(alt);
email.focus();
return false;
}
}
}
return true;
}
//验证Email
function validateEmail(input){
var myReg =/^[a-zA-Z0-9_\-]{1,}@[a-zA-Z0-9_\-]{1,}\.[a-zA-Z0-9_\-.]{2,3}$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证手机号码
function validateMobile(input){
var myReg = /^(?:13\d|15\d|18\d)-?\d{5}(\d{3}|\*{3})$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证传真号码
function validateFax(input){
var myReg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证电话号码
function validateTel(input){
var myReg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证邮编
function validatePost(input){
var myReg =/^[0-9]{6}$/;
if(myReg.test(input)){
return true;
}
return false;
}
// 验证身份证号
function checkIDCard(str){
//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{2}[\0-9xX]{1}$/;
//身份证17位
isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}[0-9xX]{1}$/;
if((isIDCard1.test(str)||isIDCard2.test(str))){
return true;
}
return false;
}
/* 验证表单,若通过则返回true */
function validateForm(theForm) {
var disableList=new Array();
var field = theForm.elements;//将表单中的所有元素放入数组
for(var i = 0; i < field.length; i++) {
//先判断是否设定了不验证表单
var vali=theForm.validate;
if(vali!=null) {
if(vali.value=="0") {
var fun=vali.functionName;
if(fun!=null) {
return eval(fun+"()");
} else {
return true;
}
}
}
var empty=false;
var value=trim(field[i].value);
if(value.length==0) {//是否空值
empty=true;
}
var notFocus=field[i].notFocus;//不置焦点
if (notFocus!=null) {
notFocus = true;
}
var emptyInfo=field[i].emptyInfo;//空值验证
if(emptyInfo!=null&&empty==true) {
alert(emptyInfo);
if (!notFocus){
field[i].focus();
}
return false;
}
var nfEmptyInfo=field[i].emptyInfo;//不focus的空值验证
if(nfEmptyInfo!=null&&empty==true) {
alert(nfEmptyInfo);
return false;
}
var lengthInfo=field[i].lengthInfo;//最大长度验证
if(lengthInfo!=null&&getStringLength(value)>field[i].maxLen) {
alert(lengthInfo);
field[i].focus();
return false;
}
var lengthMinInfo=field[i].lengthMinInfo;//最小长度验证
if(lengthMinInfo!=null&&getStringLength(value)<field[i].minLen) {
alert(lengthMinInfo);
field[i].focus();
return false;
}
var numberInfo=field[i].numberInfo;//是否是正整数
if (numberInfo!=null) {
if (!isNumber(value)) {
alert(numberInfo);
field[i].select();
return false;
}
}
var notChineseInfo=field[i].notChineseInfo;//匹配包括下划线的任何单词字符
if (notChineseInfo!=null) {
if (!isNotChinese(value)) {
alert(notChineseInfo);
field[i].select();
return false;
}
}
var noChineseInfo=field[i].noChineseInfo;//是否为汉字
if (noChineseInfo!=null) {
if (!isNotChinese(value)) {
alert(noChineseInfo);
field[i].focus();
return false;
}
}
var numberOrNullInfo=field[i].numberOrNullInfo;//是否是空或者正整数
if (numberOrNullInfo!=null) {
if (!isNullOrNumber(value)) {
alert(numberOrNullInfo);
field[i].select();
return false;
}
}
var telValidatorInfo = field[i].telValidatorInfo; //验证普通电话号码
if(telValidatorInfo != null){
if(!validateTel(value)&&value.length!=0){
alert(telValidatorInfo);
field[i].focus();
return false;
}
}
var mobileValidatorInfo = field[i].mobileValidatorInfo; //验证手机号码
if(mobileValidatorInfo != null){
if(!validateMobile(value)&&value.length!=0){
alert(mobileValidatorInfo);
field[i].focus();
return false;
}
}
var faxValidatorInfo = field[i].faxValidatorInfo; //验证传真号码
if(faxValidatorInfo != null){
if(!validateFax(value)&&value.length!=0){
alert(faxValidatorInfo);
field[i].focus();
return false;
}
}
var emailValidatorInfo = field[i].emailValidatorInfo; //验证Email
if(emailValidatorInfo != null){
if(!validateEmail(value) && value.length != 0){
alert(emailValidatorInfo);
field[i].focus();
return false;
}
}
var postValidatorInfo = field[i].postValidatorInfo; //验证邮编
if(postValidatorInfo != null){
if(!validatePost(value) && value.length != 0){
alert(postValidatorInfo);
field[i].focus();
return false;
}
}
var IDCardtValidatorInfo = field[i].IDCardtValidatorInfo; //验证身份证号
if(IDCardtValidatorInfo != null){
if(!checkIDCard(value) && value.length != 0){
alert(IDCardtValidatorInfo);
field[i].focus();
return false;
}
}
var validatorType=field[i].validatorType;
if(validatorType!=null) {//其它javascript
var rs=true;
if(validatorType=="javascript") {
eval("rs="+field[i].functionName+"()");
if(rs==false) {
return false;
} else {
continue;
}
} else if (validatorType=="disable") {//提交表单前disable的按钮
disableList.length++;
disableList[disableList.length-1]=field[i];
continue;
} else if (validatorType=="date") {
rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);
} else if (validatorType=="dateGroup") {
rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);
} else if(validatorType=="timeCmp") {
rs=comparetime3(theForm.elements(field[i].startdate).value,theForm.elements(field[i].enddate).value,field[i].errorInfo);
} else if (validatorType=="checkbox") {
rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);
} else if (validatorType=="radio") {
rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);
} else if (validatorType=="select") {
rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);
} else if (validatorType=="email") {
rs=validateEmails(theForm.elements(field[i].fieldName),field[i].EmailErrorInfo);
}else {
alert("验证类型不被支持, fieldName: "+field[i].name);
return false;
}
if(rs==false) {
return false;
}
} else {//一般验证
if(empty==false) {
var v = field[i].validator; // 获取其validator属性
if(!v) continue; // 如果该属性不存在,忽略当前元素
var reg=new RegExp(v);
if(reg.test(field[i].value)==false) {
alert(field[i].errorInfo);
field[i].focus();
return false;
}
}
}
}
for(i=0;i<disableList.length;i++) {
disableList[i].disabled=true;
}
return true;
}
/* iframe 高度自适应 */
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
//CheckBox删除
function del(formname,cbname){
var a = document.getElementsByName(cbname);
var sum=0;
var c=false;
for(i=0;i< a.length; i++)
{
if(a[i].checked){
sum++;
}
}
if(sum>0)
{
c=window.confirm('确定删除?')
if(c)
{
document.forms(formname).submit();
}
}
else
{
alert('您还没有选择');
}
}
//CheckBox操作
function docheck(formname,cbname){
var a = document.getElementsByName(cbname);
var c=false;
for(i=0;i< a.length; i++)
{
if(a[i].checked){
sum++;
}
}
if(sum>0)
{
document.forms(formname).submit();
}
else
{
alert('您还没有选择');
}
}
//判断页面上输入的两个值是否相同,相同提示错误,不同执行操作
function unequal(formname,inputname0,inputname2)
{
var a = trim(inputname0.value);
var b = trim(inputname2.value);
if(a==b)
{
alert('不可以重复');
}
else
{
document.forms(formname).submit();
}
}
//判断时间先后顺序,a为前面的时间,b为后面的时间,错误则提示
function comparetime(a,b)
{
var time1 = a.substring(0,4).concat(a.substring(5,7)).concat(a.substring(8,10));
var time2 = b.substring(0,4).concat(b.substring(5,7)).concat(b.substring(8,10));
if((time1)>time2)
{
alert('时间顺序错误');
return false;
}
else
{
return true;
}
}
//,a,b,
function comparetime3(a,b,alt)
{
var time1 = a.substring(0,2).concat(a.substring(3,5)).concat(a.substring(6,10));
var time2 = b.substring(0,2).concat(b.substring(3,5)).concat(b.substring(6,10));
if(time2 == null || time2 == "")
{
return true;
}
else if((time1)>time2)
{
alert(alt);
return false;
}
else
{
return true;
}
}
//Cookie操作
function Setcookie (name, value) { //设置名称为name,值为value的Cookie
document.cookie = name + "=" + value + "";
}
function Deletecookie (name) { //删除名称为name的Cookie
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
function getCookieVal (offset) { //取得项名称为offset的cookie值
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) { //取得名称为name的cookie值
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function comparetime2(a,a2,a3,b,b2,b3){ // 比较时间顺序,精确到分钟
var time1 = a.substring(0,4).concat(a.substring(5,7)).concat(a.substring(8,10)).concat(a2).concat(a3);
var time2 = b.substring(0,4).concat(b.substring(5,7)).concat(b.substring(8,10)).concat(b2).concat(b3);
if((time1)>time2)
{
alert('时间顺序错误');
return false;
}
else
{
return true;
}
}
/* 判断选项中重复项 */
function checkOptionSame(formSrc, optNum, optPre) {
var z=0;
var a=new Array(optNum);
for (var i=0; i<optNum; i++) {
var index = i+1;
a[i] = formSrc[optPre + index].value;
if (a[i]=="") {
z = i;
break;
}
}
for(var i=0; i<z; i++) {
for (var j=i+1; j<=z; j++) {
if(a[i]==a[j]) {
alert("选项中有重复的内容!");
return false;
}
}
}
return true;
}
/* div 显示隐藏相关脚本 */
function changediv(divid) {
clearalldiv();
showdiv(divid);
}
function cleardiv(divid) {
document.getElementById(divid).style.display="none";
}
function showdiv(divid) {
document.getElementById(divid).style.display="";
}
- js.rar (5.4 KB)
- 下载次数: 52
相关推荐
使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 (this)"> 将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。 2、空值验证 表单中任意域...
`validator`是一个通用的JavaScript表单验证类,它在网页开发中扮演着重要的角色,确保用户输入的数据符合预设的规则和格式。JavaScript和XML的结合使得`validator`类能够灵活地处理各种验证需求,同时提供了易于...
这是一个通用的js表单验证,你只需要建立一个静态页面就可以实现表单数据的验证,运用的知识是正则表达式。
`is.js` 作为一个通用的JavaScript表单验证插件,极大地简化了前端验证工作,同时提供了高度的灵活性和扩展性。无论是简单的项目还是复杂的业务场景,它都能胜任并提高开发效率。通过阅读`readme.html` 文件中的详细...
通用JS表单验证类_validator实例演示,含有一个说明文档,本验证插件可对表单中常见的电话、字符、邮箱地址、网址、身份证号码、密码、年龄格式、IP格式等特殊的字符格式做出检测判断,避免用户提交到数据库的数据不...
本主题聚焦于“万能通用智能JS表单验证”,这是一种利用JavaScript实现的高效、灵活的表单验证技术。表单验证是用户交互过程中的关键环节,它能够确保用户输入的数据符合预设的规则,从而减少服务器端的压力,提升...
本文将深入探讨“js通用表单验证代码”这一主题,以及如何利用JavaScript进行有效的表单验证。 首先,我们要理解JavaScript在表单验证中的角色。JavaScript是一种客户端脚本语言,它可以在用户的浏览器上运行,无需...
在JavaScript编程中,表单验证是网页开发中的一个重要环节,它确保用户输入的数据符合预期的格式和规则,...结合提供的文件,开发者可以学习到更多关于JavaScript表单验证的技巧和最佳实践,进一步提升他们的编程技能。
忙了一天,总算是完成了 因为现在的项目中使用了很多struts标签,原来网上流传的validate.js不能用了,所以狠下心来修改了validate,用了不同的方法实现了通用验证,并且与标签分离,可以与struts标签结合使用
通用表单验证Jquery插件是为了提高用户体验和数据安全而设计的。Jquery是一种强大的JavaScript库,它简化了JavaScript的DOM操作,事件处理,动画效果,以及Ajax交互。在这个场景中,我们关注的是Jquery在表单验证中...
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...
【JS通用表单验证函数】是前端开发中用于确保用户输入数据有效性和合规性的一种常见技术。在网页表单提交前,使用JavaScript进行验证可以提高用户体验,减少无效数据提交到服务器,同时减轻后端处理压力。 这个特定...
总之,"Web通用的表单校验JS"如LiveValidation中文修改版,提供了方便、灵活的客户端表单验证解决方案,简化了开发流程,提高了应用的质量和用户体验。无论你是新手还是经验丰富的开发者,掌握这样的工具都能极大地...
"Validate通用表单验证Jquery插件"是一款基于JavaScript库jQuery的高效验证工具,它允许开发者在客户端进行多种验证,无需额外的服务器请求,大大提升了应用的响应速度。 Validate插件的核心功能在于其丰富的验证...
"validate 通用Ajax无刷新表单验证类"就是针对这一需求设计的,旨在提供一个高效、便捷的解决方案,使得在用户填写表单时能够实时进行数据验证,无需等待页面刷新,极大地提高了用户体验。 Ajax(Asynchronous ...