DHTML form validation_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

DHTML form validation_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:16 PM

dhtmlformvalidation

<title>DHTML form validation</title> 
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)"> 
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML,CSS, Menu, Menus,Drag and drop, Drag, Drop, Cross-browser, Cross browser, Examples, Javascript, Free, Javascripts, Cascading Style Sheet, Crossbrowser,Alf Magne Kalleland, Batalf, minesweeper"> 
<meta name="robots" content="follow"> 
<meta name="googlebot" content="index, follow"> 
 
<style type="text/css">

body{ 
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;  /* Font to use */ 
  background-color:#FFF; 
  font-size:0.9em;

} 
   
/* Style for invalid input */ 
.invalidInput{ 
  border:1px solid #F00; 
  padding:1px; 
}

/* Style for valid input */ 
.validInput{ 
  border:1px solid #FFF; 
  padding:1px;

} 
</style> 
<script type="text/javascript"> 
/************************************************************************************************************ 
(C) www.dhtmlgoodies.com, February 2006

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use: 
You are free to use this script as long as the copyright message is kept intact. However, you may not 
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com 
Alf Magne Kalleland

************************************************************************************************************/   
   
// Patterns 
var formValidationMasks = new Array(); 
formValidationMasks['email'] = /\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi;  // Email 
formValidationMasks['numeric'] = /^[0-9]+$/gi;  // Numeric 
formValidationMasks['zip'] = /^[0-9]{5}\-[0-9]{4}$/gi;  // Numeric

var formElementArray = new Array();

function validateInput(e,inputObj) 
{ 
  if(!inputObj)inputObj = this;     
  var inputValidates = true; 
   
  if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false; 
  if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0){ 
    inputValidates = false; 
  } 
  if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;

if(formElementArray[inputObj.name]['freemask']){ 
    var tmpMask = formElementArray[inputObj.name]['freemask']; 
    tmpMask = tmpMask.replace(/-/g,'\\-'); 
    tmpMask = tmpMask.replace(/S/g,'[A-Z]'); 
    tmpMask = tmpMask.replace(/N/g,'[0-9]'); 
    tmpMask = eval("/^" + tmpMask + "$/gi"); 
    if(!inputObj.value.match(tmpMask))inputValidates = false 
  }   
   
  if(formElementArray[inputObj.name]['regexpPattern']){ 
    var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']); 
    if(!inputObj.value.match(tmpMask))inputValidates = false 
  } 
  if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true; 
   
   
  if(inputValidates){ 
    inputObj.parentNode.className='validInput'; 
  }else{ 
    inputObj.parentNode.className='invalidInput' 
  } 
}

function isFormValid() 
{ 
  var divs = document.getElementsByTagName('DIV'); 
  for(var no=0;no<divs.length;no++){ 
    if(divs[no].className=='invalidInput')return false; 
  } 
  return true;   
}

function initFormValidation() 
{ 
  var inputFields = document.getElementsByTagName('INPUT'); 
  var selectBoxes = document.getElementsByTagName('SELECT'); 
   
  var inputs = new Array(); 
   
   
  for(var no=0;no<inputFields.length;no++){ 
    inputs[inputs.length] = inputFields[no]; 
     
  }   
  for(var no=0;no<selectBoxes.length;no++){ 
    inputs[inputs.length] = selectBoxes[no]; 
     
  } 
   
  for(var no=0;no<inputs.length;no++){ 
    var required = inputs[no].getAttribute('required'); 
    if(!required)required = inputs[no].required;     
     
    var mask = inputs[no].getAttribute('mask'); 
    if(!mask)mask = inputs[no].mask; 
     
    var freemask = inputs[no].getAttribute('freemask'); 
    if(!freemask)freemask = inputs[no].freemask; 
     
    var regexpPattern = inputs[no].getAttribute('regexpPattern'); 
    if(!regexpPattern)regexpPattern = inputs[no].regexpPattern; 
     
    var div = document.createElement('DIV'); 
    div.className = 'invalidInput'; 
    inputs[no].parentNode.insertBefore(div,inputs[no]); 
    div.appendChild(inputs[no]); 
    div.style.width = inputs[no].offsetWidth + 'px'; 
     
    inputs[no].onblur = validateInput; 
    inputs[no].onchange = validateInput; 
    inputs[no].onpaste = validateInput; 
    inputs[no].onkeyup = validateInput; 
     
     
    formElementArray[inputs[no].name] = new Array(); 
    formElementArray[inputs[no].name]['mask'] = mask; 
    formElementArray[inputs[no].name]['freemask'] = freemask; 
    formElementArray[inputs[no].name]['required'] = required; 
    formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;

validateInput(false,inputs[no]); 
       
  }   
}

window.onload = initFormValidation;

</script>

