|
|
验证必填字段的好函数，希望跟大家一起学习
复制内容到剪贴板
代码:
<html>
<head>
<title>Simple Form</title>
<style>
form {
font-family: Arial;
font-size: 14px;
width: 300px;
}
fieldset {
border: 1px solid #CCC;
margin-bottom: 10px;
}
fieldset.login input {
width: 125px;
}
legend {
font-weight: bold;
font-size: 1.1em;
}
label {
display: block;
width: 60px;
text-align: right;
float: left;
padding-right: 10px;
margin: 5px 0;
}
input {
margin: 5px 0;
}
input.text {
padding: 0 0 0 3px;
width: 172px;
}
input.submit {
margin: 15px 0 0 70px;
}
</style>
<script>
// A generic function for checking to see if an input element has
// had information entered into it
function checkRequired( elem ) {
if ( elem.type == "checkbox" || elem.type == "radio" )
return getInputsByName( elem.name ).numChecked;
else
return elem.value.length > 0 && elem.value != elem.defaultValue;
}
// Find all input elements that have a specified name (good for finding
// and dealing with checkboxes or radio buttons)
function getInputsByName( name ) {
// The array of input elements that will be matched
var results = [];
// Keep track of how many of them were checked
results.numChecked = 0;
// Find all the input elements in the document
var input = document.getElementsByTagName("input");
for ( var i = 0; i < input.length; i++ ) {
// Find all the fields that have the specified name
if ( input.name == name ) {
// Save the result, to be returned later
results.push( input );
// Remember how many of the fields were checked
if ( input.checked )
results.numChecked++;
}
}
// Return the set of matched fields
return results;
}
// Wait for the document to finish loading
window.onload = function(){
// Get the form and watch for a submit attempt.
document.getElementsByTagName("form")[0].onsubmit = function(){
// Get an input element to check
var elem = document.getElementById("age");
// Make sure that the required age field has been checked
if ( ! checkRequired( elem ) ) {
// Display an error and keep the form from submitting.
alert( "Required field is empty – " +
"you must be over 13 to use this site." );
return false;
}
// Get an input element to check
var elem = document.getElementById("name");
// Make sure that some text has been entered into the name field
if ( ! checkRequired( elem ) ) {
// Otherwise display an error and keep the form from submitting
alert( "Required field is empty – please provide your name." );
return false;
}
};
};
</script>
</head>
<body>
<form action="" method="POST">
<fieldset class="login">
<legend>Login Information</legend>
<label for="username" class="hover">Username</label>
<input type="text" id="username" class="required text"/>
<label for="password" class="hover">Password</label>
<input type="password" id="password" class="required text"/>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name</label>
<input type="text" id="name" class="required text"/>
<label for="email">Email</label>
<input type="text" id="email" class="required email text"/>
<label for="date">Date</label>
<input type="text" id="date" class="required date text"/>
<label for="url">Website</label>
<input type="text" id="url" class="url text" value="http://"/>
<label for="phone">Phone</label>
<input type="text" id="phone" class="phone text"/>
<label for="age">Over 13?</label>
<input type="checkbox" id="age" name="age" value="yes"/>
<input type="submit" value="Submit Form" class="submit"/>
</fieldset>
</form>
</body>
</html> |
|
IP卡
狗仔卡
发表于 2009-1-25 18:33:41
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