html > html学习 >

html表单验证JS代码，各类表单验证

2016-07-20 22:59:25 html表单验证JS代码，各类表单验证JS代码

html表单验证JS代码，各类表单验证JS代码如下：

HTML表单代码：

  1. <table align="center"> 
  2.   <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)"> 
  3.     <tr> 
  4.    <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td> 
  5.   </tr> 
  6.   <tr> 
  7.    <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td> 
  8.   </tr> 
  9.     <tr> 
  10.    <td>主页：</td><td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td> 
  11.   </tr> 
  12.   <tr> 
  13.    <td>密码：</td><td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td> 
  14.   </tr> 
  15.   <tr> 
  16.    <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td> 
  17.   </tr> 
  18.   <tr> 
  19.    <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td> 
  20.   </tr> 
  21.     <tr> 
  22.    <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td> 
  23.   </tr> 
  24.   <tr> 
  25.    <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td> 
  26.   </tr> 
  27.     <tr> 
  28.    <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td> 
  29.   </tr> 
  30.   <tr> 
  31.    <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td> 
  32.   </tr> 
  33.    <tr> 
  34.    <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td> 
  35.   </tr> 
  36.    <tr> 
  37.    <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td> 
  38.   </tr> 
  39.    <tr> 
  40.    <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td> 
  41.   </tr> 
  42.      <tr> 
  43.    <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td> 
  44.   </tr> 
  45.    <tr> 
  46.    <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td> 
  47.   </tr> 
  48.   <tr> 
  49.    <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td> 
  50.   </tr> 
  51.   <tr> 
  52.    <td>操作系统：</td><td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" >
    <option value="">选择您所用的操作系统</option>
    <option value="Win98">Win98</option>
    <option value="Win2k">Win2k</option>
    <option value="WinXP">WinXP</option>
    </select></td> 
  53.   </tr> 
  54.   <tr> 
  55.    <td>所在省份：</td><td>广东<input name="Province" value="1" type="radio">
    陕西<input name="Province" value="2" type="radio">
    浙江<input name="Province" value="3" type="radio">
    江西<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td> 
  56.   </tr> 
  57.   <tr> 
  58.    <td>爱好：</td><td>运动<input name="Favorite" value="1" type="checkbox">
    上网<input name="Favorite" value="2" type="checkbox">
    听音乐<input name="Favorite" value="3" type="checkbox">
    看书<input name="Favorite" value="4" 
    type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td> 
  59.   </tr> 
  60.    <td>自我介绍：</td><td>
    <textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea>
    </td> 
  61.   </tr> 
  62.      <td>自传：</td><td>
    <textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea>
    </td> 
  63.   </tr> 
  64.   <tr> 
  65.    <td colspan="2">
    <input name="Submit" type="submit" value="确定提交">
    <input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button">
    <input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button">
    <input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button">
    </td> 
  66.   </tr> 
  67.   </form> 
  68.  </table> 

html表单布局效果截图
html表单布局效果截图-待验证实例表单效果

