找回密码
 注册
搜索
热搜: java php web
查看: 653|回复: 7

验证必填字段的好函数

[复制链接]
发表于 2009-1-25 18:33:41 | 显示全部楼层 |阅读模式
验证必填字段的好函数,希望跟大家一起学习
复制内容到剪贴板
代码:
<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>
发表于 2009-1-25 19:55:58 | 显示全部楼层
不错,学习一下
回复

使用道具 举报

发表于 2009-1-25 19:19:21 | 显示全部楼层
验证必填字段的好函数
回复

使用道具 举报

发表于 2009-1-25 20:08:15 | 显示全部楼层
不错,收了
回复

使用道具 举报

发表于 2009-1-25 19:14:59 | 显示全部楼层
这个验证的是很好.谢谢.
回复

使用道具 举报

发表于 2009-1-25 19:47:10 | 显示全部楼层
en ,不错,学习。
回复

使用道具 举报

发表于 2009-1-25 19:17:52 | 显示全部楼层
大家英语水平好高呀,全英语的夸好。。。。
回复

使用道具 举报

发表于 2009-1-25 19:11:44 | 显示全部楼层
学习
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|软晨网(RuanChen.com)

GMT+8, 2024-11-14 12:52

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

快速回复 返回顶部 返回列表