用正则表达式和js验证表单提交

最新推荐文章于 2024-01-15 09:10:50 发布

捷睿

最新推荐文章于 2024-01-15 09:10:50 发布

阅读量1.8k

点赞数

分类专栏： J2SE 文章标签：正则表达式 input function javascript email null

J2SE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码：<!--
使用时请将下面的javascript代码存到一个单一的js文件中。
1、表单要求
<form name="formname" onSubmit="return validateForm(this)"></form>
将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。
2、空值验证
表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证/一般验证方式同时使用）。
无此属性视为此域允许空值。
　　如：<input type="text" name="fieldNamename" emptyInfo="字段不能为空！">
3、最大长度验证（可以和空值验证、一般验证方式同时使用）：
<input type="text" name="fieldNamename" maxlength="20" lengthInfo="最大长度不能超过20！">
或,<textarea maxlength="2000" lengthInfo="最大长度不能超过2000！">
3、一般验证方式(不对空值做验证）:
　　如：<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" >
4、标准验证(不与其它验证方式同时使用）：
全部通过<input type="hidden">来实现，并且不需要name属性以免提交到服务器。
　　4.1、合法日期验证：
  <input type="text" name="yearfieldName" value="2004">注：这里也可以是<select name="yearfieldName"></select>，以下同
  <input type="text" name="monthfieldName" value="02">
  <input type="text" name="dayfieldName" value="03">
  <input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!">
  yearfieldName、monthfieldName、dayfieldName分别为年月日字段，月和日可以是两位(MM)或一位格式(M)，
  此处不对每个字段分别检验(如果要检验，请在年月日三个域分别使用前面的一般验证方式），只对日期的最大值是否合法检查;
4.2、日期格式验证(请注意，此验证不对日期是否有效进行验证，还未找到从格式中得到年月日数据的方法^_^)：
  <input type="text" name="datefieldName" value="2003-01-03 21:31:00">
  <input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!">
  其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符)
4.3、列表验证：
  检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)
  <input type="checkbox" name="checkbox1">
  <input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!">
  其中validatorType可以是Checkbox、R、Select;
  对于一个select表单，如果要求选择一条不能是第一条的记录，请用下列方式:
  <select name="select1" emptyInfo="请选择一个选项!">
  <option value="">==请选择==</option>
  <option value="1">1</option>
  <select>
4.4、Email验证：
  <input type="text" name="email">
  <input type="hidden" fieldName="email" validatorType="Email" separator="," errorInfo="不正确的Email!">
  其中separator为可选项，表示输入多个email时的分隔符(无此选项只能是一个地址）
4.5、加入其它javascript操作：
<script type="text/javascript">
  function functionname(){
    自定义方法
  }
</script>
表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">（此时emptyInfo等属性无效）
  时将调用function属性中指定的javascript方法（要求方法返回true或false，返回false将不再验证表单，也不提交表单)。
5、在表单通过验证提交前disable一个按钮（也可将其它域disable,不能与其它验证同在一个域)，不要求按钮是表单中的最后一个
<input type="button" name="提交" validatorType="disable">
6、不验证表单
　　<input type="hidden" name="validate" value="0" functionName="functionname">
当validator域值为0时不对表单进行验证，直接提交表单或执行指定function并返回true后提交表单
functionName为可选

-->
<script type="text/javascript">
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 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);
var m=parseInt(month.value);
var d=parseInt(day.value);
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 validateEmail(email,alt,separator){
var mail=trim(email.value);
if(mail=="") return;
var em;
var myReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-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;
}
function validateForm(theForm){// 若验证通过则返回true
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;
  }
   }
}

捷睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用正则表达式和js验证表单提交

代码：使用时请将下面的javascript代码存到一个单一的js文件中。1、表单要求将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。2、空值验证表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证/一般验证方式同时使用）。无此属性视为此域允许空值。　　如：3、最大长度验证（可以和空值验证、一般验证方式同时使用）：
复制链接

扫一扫