CSS代码：

  1. body,td{font:normal 12px Verdana;color:#333333} 
  2. input,textarea,select,td{font:normal 12px Verdana;color:#333333;
    border:1px solid #999999;background:#ffffff} 
  3. table{border-collapse:collapse;} 
  4. td{padding:3px} 
  5. input{height:20;} 
  6. textarea{width:80%;height:50px;overfmin:auto;} 
  7. form{display:inline} 

JS代码：

  1.   <script> 
  2.  /************************************************* 
  3.  Validator v1.01 
  4.  code by 我佛山人 
  5.  wfsr@cunite.com 
  6.  http://www cunite .com 
  7. *************************************************/ 
  8.  Validator = { 
  9.  Require : /.+/, 
  10.  Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, 
  11.  Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/, 
  12.  Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/, 
  13.  Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, 
  14.  IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/, 
  15.  Currency : /^\d+(\.\d+)?$/, 
  16.  Number : /^\d+$/, 
  17.  Zip : /^[1-9]\d{5}$/, 
  18.  QQ : /^[1-9]\d{4,8}$/, 
  19.  Integer : /^[-\+]?\d+$/, 
  20.  Double : /^[-\+]?\d+(\.\d+)?$/, 
  21.  English : /^[A-Za-z]+$/, 
  22.  Chinese :  /^[\u0391-\uFFE5]+$/, 
  23.  UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/, 
  24.  IsSafe : function(str){return !this.UnSafe.test(str);}, 
  25.  SafeString : "this.IsSafe(value)", 
  26.  Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))", 
  27.  LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))", 
  28.  Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))", 
  29.  Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value", 
  30.  Range : "getAttribute('min') < value && value < getAttribute('max')", 
  31.  Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))", 
  32.  Custom : "this.Exec(value, getAttribute('regexp'))", 
  33.  Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))", 
  34.  ErrorItem : [document.forms[0]], 
  35.  ErrorMessage : ["以下原因导致提交失败："], 
  36.  Validate : function(theForm, mode){ 
  37.   var obj = theForm || event.srcElement; 
  38.   var count = obj.elements.length; 
  39.   this.ErrorMessage.length = 1; 
  40.   this.ErrorItem.length = 1; 
  41.   this.ErrorItem[0] = obj; 
  42.   for(var i=0;i<count;i++){ 
  43.    with(obj.elements[i]){ 
  44.     var _dataType = getAttribute("dataType"); 
  45.     if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue; 
  46.     this.ClearState(obj.elements[i]); 
  47.     if(getAttribute("require") == "false" && value == "") continue; 
  48.     switch(_dataType){ 
  49.      case "Date" : 
  50.      case "Repeat" : 
  51.      case "Range" : 
  52.      case "Compare" : 
  53.      case "Custom" : 
  54.      case "Group" :  
  55.      case "Limit" : 
  56.      case "LimitB" : 
  57.      case "SafeString" : 
  58.       if(!eval(this[_dataType])) { 
  59.        this.AddError(i, getAttribute("msg")); 
  60.       } 
  61.       break; 
  62.      default : 
  63.       if(!this[_dataType].test(value)){ 
  64.        this.AddError(i, getAttribute("msg")); 
  65.       } 
  66.       break; 
  67.     } 
  68.    } 
  69.   } 
  70.   if(this.ErrorMessage.length > 1){ 
  71.    modemode = mode || 1; 
  72.    var errCount = this.ErrorItem.length; 
  73.    switch(mode){ 
  74.    case 2 : 
  75.     for(var i=1;i<errCount;i++) 
  76.      this.ErrorItem[i].style.color = "red"; 
  77.    case 1 : 
  78.     alert(this.ErrorMessage.join("\n")); 
  79.     this.ErrorItem[1].focus(); 
  80.     break; 
  81.    case 3 : 
  82.     for(var i=1;i<errCount;i++){ 
  83.     try{ 
  84.      var span = document.createElement("SPAN"); 
  85.      span.id = "__ErrorMessagePanel"; 
  86.      span.style.color = "red"; 
  87.      this.ErrorItem[i].parentNode.appendChild(span); 
  88.      span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*"); 
  89.      } 
  90.      catch(e){alert(e.description);} 
  91.     } 
  92.     this.ErrorItem[1].focus(); 
  93.     break; 
  94.    default : 
  95.     alert(this.ErrorMessage.join("\n")); 
  96.     break; 
  97.    } 
  98.    return false; 
  99.   } 
  100.   return true; 
  101.  }, 
  102.  limit : function(len,min, max){ 
  103.   minmin = min || 0; 
  104.   maxmax = max || Number.MAX_VALUE; 
  105.   return min <= len && len <= max; 
  106.  }, 
  107.  LenB : function(str){ 
  108.   return str.replace(/[^\x00-\xff]/g,"**").length; 
  109.  }, 
  110.  ClearState : function(elem){ 
  111.   with(elem){ 
  112.    if(style.color == "red") 
  113.     style.color = ""; 
  114.    var lastNode = parentNode.childNodes[parentNode.childNodes.length-1]; 
  115.    if(lastNode.id == "__ErrorMessagePanel") 
  116.     parentNode.removeChild(lastNode); 
  117.   } 
  118.  }, 
  119.  AddError : function(index, str){ 
  120.   this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; 
  121.   this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; 
  122.  }, 
  123.  Exec : function(op, reg){ 
  124.   return new RegExp(reg,"g").test(op); 
  125.  }, 
  126.  compare : function(op1,operator,op2){ 
  127.   switch (operator) { 
  128.    case "NotEqual": 
  129.     return (op1 != op2); 
  130.    case "GreaterThan": 
  131.     return (op1 > op2); 
  132.    case "GreaterThanEqual": 
  133.     return (op1 >= op2); 
  134.    case "LessThan": 
  135.     return (op1 < op2); 
  136.    case "LessThanEqual": 
  137.     return (op1 <= op2); 
  138.    default: 
  139.     return (op1 == op2);             
  140.   } 
  141.  }, 
  142.  MustChecked : function(name, min, max){ 
  143.   var groups = document.getElementsByName(name); 
  144.   var hasChecked = 0; 
  145.   minmin = min || 1; 
  146.   maxmax = max || groups.length; 
  147.   for(var i=groups.length-1;i>=0;i--) 
  148.    if(groups[i].checked) hasChecked++; 
  149.   return min <= hasChecked && hasChecked <= max; 
  150.  }, 
  151.  IsDate : function(op, formatString){ 
  152.   formatStringformatString = formatString || "ymd"; 
  153.   var m, year, month, day; 
  154.   switch(formatString){ 
  155.    case "ymd" : 
  156.     m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); 
  157.     if(m == null ) return false; 
  158.     day = m[6]; 
  159.     mmonth = m[5]--; 
  160.     year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 
  161.     break; 
  162.    case "dmy" : 
  163.     m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); 
  164.     if(m == null ) return false; 
  165.     day = m[1]; 
  166.     mmonth = m[3]--; 
  167.     year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 
  168.     break; 
  169.    default : 
  170.     break; 
  171.   } 
  172.   if(!parseInt(month)) return false; 
  173.   monthmonth = month==12 ?0:month; 
  174.   var date = new Date(year, month, day); 
  175.         return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()); 
  176.   function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;} 
  177.  } 
  178.  } 
  179. </script> 

 什么都不填写提交后验证弹出提示对话框截图

js验证html表单验证提示框截图
html表单验证提示框截图

相关词： tipask 表单
上一篇：表单输入各种限制方法js代码
下一篇：html表单输入的中文逗号自动转换为英文逗号
更新