JavaScriptフロントエンドform検証(正規表現なし)
8543 ワード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Car Picker</title>
<script language="Javascript" type="text/javascript" src="validate.js">
</script>
<link rel="stylesheet" href="validate.css" />
</head>
<body>
<h2 align="center">Car Picker</h2>
<form action="#">
<p><label for="emailAddr">Email Address:
<input id="emailAddr" type="text" size="30" class="reqd email" />
</label></p>
<p><label for="color">Colors:
<select id="color" class="reqd">
<option value="" selected="selected">Choose a color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
</label></p>
<p>Options:
<label for="sunroof"><input type="checkbox" name="checkes" id="sunroof" value="checkCar" class="checkes" />Sunroof (Two door only)</label>
<label for="pWindows"><input type="checkbox" name="checkes" id="pWindows" value="checkCar" class="checkes" />Power Windows</label>
</p>
<p><label for="radios">Doors:
<input type="radio" id="twoDoor" name="radios" value="twoDoor" class="radios" />Two
<input type="radio" id="fourDoor" name="radios" value="fourDoor" class="radios" />Four
</label></p>
<!--
<p><label for="zip">Enter your Zip code or pick the dealer nearest you:<br />
Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList reqd " />
<select id="dealerList" size="4" class="zip">
<option value="California--Lemon Grove">California--Lemon Grove</option>
<option value="California--Lomita">California--Lomita</option>
<option value="California--Long Beach">California--Long Beach</option>
<option value="California--Los Alamitos">California--Los Alamitos</option>
<option value="California--Los Angeles">California--Los Angeles</option>
</select>
</label></p>
-->
<p><input type="submit" value="Submit" /> <input type="reset" /></p>
</form>
</body>
</html>body {
color:#000;
background-color:#fff;
}
input.invalid{
background-color:#ff9;
border:2px red inset;
}
span.innerHtml{
border:1px blue inset;
}
label.invalid{
color:#f00;
}window.onload = initForm;
String.prototype.trim = function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
function initForm(){
var formsArr = document.forms;
for(var i=0;i<formsArr.length;i++){
var formF = formsArr[i];
formF.onsubmit = function(){preSubmitForm(formF)};
}
document.getElementById("sunroof").onclick = doorSet;
}
function preSubmitForm(formF){
var formAllTag = formF.getElementsByTagName("*");
for(var i=0;i<formAllTag.length;i++){
var formTag = formAllTag[i];
if(!validate(formTag)){
formTag.focus();
if(formTag.nodeName=="INPUT"){
formTag.select();
}
return false;
}
}
return true;
}
function validate(formTag){
var tagClassPrim = formTag.className;
var classPrim = tagClassPrim.split(" ");
var classOut = "";
if(null!=classPrim && classPrim.length>0){
for(var i=0;i<classPrim.length;i++){
classOut += convertClass(formTag,classPrim[i]);
}
formTag.className = classOut;
}
if(classOut.indexOf("invalid")>-1){
strongLabel(formTag.parentNode);
return false;
}
return true;
}
function convertClass(formTag,classSingle){
var newClass = "";
switch(classSingle){
case "":
case "invalid":
break;
case "reqd":
if(formTag.value.trim()==""){
newClass = " invalid "+classSingle;
}else{
newClass = " "+classSingle;
}
break;
case "passwd1":
if(!checkPasswd(formTag,classSingle)){
newClass = " invalid "+classSingle;
}else{
newClass = " "+classSingle;
}
break;
case "checkes":
case "radios":
if(!checkCar(classSingle)){
newClass = " invalid "+classSingle;
}else{
newClass = " "+classSingle;
}
break;
case "zip":
if(!checkZip(formTag,classSingle)){
newClass = " invalid "+classSingle;
}else{
newClass = " "+classSingle;
}
default:
newClass = " "+classSingle;
}
return newClass;
}
function checkPasswd(forTag,classSingle){
var passwd1 = document.getElementById(classSingle);
var passErrObj = document.getElementById("passErrorHint");
if(passwd1.value!=forTag.value){
passErrObj.className = "innerHtml";
passErrObj.innerHTML = " ";
return false;
}
passErrObj.className="";
passErrObj.innerHTML="";
return true;
}
function strongLabel(labelTag){
if(labelTag.nodeName=="LABEL"){
labelTag.className += " invalid ";
}
}
function checkCar(classSingle){
var checkes = document.getElementsByName(classSingle);
if(null==checkes || null==checkes.length){
return false;
}else{
for(var i=0;i<checkes.length;i++){
if(checkes[i].checked){
return true;
}
}
return false;
}
}
function checkZip(formTag){
var zipStr = formTag.value;
for(var i=0;i<zipStr.length;i++){
var intCode = parseInt(zipStr.charAt(i));
if(intCode==NaN){
return false;
}
if(intCode<0||intCode>9){
return false;
}
}
return true;
}
function doorSet(){
if(this.checked){
document.getElementById("twoDoor").checked = true;
}else{
document.getElementById("twoDoor").checked = false;
}
}