js的一个前台验证框架

来源：互联网发布：伦敦金今晚数据编辑：程序博客网时间：2024/05/22 17:35

validatorForm.js

/**
这个errMsg对象是这个js验证的主体，是定义的验证的规范
**/ 
var errMsg = {
 // 检查特定字段是否为必填
 required : {
  msg : "->字段不能为空哦！",
  test : function(obj, load) {
   // 确保字段尚未有内容输入，并在页面加载时不做检查(在加载时显示"必填字段"可能会让用户感到厌烦
   // return
   // obj.value.length>0||load||obj.value==obj.defaultValue;//我似乎觉得defaultValue这个值似乎没有什么意义，所以在这里去掉(caoyong)
   return obj.value.length > 0;
  }
 },
 // 确保字段内容是正确的email地址
 email : {
  msg : "->字段不是一个电子邮件地址哦！",
  test : function(obj) {
   // 确保输入并符合email地址的格式
   return !obj.value
     || /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i
       .test(obj.value);
  }
 },
 // 确保字段内容是电话号码并将其自动格式化
 phone : {
  msg : "->字段不是一个电话号码！",
  test : function(obj) {
   // 确保他是否符合电话号码要求
   var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
   // 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
   if (m)
    obj.value = "(" + m[1] + ")" + m[2] + "-" + m[3];
   return !obj.value || m;
  }
 },
 handPhone : {
  msg : "->不是一个有效的手机号！",
  test : function(obj) {
   // 确保他是否符合电话号码要求
   var m = /[0-9]{1,11}/.exec(obj.value);
   // 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
   return !obj.value || m;
  }
 },
 isIP : {
  msg : "->不是一个有效的ip哦！",
  test : function(obj) {
   // 确保他是否符合电话号码要求
   var m = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g.exec(obj.value);
   // 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
   return !obj.value || m;
  }
 },
 isNumber : {
  msg : "->不是一个数字哦！",
  test : function(obj) {
   // 确保他是否符合电话号码要求
   var m = /^\d+(\.\d*)?$/.exec(obj.value);
   // 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
   return !obj.value || m;
  }
 },
 
 
 isInt : {
  msg : "->不是一个整数哦！",
  test : function(obj) {
   // 确保他是否符合电话号码要求
   var m = /^\d+$/.exec(obj.value);
   // 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
   return !obj.value || m;
  }
 },
 isHaoduan : {
  msg : "->不是一个号段，号段由7位或者11位的数字组成！",
  test : function(obj) {
   // 确保他是否符合电话号码要求
   var m = /^\d[7]|\d[11]$/.exec(obj.value);
   // 如果是，可能也只是表面正确而已-强行检查它的格式是否符合我们的要求;(123)456-7890
   return !obj.value || m;
  }
 },
 // 确保字段内容符合MM/DD/YYYY的时间格式
 date : {
  msg : "->不是一个有效的日期！",
  test : function(obj) {
   return !obj.value || /^\d{2,4}\/\d{2}\/\d{2}$/.test(obj.value)
     || /^\d{2,4}-\d{2}-\d{2}$/.test(obj.value)
     || /^\d{2,4}-\d{2}-\d{2}\s\d{1,2}:\d{1,2}:\d{1,2}$/.test(obj.value);
  }
 },
 // 确保字段内容是一个正确的URL
 url : {
  msg : "->不是一个有效的URL地址哦!",
  test : function(obj) {
   // 确保有文本输入，而且不是默认的http://文本
   return !obj.value
     || obj.value == 'http://'
     || /^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/
       .test(obj.value);
  }
 },
 // 确保字段内容是一个正确的密码
 isPassWord : {
  msg : "->密码应该以字母开头，可以是字母、数字!@#$%^&*中的任意的6-16个字符！，",
  test : function(obj) {
   // 确保有文本输入，而且不是默认的http://文本
   return !obj.value
     || /^[a-zA-Z]{1}[a-zA-Z0-9!@#$%^&*]{5,16}$/.test(obj.value);
  }
 }
}
// 显示表单内特定字段的错误信息
function showErrors(divName, errors) {
 document.getElementById(divName).innerHTML = "<font color='red'>" + errors
   + "</font>";
}
/**
*validatorJson是前台写的具体限定输入的json
*errorDIV将错误信息在id为errorDIV的div上面显示出来
**/
function validElems(validatorJson, errorDIV) {
 var flag = true;
 for ( var i = 0; i < validatorJson.length; i++) {
  var elem = validatorJson[i];
  var validObj = elem['valide'];
  if (validObj && validObj.length == 0) {
   continue;
  }
  var item = document.getElementById(elem.id);
  for ( var j = 0; j < validObj.length; j++) {
   var validValue = validObj[j];
   flag = errMsg[validValue].test(item);
   if (!flag) {
    showErrors(errorDIV, elem.name + errMsg[validValue].msg);
    item.focus();
    return flag;
   }
  }
 }
 return flag;
}

引用实例（一个jsp）：

<%@ page language="java" pageEncoding="UTF-8"
 contentType="text/html; charset=UTF-8"%><!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>
<title>XX系统</title>
<script type="text/javascript"
 src="http://cyxinda.blog.163.com/blog/../js/validatorForm.js"></script>
<script type="text/javascript"> 
function sumbmit_() 
  {   var validatorJson = [ 
                          {'id':'cooperationName','name':'XXX名称','valide':['required']}, 
                          {'id':'licenseNo','name':'工商营业执照号','valide':['required']},       
                          {'id':'chairManAge','name':'理事长年龄','valide':['required','isInt']}
                          ]; 
var flag = validElems(validatorJson, "tips"); 
if (!flag) {    return false;   }  
$("#cooperationForm").submit();  
}; 
</script>
</head>
<body>
 <div class="contents">
  <br />
  <div class="top">
   <h1>
    <img src="http://cyxinda.blog.163.com/blog/${pageContext.request.contextPath}/images/xjsw/logo_.gif"
     alt="XXXXX系统" />
   </h1>
  </div>
  <form id="cooperationForm" style="text-align: center;" method="post"
   action="${pageContext.request.contextPath}/cooperation/cooperation.do">
   <div class="search_div" style="width: 640px;">
    <input type="hidden" name="theForm.action" value="do_add" />
    <table class="add">
     <caption class="caption_add">
      <img
       src="http://cyxinda.blog.163.com/blog/../images/xjsw/update.gif"
       alt="XXX管理系统" /> 添加XXX
     </caption>
     <tr>
      <td colspan="4">
       <div id="tips"
        style="margin: 0; border: 0; padding: 0; float: left; color: red;"></div>
      </td>
     </tr>
     <tr>
      <td class="fieldText">XXX名称:</td>
      <td><input type="text" id="cooperationName"
       name="theForm.cooperationName" class="textInput"
       value="${theForm.cooperationName }" /><span
       style="color: red; font-weight: bold;">&nbsp;*</span></td>
      <td class="fieldText">工商营业执照号:</td>
      <td><input type="text" id="licenseNo"
       name="theForm.licenseNo" class="textInput"
       value="" /><span
       style="color: red; font-weight: bold;">&nbsp;*</span></td>
     </tr>
     <tr>
      <td class="fieldText">理事长姓名:</td>
      <td><input type="text" id="chairManName"
       name="theForm.chairManName" class="textInput"
       value="" /><span
       style="color: red; font-weight: bold;">&nbsp;*</span>
      </td>
      <td class="fieldText">理事长年龄:</td>
      <td><input type="text" id="chairManAge"
       name="theForm.chairManAge" class="textInput"
       value="" />
      </td>
     </tr>
     <tr style="background-color: #FFFFFF;">
      <td colspan="4"
       style="padding-top: 15px; border-top: 1px solid green; text-align: center;"><input
       class="button" type="button" value="提交" name="Input"
       id="submit_button" style="cursor: pointer;" onclick="sumbmit_();" />
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input class="button" type="button" value="重置" name="input_reset"
       style="cursor: pointer;" /></td>
     </tr>
    </table>
   </div>
  </form>
 </div>
</body>
</html>

阅读全文

0 0