<form action="" method="post" onsubmit="if(isFormValid())alert('Everything is ok'); else { alert('Something is wrong');return false; }"> 
<fieldset> 
  <legend>DHTML form validation</legend> 
  <table> 
    <tr> 
      <td><label for="input1">First name:</label></td> 
      <td><input name="input1" id="input1" type="text" required="1" value=""></td> 
      <td>Required = 1</td> 
    </tr> 
    <tr> 
      <td><label for="input2">Last name:</label></td> 
      <td><input name="input2" id="input2" type="text" required="1" value=""></td> 
      <td>Required = 1</td> 
    </tr> 
    <tr> 
      <td><label for="email">Email:</label></td> 
      <td><input name="email" id="email" mask="email" type="text" size="30" required="1" value=""></td> 
      <td>Required = 1, mask = email</td> 
    </tr> 
    <tr> 
      <td><label for="age">Age:</label></td> 
      <td><input name="age" id="age" mask="numeric" type="text" required="1" value="" size="3" maxlength="3"></td> 
      <td>Required = 1, mask = numeric</td> 
    </tr> 
    <tr> 
      <td><label for="code">Code(SSSS-NN):</label></td> 
      <td><input name="code" id="code" freemask="SSSS-NN" type="text" required="1" value="" size="8" maxlength="7"></td> 
      <td>Required = 1, freemask = SSSS-NN i.e four letters and two digits</td> 
    </tr>   
    <tr> 
      <td><label for="zipcode">Zip code(NNNNN-NNNN):</label></td> 
      <td><input name="zipcode" id="zipcode" mask="zip" type="text" required="1" value="" size="11" maxlength="10"></td> 
      <td>Required = 1, mask = zip</td> 
    </tr>     
    <tr> 
      <td><label for="zipcode">Domain:</label></td> 
      <td><input name="domain" id="domain" regexppattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" size="30" type="text" value=""></td> 
      <td>regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi"</td> 
    </tr>   
    <tr> 
      <td>Country</td> 
      <td>
<select name="country" required="1"> 
        <option value=""></option> 
        <option value="Norway">Norway</option> 
        <option value="Denmark">Denmark</option> 
        <option value="Sweden">Sweden</option> 
        <option value="Finland">Finland</option> 
        <option value="France">France</option> 
        <option value="United States">United States</option> 
        <option value="Germany">Germany</option> 
        </select> 
      </td> 
      <td>Required = 1</td> 
    </tr> 
    <tr> 
      <td><input type="submit" value="Send"></td> 
    </tr> 
  </table> 
</fieldset> 
 </form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

SpringBoot Validation提示信息国际化如何配置May 11, 2023 am 11:43 AM

SpringBootValidation支持JSR-380（aka.BeanValidation2.0，partofJakartaEEandJavaSE）注解，可通过验证注解的message属性设置验证错误提示信息，且每个验证注解都有默认的message配置，例如@NotBlank的message属性值设置如下图：默认的message="{...}"的形式即指定国际化属性的名称，后续会根据语言环境替换为对应的值，而这些国际化属性的定义可参见hibernate-validato

Laravel开发：如何使用Laravel Validation验证表单请求？Jun 13, 2023 pm 01:34 PM

Laravel是一个流行的PHPWeb开发框架，它提供了很多方便的功能来加快开发者的工作。其中，LaravelValidation是一种非常实用的功能，它可以帮助我们轻松地验证表单请求和用户输入的数据。本文就将介绍如何使用LaravelValidation验证表单请求。什么是LaravelValidationLaravelValidation是La

BinaryX再次更名FORM，还给社区的FOUR即将暴涨？Mar 04, 2025 pm 12:00 PM

BinaryX的代币更名：从BNX到FOUR，再到FORM，战略调整背后的深层含义BinaryX近期将代币符号从$FOUR更改为$FORM，引发业界广泛关注。这并非BinaryX首次更名，其代币符号曾经历BNX到FOUR的转变。本文将深入探讨这一系列更名背后的战略意图。一、代币更名历程与战略考量BinaryX最初于2021年推出基于BNB链的$BNX代币，用于支持其Play-to-Earn（P2E）游戏生态。2024年初，为优化经济模型，BinaryX对$BNX进行了分割，并逐渐拓展至GameF

SpringBoot如何利用validation实现优雅的校验参数May 17, 2023 am 09:31 AM

1、前言数据的校验是交互式网站一个不可或缺的功能，前端的js校验可以涵盖大部分的校验职责，如用户名唯一性，生日格式，邮箱格式校验等等常用的校验。但是为了避免用户绕过浏览器，使用http工具直接向后端请求一些违法数据，服务端的数据校验也是必要的，可以防止脏数据落到数据库中，如果数据库中出现一个非法的邮箱格式，也会让运维人员头疼不已。可以使用本文将要介绍的validation来对数据进行校验。2、常用校验1.JSR303/JSR-349:JSR303是一项标准,只提供规范不提供实现，规定一些校验规范

Laravel开发：如何使用Laravel Validation验证请求数据？Jun 14, 2023 am 08:35 AM

Laravel开发：如何使用LaravelValidation验证请求数据？Laravel作为目前最流行的PHP框架之一，其原因之一就在于它提供了很多优秀的组件，其中之一是LaravelValidation。在Web开发过程中，我们常常需要验证从前端提交的数据是否符合规范，如表单提交等，这时候就需要使用LaravelValidation组件来进行数据验

html5中可以有多个form吗Aug 01, 2022 pm 05:28 PM

html5中可以有多个form。在同一个HTML的页面中规则上允许可以用到多个form标签，但是为了防止提交时后台无法识别，需要给表单加上不同的ID或者class，语法“<from action="url" id="id值1">表单元素</from><from action="url" id="id值2">表单元素</from>.....”。

html5定义表单的标签是什么Jul 26, 2022 pm 04:26 PM

html5定义表单的标签是“<form>”。form标签用于创建供用户输入的HTML表单（表单域），以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器；语法“<form action="提交地址" method="提交方式" name="表单名称">表单控件</form>”。form表单中可包含一个或多个表单元素，比如input、select、textarea。

SpringBoot怎么使用validation做参数校验May 21, 2023 am 11:10 AM

1.添加依赖直接添加hibernate-validatororg.hibernate.validatorhibernate-validator6.0.2.Final添加spring-boot-starter-validationorg.springframework.bootspring-boot-starter-validation1.4.0.RELEASE添加spring-boot-starter-weborg.springframework.bootspring-boot-starter-

See all articles