JS效验各种格式

  1. /*
  2. -------------------------------------------------------------------------------
  3. 文件名称:check.js
  4. 说    明:JavaScript脚本,用于检查网页提交表单的输入数据
  5. 版    本:1.0
  6. */ 
  7. /*
  8. 用途:校验ip地址的格式
  9. 输入:strIP:ip地址
  10. 返回:如果通过验证返回true,否则返回false; 
  11. */
  12. function isIP(strIP) { 
  13.         if (isNull(strIP)) return false;
  14.  var re=/^(/d+)/.(/d+)/.(/d+)/.(/d+)$/g //匹配IP地址的正则表达式
  15.  if(re.test(strIP))
  16.  {
  17.   if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
  18.  }
  19.  return false
  20. /*
  21. 用途:检查输入字符串是否为空或者全部都是空格
  22. 输入:str
  23. 返回:
  24.  如果全是空返回true,否则返回false
  25. */
  26. function isNull( str ){
  27.  if ( str == "" ) return true;
  28.  var regu = "^[ ]+$";
  29.  var re = new RegExp(regu);
  30.  return re.test(str);
  31. /*
  32. 用途:检查输入对象的值是否符合整数格式
  33. 输入:str 输入的字符串
  34. 返回:如果通过验证返回true,否则返回false 
  35. */
  36. function isInteger( str ){  
  37.  var regu = /^[-]{0,1}[0-9]{1,}$/;
  38.         return regu.test(str);
  39. /*
  40. 用途:检查输入手机号码是否正确
  41. 输入:
  42.  s:字符串
  43. 返回:
  44.  如果通过验证返回true,否则返回false 
  45. */
  46. function checkMobile( s ){   
  47.  var regu =/^[1][3][0-9]{9}$/;
  48.  var re = new RegExp(regu);
  49.  if (re.test(s)) {
  50.    return true;
  51.  }else{
  52.    return false;
  53.  }
  54. }
  55. /*
  56. 用途:检查输入字符串是否符合正整数格式
  57. 输入:
  58.  s:字符串
  59. 返回:
  60.  如果通过验证返回true,否则返回false 
  61. */
  62. function isNumber( s ){   
  63.  var regu = "^[0-9]+$";
  64.  var re = new RegExp(regu);
  65.  if (s.search(re) != -1) {
  66.     return true;
  67.  } else {
  68.     return false;
  69.  }
  70. /*
  71. 用途:检查输入字符串是否是带小数的数字格式,可以是负数
  72. 输入:
  73.  s:字符串
  74. 返回:
  75.  如果通过验证返回true,否则返回false 
  76. */
  77. function isDecimal( str ){   
  78.          if(isInteger(str)) return true;
  79.  var re = /^[-]{0,1}(/d+)[/.]+(/d+)$/;
  80.  if (re.test(str)) {
  81.     if(RegExp.$1==0&&RegExp.$2==0) return false;
  82.     return true;
  83.  } else {
  84.     return false;
  85.  }
  86. /*
  87. 用途:检查输入对象的值是否符合端口号格式
  88. 输入:str 输入的字符串
  89. 返回:如果通过验证返回true,否则返回false 
  90. */
  91. function isPort( str ){  
  92.  return (isNumber(str) && str<65536);
  93. /*
  94. 用途:检查输入对象的值是否符合E-Mail格式
  95. 输入:str 输入的字符串
  96. 返回:如果通过验证返回true,否则返回false 
  97. */
  98. function isEmail( str ){  
  99.  var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+/.)+[A-Za-z0-9]{2,3}$/; 
  100.  if(myReg.test(str)) return true
  101.  return false
  102. /*
  103. 用途:检查输入字符串是否符合金额格式
  104.  格式定义为带小数的正数,小数点后最多三位
  105. 输入:
  106.  s:字符串
  107. 返回:
  108.  如果通过验证返回true,否则返回false 
  109. */
  110. function isMoney( s ){   
  111.  var regu = "^[0-9]+[/.][0-9]{0,3}$";
  112.  var re = new RegExp(regu);
  113.  if (re.test(s)) {
  114.     return true;
  115.  } else {
  116.     return false;
  117.  }
  118. }
  119. /*
  120. 用途:检查输入字符串是否只由英文字母和数字和下划线组成
  121. 输入:
  122.  s:字符串
  123. 返回:
  124.  如果通过验证返回true,否则返回false 
  125. */
  126. function isNumberOr_Letter( s ){    //判断是否是数字或字母
  127.  var regu = "^[0-9a-zA-Z/_]+$";
  128.  var re = new RegExp(regu);
  129.  if (re.test(s)) {
  130.    return true;
  131.  }else{
  132.    return false;
  133.  }
  134. }
  135. /*
  136. 用途:检查输入字符串是否只由英文字母和数字组成
  137. 输入:
  138.  s:字符串
  139. 返回:
  140.  如果通过验证返回true,否则返回false 
  141. */
  142. function isNumberOrLetter( s ){    //判断是否是数字或字母
  143.  var regu = "^[0-9a-zA-Z]+$";
  144.  var re = new RegExp(regu);
  145.  if (re.test(s)) {
  146.    return true;
  147.  }else{
  148.    return false;
  149.  }
  150. }
  151.  /*
  152. 用途:检查输入字符串是否只由汉字、字母、数字组成
  153. 输入:
  154.  value:字符串
  155. 返回:
  156.  如果通过验证返回true,否则返回false 
  157. */
  158. function isChinaOrNumbOrLett( s ){    //判断是否是汉字、字母、数字组成
  159.  var regu = "^[0-9a-zA-Z/u4e00-/u9fa5]+$";   
  160.  var re = new RegExp(regu);
  161.  if (re.test(s)) {
  162.    return true;
  163.  }else{
  164.    return false;
  165.  }
  166. /*
  167. 用途:判断是否是日期
  168. 输入:date:日期;fmt:日期格式
  169. 返回:如果通过验证返回true,否则返回false
  170. */
  171. function isDate( date, fmt ) {
  172.     if (fmt==null) fmt="yyyyMMdd";
  173.     var yIndex = fmt.indexOf("yyyy");
  174.     if(yIndex==-1) return false;
  175.    var year = date.substring(yIndex,yIndex+4);
  176.    var mIndex = fmt.indexOf("MM");
  177.     if(mIndex==-1) return false;
  178.    var month = date.substring(mIndex,mIndex+2);
  179.    var dIndex = fmt.indexOf("dd");
  180.     if(dIndex==-1) return false;
  181.    var day = date.substring(dIndex,dIndex+2);
  182.     if(!isNumber(year)||year>"2100" || year< "1900"return false;
  183.     if(!isNumber(month)||month>"12" || month< "01"return false;
  184.     if(day>getMaxDay(year,month) || day< "01"return false;
  185.     return true;
  186. function getMaxDay(year,month) {
  187.  if(month==4||month==6||month==9||month==11)
  188.   return "30";
  189.  if(month==2)
  190.   if(year%4==0&&year%100!=0 || year%400==0)
  191.    return "29";
  192.   else
  193.    return "28";
  194.  return "31";
  195. /*
  196. 用途:字符1是否以字符串2结束
  197. 输入:str1:字符串;str2:被包含的字符串
  198. 返回:如果通过验证返回true,否则返回false 
  199. */
  200. function isLastMatch(str1,str2)
  201. {  
  202.    var index = str1.lastIndexOf(str2);
  203.    if(str1.length==index+str2.length) return true;
  204.    return false;
  205. /*
  206. 用途:字符1是否以字符串2开始
  207. 输入:str1:字符串;str2:被包含的字符串
  208. 返回:如果通过验证返回true,否则返回false 
  209. */
  210. function isFirstMatch(str1,str2)
  211. {  
  212.    var index = str1.indexOf(str2);
  213.    if(index==0) return true;
  214.    return false;
  215. /*
  216. 用途:字符1是包含字符串2
  217. 输入:str1:字符串;str2:被包含的字符串
  218. 返回:如果通过验证返回true,否则返回false 
  219. */
  220. function isMatch(str1,str2)
  221. {  
  222.    var index = str1.indexOf(str2);
  223.    if(index==-1) return false;
  224.    return true;
  225. /*
  226. 用途:检查输入的起止日期是否正确,规则为两个日期的格式正确,
  227.  且结束如期>=起始日期
  228. 输入:
  229.  startDate:起始日期,字符串
  230.  endDate:结束如期,字符串
  231. 返回:
  232.  如果通过验证返回true,否则返回false 
  233. */
  234. function checkTwoDate( startDate,endDate ) {
  235.  if( !isDate(startDate) ) {
  236.   alert("起始日期不正确!");
  237.   return false;
  238.  } else if( !isDate(endDate) ) {
  239.   alert("终止日期不正确!");
  240.   return false;
  241.  } else if( startDate > endDate ) {
  242.   alert("起始日期不能大于终止日期!");
  243.   return false;
  244.  }
  245.  return true;
  246. /*
  247. 用途:检查输入的Email信箱格式是否正确
  248. 输入:
  249.  strEmail:字符串
  250. 返回:
  251.  如果通过验证返回true,否则返回false 
  252. */
  253. function checkEmail(strEmail) { 
  254.  //var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/; 
  255.  var emailReg = /^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/;
  256.  if( emailReg.test(strEmail) ){
  257.   return true
  258.  }else{
  259.   alert("您输入的Email地址格式不正确!");
  260.   return false
  261.  }
  262. /*
  263. 用途:检查输入的电话号码格式是否正确
  264. 输入:
  265.  strPhone:字符串
  266. 返回:
  267.  如果通过验证返回true,否则返回false 
  268. */
  269. function checkPhone( strPhone ) { 
  270.  var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/; 
  271.  var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/; 
  272.  var prompt = "您输入的电话号码不正确!"
  273.  if( strPhone.length > 9 ) {
  274.   if( phoneRegWithArea.test(strPhone) ){
  275.    return true
  276.   }else{
  277.    alert( prompt );
  278.    return false
  279.   }
  280.  }else{
  281.   if( phoneRegNoArea.test( strPhone ) ){
  282.    return true
  283.   }else{
  284.    alert( prompt );
  285.    return false
  286.   }  
  287.  }
  288. /*
  289. 用途:检查复选框被选中的数目
  290. 输入:
  291.  checkboxID:字符串
  292. 返回:
  293.  返回该复选框中被选中的数目 
  294. */ 
  295. function checkSelect( checkboxID ) {
  296.  var check = 0;
  297.  var i=0;
  298.  if( document.all(checkboxID).length > 0 ) { 
  299.   for(  i=0; i<document.all(checkboxID).length; i++ ) {
  300.    if( document.all(checkboxID).item( i ).checked  ) {
  301.     check += 1;
  302.    }    
  303.   }
  304.  }else{
  305.   if( document.all(checkboxID).checked )
  306.    check = 1;
  307.  }
  308.  return check;
  309. function getTotalBytes(varField) {
  310.  if(varField == null)
  311.   return -1;
  312.  var totalCount = 0;
  313.  for (i = 0; i< varField.value.length; i++) {
  314.   if (varField.value.charCodeAt(i) > 127) 
  315.    totalCount += 2;
  316.   else
  317.    totalCount++ ;
  318.  }
  319.  return totalCount;
  320. function getFirstSelectedValue( checkboxID ){
  321.  var value = null;
  322.  var i=0;
  323.  if( document.all(checkboxID).length > 0 ){ 
  324.   for(  i=0; i<document.all(checkboxID).length; i++ ){
  325.    if( document.all(checkboxID).item( i ).checked ){
  326.     value = document.all(checkboxID).item(i).value;
  327.     break;
  328.    }
  329.   }
  330.  } else {
  331.   if( document.all(checkboxID).checked )
  332.    value = document.all(checkboxID).value;
  333.   }
  334.  return value;
  335. }  
  336. function getFirstSelectedIndex( checkboxID ){
  337.  var value = -2;
  338.  var i=0;
  339.  if( document.all(checkboxID).length > 0 ){ 
  340.   for(  i=0; i<document.all(checkboxID).length; i++ ) {
  341.    if( document.all(checkboxID).item( i ).checked  ) {
  342.     value = i;
  343.     break;
  344.    }
  345.   }
  346.  } else {
  347.   if( document.all(checkboxID).checked )
  348.    value = -1;
  349.  }
  350.  return value;
  351. }
  352. function selectAll( checkboxID,status ) {
  353.  if( document.all(checkboxID) == null)
  354.   return
  355.  if( document.all(checkboxID).length > 0 ){ 
  356.   for(  i=0; i<document.all(checkboxID).length; i++ ) {
  357.    document.all(checkboxID).item( i ).checked = status;
  358.   }
  359.  } else {
  360.   document.all(checkboxID).checked = status;
  361.  }
  362. function selectInverse( checkboxID ) {
  363.  if( document.all(checkboxID) == null)
  364.   return
  365.  if( document.all(checkboxID).length > 0 ) { 
  366.   for(  i=0; i<document.all(checkboxID).length; i++ ) {
  367.    document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;
  368.   }
  369.  } else {
  370.   document.all(checkboxID).checked = !document.all(checkboxID).checked;
  371.  }
  372. function checkDate( value ) {
  373.  if(value==''return true;
  374.  if(value.length!=8 || !isNumber(value)) return false;  
  375.  var year = value.substring(0,4);
  376.  if(year>"2100" || year< "1900"return false;
  377.  var month = value.substring(4,6);
  378.  if(month>"12" || month< "01"return false;
  379.  var day = value.substring(6,8);
  380.  if(day>getMaxDay(year,month) || day< "01"return false;
  381.  return true;  
  382. /*
  383. 用途:检查输入的起止日期是否正确,规则为两个日期的格式正确或都为空
  384.  且结束日期>=起始日期
  385. 输入:
  386.  startDate:起始日期,字符串
  387.  endDate:  结束日期,字符串
  388. 返回:
  389.  如果通过验证返回true,否则返回false 
  390. */
  391. function checkPeriod( startDate,endDate ) {
  392.  if( !checkDate(startDate) ) {
  393.   alert("起始日期不正确!");
  394.   return false;
  395.  } else if( !checkDate(endDate) ) {
  396.   alert("终止日期不正确!");
  397.   return false;
  398.  } else if( startDate > endDate ) {
  399.   alert("起始日期不能大于终止日期!");
  400.   return false;
  401.  }
  402.  return true;
  403. /*
  404. 用途:检查证券代码是否正确
  405. 输入:
  406.  secCode:证券代码
  407. 返回:
  408.  如果通过验证返回true,否则返回false 
  409. */
  410. function checkSecCode( secCode ) {
  411.  if( secCode.length !=6 ){
  412.   alert("证券代码长度应该为6位");
  413.   return false;
  414.  }
  415.  if(!isNumber( secCode ) ){
  416.   alert("证券代码只能包含数字");  
  417.   return false;
  418.     }
  419.  return true;
  420. /****************************************************
  421. function : cTrim(sInputString,iType)
  422. description : 字符串去空格的函数
  423. parameters : iType: 1=去掉字符串左边的空格
  424.       2=去掉字符串左边的空格
  425.       0=去掉字符串左边和右边的空格
  426. return value: 去掉空格的字符串
  427. ****************************************************/
  428. function cTrim(sInputString,iType)
  429. {
  430.  var sTmpStr = ' ';
  431.  var i = -1;
  432.  if(iType == 0 || iType == 1)
  433.  {
  434.   while(sTmpStr == ' ')
  435.   {
  436.    ++i;
  437.    sTmpStr = sInputString.substr(i,1);
  438.   }
  439.   sInputString = sInputString.substring(i);
  440.  } 
  441.  if(iType == 0 || iType == 2)
  442.  {
  443.   sTmpStr = ' ';
  444.   i = sInputString.length;
  445.   while(sTmpStr == ' ')
  446.   {
  447.    --i;
  448.    sTmpStr = sInputString.substr(i,1);
  449.   }
  450.   sInputString = sInputString.substring(0,i+1);
  451.  }
  452.  return sInputString;
  453. /*
  454. -------------------------------------------------------------------------------
  455. 说    明:JavaScript脚本,验证表单中的数据项  begin
  456. -------------------------------------------------------------------------------  
  457. */
  458. function checkForm(objFrm){
  459.  var len = 0;
  460.  len = objFrm.elements.length; 
  461.  var i = 0;
  462.  var objCheck;
  463.  //文本框
  464.  for(i = 0; i < len; i ++){
  465.   objCheck = objFrm.elements[i];
  466.   if(objCheck.type =="text" && !f_checkTextValid(objCheck) ){
  467.    return false;   
  468.   }
  469.  }
  470.  //下拉框
  471.  for(i = 0; i < len; i ++){
  472.   objCheck = objFrm.elements[i];
  473.   if(objCheck.type =="select-one" && !f_checkSelectValid(objCheck) ){
  474.    return false;   
  475.   }
  476.  }
  477.  //时间段有效
  478.  if( f_checkStartAndEndDate(objFrm) == falsereturn false;
  479.  return true;
  480. }
  481. function f_checkSelectValid(obj){
  482.  //alert("check select");
  483.  if(obj.options.length <= 0){
  484.   alert("下拉选框无数据!");
  485.   return false
  486.  } 
  487.  return true;
  488. }
  489. function f_checkStartAndEndDate(frm){
  490.  var len = frm.elements.length;
  491.  if(len == null && len == 0) return true;
  492.  var i=0;
  493.  var temp;
  494.  var objCheck;
  495.  var objStartDate;
  496.  var objEndDate;
  497.  //alert("start date period check");
  498.  try{
  499.   for(i=0; i< len ; i++){
  500.    objCheck = frm.elements[i];
  501.    temp = objCheck.name;
  502.    if( temp.indexOf("startDate") >0 ||temp.indexOf("beginDate")>0 )
  503.     objStartDate = objCheck;
  504.    if( temp.indexOf("endDate") > 0 )
  505.     objEndDate = objCheck;
  506.   }
  507.   //alert(objStartDate.value);
  508.   //alert(objEndDate.value);
  509.   if(objStartDate.value==null || objStartDate.value =="" || objStartDate.value ==null || objStartDate.value ==""){
  510.    return true;
  511.   }
  512.   return checkTwoDate(objStartDate.value, objEndDate.value); 
  513.   //alert("end date period check");
  514.  }catch(E){}
  515.  return true;
  516. function f_checkTextValid(obj){
  517.  //不能为空
  518.  if(obj.getAttribute("isNeed") != null){
  519.   if(f_isNotNull(obj) == falsereturn false;
  520.  }
  521.  //不能超过长度
  522.  if(obj.getAttribute("maxlength") != null){
  523.   if(f_checkLength(obj) == falsereturn false;
  524.  }
  525.  var checkType ="";
  526.  checkType = obj.getAttribute("checkType");
  527.  if(checkType==null||checkType==""return true;
  528.  //
  529.  if (checkType.indexOf("number") >=0){
  530.   if(f_isNumber(obj) == false)  return false;
  531.   if(f_checkNumType(obj,checkType) == false)  return false;
  532.  }
  533.  //
  534.  if (checkType.indexOf("positive") >=0){
  535.   if(f_isNumber(obj) == false)  return false;
  536.   if(f_isPositive(obj)==false)  return false;
  537.   if(f_checkNumType(obj,checkType) == false)  return false;
  538.  }
  539.  if (checkType.indexOf("date") >=0){
  540.   if(f_checkDate(obj) == falsereturn false;
  541.  }
  542.  /*
  543.  switch(checkType){
  544.   case "number": if(f_isNumber(obj) == false) return false;break;
  545.   case "date": if(f_checkDate(obj) == false) return false;break;
  546.   default:
  547.  }
  548.  */
  549.  return true;
  550. function f_isNotNull(obj){
  551.  if(obj.value == ""){
  552.   f_alert(obj, " 不允许为空值!");
  553.   return false;
  554.  }
  555.  return true;
  556. function f_isNumber(obj){
  557.  if(isNaN(obj.value)){
  558.    f_alert(obj," 应为数值类型");
  559.   return false;  
  560.  }
  561.  return true
  562. }
  563. function f_checkDate(obj) {
  564.  if(checkDate(obj.value) ==false){
  565.    f_alert(obj," 不是合法日期格式!");
  566.   return false;  
  567.  }
  568.  return true;
  569. function f_checkLength(obj){
  570.  if(getTotalBytes(obj) > Math.abs( obj.getAttribute("maxlength") ) ){
  571.    f_alert(obj," 超出长度限制!");
  572.   return false;  
  573.  }
  574.  return true;
  575. function  f_alert(obj,alertStr){
  576.  var fielName = obj.getAttribute("fieldName");
  577.  if(fielName == null)
  578.   fielName = "";
  579.  alert(fielName + "/n" +alertStr);
  580.  obj.select();
  581.  obj.focus();
  582. function f_checkNumType(obj, numType){
  583.  //假设: 已经进行数字类型判断
  584.  var strTemp;
  585.  var numpric;
  586.  var numLen;
  587.  var strArr;
  588.  var defaultLen = 19;
  589.  var defaultpric = 5; 
  590.  try{
  591.   if(numType == null|| numType ==""return f_checkNumLenPrec(obj,defaultLen, defaultpric);
  592.   if(numType.indexOf("(") < 0 || numType.indexOf(")") < 0 ) return f_checkNumLenPrec(obj,defaultLen, defaultpric);
  593.   strTemp = numType.substr( numType.indexOf("(") + 1 ,numType.indexOf(")") - numType.indexOf("(") -1 );
  594.   if(strTemp == null||strTemp ==""return f_checkNumLenPrec(obj,defaultLen, defaultpric);
  595.   strArr = strTemp.split(","); 
  596.   numLen = Math.abs( strArr[0] ); 
  597.   numpric = Math.abs( strArr[1] ); 
  598.   return f_checkNumLenPrec(obj,numLen, numpric);
  599.  }catch(e){
  600.   alert("in f_checkNumType = " + e);
  601.    return f_checkNumLenPrec(obj,defaultLen, defaultpric);
  602.  } 
  603. function f_checkNumLenPrec(obj, len, pric){
  604.  var numReg;
  605.  var value = obj.value;
  606.  var strValueTemp, strInt, strDec; 
  607.  //alert(value + "=====" + len + "====="+ pric);
  608.  try
  609.   numReg =/[/-]/;
  610.   strValueTemp = value.replace(numReg, "");
  611.   strValueTemp = strValueTemp.replace(numReg, "");
  612.   //整数
  613.   if(pric==0){
  614.    numReg =/[/.]/;
  615.    //alert(numReg.test(value));
  616.    if(numReg.test(value) == true){
  617.     f_alert(obj, "输入必须为整数类型!");
  618.     return false
  619.    }   
  620.   }
  621.   if(strValueTemp.indexOf(".") < 0 ){
  622.    //alert("lennth==" + strValueTemp);  
  623.    if(strValueTemp.length >( len - pric)){
  624.     f_alert(obj, "整数位不能超过"+ (len - pric) +"位");
  625.     return false;
  626.    }
  627.   }else{
  628.    strInt = strValueTemp.substr( 0, strValueTemp.indexOf(".") );  
  629.    //alert("lennth==" + strInt);  
  630.    if(strInt.length >( len - pric)){
  631.     f_alert(obj, "整数位不能超过"+ (len - pric) +"位");
  632.     return false;
  633.    }   
  634.    strDec = strValueTemp.substr( (strValueTemp.indexOf(".")+1), strValueTemp.length );  
  635.    //alert("pric==" + strDec);  
  636.    if(strDec.length > pric){
  637.     f_alert(obj, "小数位不能超过"+  pric +"位");
  638.     return false;
  639.    }  
  640.   }
  641.   return true;
  642.  }catch(e){
  643.   alert("in f_checkNumLenPrec = " + e);
  644.   return false;
  645.  } 
  646. function f_isPositive(obj){
  647.  var numReg =/[/-]/;
  648.  if(numReg.test(obj.value) == true){
  649.   f_alert(obj, "必须为正数!");
  650.   return false;
  651.  }
  652.  return true;
  653. /*
  654. function selectedCheckboxCount(form)
  655. 功能说明:对Form中选中的可选项计数 
  656. 参数说明:
  657. form:指定的表单
  658. */
  659. function selectedCheckboxCount(form){
  660.  var length =0;
  661.  var i=0;
  662.  var count =0;
  663.  eles = form.elements;
  664.  while(i<eles.length){
  665.   obj= eles.item(i);
  666. //  type = obj.attributes.item("type").nodeValue;
  667.         type = obj.type;
  668.   if(type == "checkbox"){
  669.    if(obj.checked){
  670.     count++;
  671.    }
  672.   }
  673.   i++;
  674.  }
  675.  return count;
  676. //得到字节长度
  677. function getByteLen(str)
  678. {
  679.         var l = str.length;
  680.         var n = l;
  681.         for ( var i=0; i<l; i++ )
  682.                 if ( str.charCodeAt(i) <0 || str.charCodeAt(i) >255 )
  683.                         n=n+1;
  684.         return n
  685. /*
  686. 说明:
  687. 1.清除表格中的数据(0.0 和 0)
  688. 2.如果cell中没有数据,则自动加上一个空格
  689. 3.清除空白行的checkbox 
  690. 参数:
  691. clearzero:是否清除"0"、"0.0",false不清除、true清除(默认为true)
  692. tablename:要清除的表格名字,默认为sortTable
  693. */
  694. function clear_table(clearzero,tablename)
  695. {
  696.  var tobject;
  697.  if(tablename==null)
  698.   tobject=gmobj("sortTable");
  699.  else
  700.   tobject=gmobj(tablename);
  701.  //如果table未定义,则不进行过滤
  702.  if(tobject==null)
  703.   return;
  704.  //如果函数调用参数为空,表示要清除0、0.0;反之,不要清除0、0.0。
  705.  var clear = (clearzero==null)?true:clearzero; 
  706.  //清除0、0.0,填补空格
  707.  var rows = tobject.rows;
  708.  var j=0;
  709.  for(var i=0;i<rows.length;i++)
  710.  {
  711.   //取得第一个cell的属性clear,如果为1,表示该行没有数据,则清除该行所有数据
  712.    while(tobject.rows[i].cells[j] != null)
  713.    {
  714.     if(clear)
  715.     {
  716.      if(tobject.rows[i].cells[j].innerHTML==0 ||tobject.rows[i].cells[j].innerHTML==0.0||tobject.rows[i].cells[j].innerHTML=="")
  717.       tobject.rows[i].cells[j].innerText=" ";
  718.     }
  719.     else
  720.     {
  721.      if (tobject.rows[i].cells[j].innerHTML=="")
  722.       tobject.rows[i].cells[j].innerText=" ";
  723.     }
  724.     j++;
  725.    }
  726.    j=0;
  727.  }
  728.     return true;
  729. function gmobj(mtxt)  /* Get object by object name */
  730. {
  731.   if (document.getElementById) {
  732.       m=document.getElementById(mtxt);
  733.   } else if (document.all) {
  734.       m=document.all[mtxt];
  735.   } else if (document.layers) {
  736.       m=document.layers[mtxt];
  737.   }
  738.   return m;
  739. }
  740. /*
  741. -------------------------------------------------------------------------------
  742. 说    明:JavaScript脚本,验证表单中的数据项  end
  743. -------------------------------------------------------------------------------  
  744. */ 
  745. /*
  746. 用途:检查输入字符串是否是带小数的数字格式,可以是负数(并且满足规定的精度)
  747. 输入:str:字符串
  748.             l:总位数
  749.            d:小数点后位数
  750. 返回:
  751.  如果通过验证返回true,否则返回false 
  752. */
  753. function isDecimal( str,l,d ){   
  754.          if(isInteger(str)) {
  755.     if (l==null)  return true;
  756.     if (str<0) l--;
  757.       if (str.length<=l) return true;
  758.          } 
  759.          var re = /^[-]{0,1}(/d+)[/.]+(/d+)$/;
  760.        if (re.test(str)) {
  761.   if (l==null)  return true;
  762.   if (d==null) d=0;
  763.         if(RegExp.$1==0&&RegExp.$2==0) return false;
  764.   if (RegExp.$1.length+RegExp.$2.length<=l
  765.    && RegExp.$2.length<=d)  return true;
  766.     }
  767.  return false;
  768. }
<think>首先,用户想了解如何使用HTML和JavaScript实现登录验证功能。系统指令要求回答结构清晰,帮助用户逐步解决问题,并使用中文回复。另外,需要生成相关问题,并在回答中适当引用提供的引用段落。回顾提供的引用内容:-引用[1]:展示了JavaScript代码用于登录验证。包括检查用户名和密码是否符合特定值(如用户名必须是"20201415204",密码必须是"123456"),并在输入错误时显示错误信息。-引用[2]:讨论了基于HTML和JavaScript的滑动图片拼图验证的实现思路,涉及到Canvas、div、span等元素来构建验证界面。-引用[3]:提到HTMLJS实现登录验证,通过检查字符类型(例如数字、字母、下划线)来验证用户名。用户的问题是:“请问如何使用HTML和JavaScript实现登录验证功能”。所以,我需要提供一个清晰、逐步的解释,包括HTML结构和JavaScript功能。结构化我的回答:1.**简介**:简要介绍HTML和JavaScript如何配合实现登录验证。2.**基本步骤**:分步讲解如何构建:-HTML表单:输入字段(用户名、密码)和提交按钮。-JavaScript验证函数:用于检查输入是否有效。-错误处理:如何显示错误消息。3.**引用整合**:自然地引用提供的参考资料来支持解释。-例如,从引用[1]展示如何检查输入值。-从引用[2]或[3]可以提到更复杂的验证,如图片拼图或字符类型检查。4.**示例代码**:提供简单的HTML和JavaScript代码示例,模拟引用[1]或[3]的实现。-确保代码正确,使用代码块格式,像系统指令中示例那样。5.**添加引用标识**:在适当的地方引用,如"类似如引用[1]所示"。6.**生成相关问题**:在结尾添加相关问题,基于主题。-例如:如何增加安全性?如何实现滑动验证?如何存储用户数据?确保LaTeX语法正确:-系统指令要求所有数学表达式用$...$或$$...$$。但本问题是关于HTML/JS,可能没有数学内容,所以可以不涉及LaTeX。如果有需要,例如在解释算法时使用,但不太需要。使用中文回复:-整个回答必须用中文。回答的结构:-**步骤1:创建HTML表单**-**步骤2:添加JavaScript验证**-**步骤3:显示验证结果**-**示例代码**-**引文**-**相关问题**示例代码可以基于引用[1]简化:```html<divid="login"><inputtype="text"id="Na"placeholder="用户名"><spanid="name"></span><inputtype="password"id="pwd"placeholder="密码"><spanid="pwdId"></span><buttononclick="validate()">登录</button></div><script>functionvalidate(){varNa=document.getElementById("Na").value;varpwd=document.getElementById("pwd").value;if(Na!=="固定用户名"||pwd!=="固定密码"){alert("登录失败!");returnfalse;}else{alert("登录成功!");returntrue;}}</script>```但引用[1]中更复杂,包括输入时实时验证,所以需要调整。为了更真实,建议使用引用[1]的风格:-有两个函数:一个用于用户名验证,一个用于密码验证。-在输入字段中通过oninput或onchange调用函数实时验证。最终回答大纲:1.**介绍**:解释登录验证的重要性。2.**HTML部分**:描述表单元素。3.**JavaScript部分**:实现验证逻辑。4.**代码示例**:提供一个简单的例子。5.**引文参考**:提及引用[1]、[2]、[3]在相关部分。6.**安全问题**:简短讨论硬编码密码的风险,提示更安全的方法(如服务器端验证)。7.**相关问题**:列出3-4个相关问题。</think> ### 如何使用HTML和JavaScript实现登录验证功能 登录验证是网页开发中的核心功能,用于确保用户输入的信息符合要求。以下是基于HTML结构和JavaScript逻辑实现的逐步指南,参考了您提供的引用资料。整个过程分三步:构建HTML表单、添加JavaScript验证逻辑、实现结果显示。 #### **步骤1:创建HTML登录表单** HTML表单提供用户输入界面,包括用户名、密码输入框、提交按钮和用于显示错误信息的区域。参考引用[1]和[3],使用`<div>`、`<input>`和`<span>`元素。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录验证</title> <style> #login { position: absolute; padding: 20px; border: 1px solid #ccc; background: #f9f9f9; } .error { color: red; } </style> </head> <body> <div id="login"> <label>用户名:</label> <input type="text" id="Na" placeholder="输入用户名" oninput="checkName()"> <span id="name" class="error"></span><br> <label>密码:</label> <input type="password" id="pwd" placeholder="输入密码" oninput="checkPwd()"> <span id="pwdId" class="error"></span><br> <button onclick="submitForm()">登录</button> </div> </body> </html> ``` - **关键元素**: - `oninput`属性用于实时验证输入(参考引用[1]的交互方式)。 - `<span>`标签显示错误信息(类似引用[1]的`document.getElementById("name").innerHTML="用户名错误"`)。 #### **步骤2:添加JavaScript验证逻辑** JavaScript实现验证功能,包括用户名/密码格式检查(如字符类型)和值匹配(参考引用[1]和[3])。验证通常在输入时实时发生,并在提交时统一校验。 ```javascript <script> // 初始化表单位置(参考引用[1]的居中逻辑) window.onload = function() { var loginDiv = document.getElementById("login"); var divW = loginDiv.clientWidth; var divH = loginDiv.clientHeight; var w = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var h = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; var x = (w - divW) / 2; var y = (h - divH) / 2; loginDiv.style.left = x + "px"; loginDiv.style.top = y + "px"; }; // 用户名验证(含字符类型检查,参考引用[3]) function checkName() { var Na = document.getElementById("Na").value.trim(); var nameSpan = document.getElementById("name"); // 检查是否为预期值(例如"20201415204") if (Na === "20201415204") { nameSpan.innerHTML = "用户名正确"; nameSpan.style.color = "green"; return true; } else if (Na === "") { nameSpan.innerHTML = ""; return false; } else { nameSpan.innerHTML = "用户名错误"; nameSpan.style.color = "red"; return false; } // 可选:添加字符类型验证(参考引用[3]的字符检查逻辑) // 示例:用户名需为字母、数字或下划线 // for (var i = 0; i < Na.length; i++) { // var char = Na.charAt(i); // if (!(char >= '0' && char <= '9') && !(char >= 'a' && char <= 'z') && char !== '_') { // nameSpan.innerHTML = "仅支持字母、数字或下划线"; // return false; // } // } } // 密码验证(类似引用[1]) function checkPwd() { var pwd = document.getElementById("pwd").value.trim(); var pwdSpan = document.getElementById("pwdId"); if (pwd === "123456") { pwdSpan.innerHTML = "密码正确"; pwdSpan.style.color = "green"; return true; } else if (pwd === "") { pwdSpan.innerHTML = ""; return false; } else { pwdSpan.innerHTML = "密码错误"; pwdSpan.style.color = "red"; return false; } } // 提交表单前的统一验证 function submitForm() { var nameValid = checkName(); var pwdValid = checkPwd(); if (nameValid && pwdValid) { alert("登录成功!"); // 实际应用中跳转到主页 } else { alert("请修正错误后重试"); } } </script> ``` - **验证逻辑**: - 用户名和密码硬编码为固定值用于演示(如引用[1]中的`if (Na!="20201415204")`),实际应用需连接服务器数据库。 - 实时错误提示通过`innerHTML`更新(参考引用[1])。 - 字符类型检查是可选扩展(参考引用[3]的`if (!(charname >= 0 && charname <= 9)...`)。 #### **步骤3:扩展功能和安全建议** - **增强验证**:如引用[2]所述,可添加滑动拼图验证防止机器人攻击(例如用Canvas实现滑块元素)。 - **安全性**:此示例仅为客户端验证,实际项目必须添加服务器端验证(如PHP或Node.js),避免前端硬编码密码风险[^1]。 - **交互优化**:居中表单提升用户体验(如引用[1]的窗口尺寸计算)。 #### **完整示例** 将上述HTML和JavaScript整合到一个文件中,用户打开即可体验登录验证过程。实时反馈减少用户错误(类似引用[1]的设计)。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值