表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。
HTML表单的输入控件主要有以下几种:
文本框,对应的<input type="text">,,用于输入文本;
单选框,对应的<input type="radio">,用于选择一项;
复选框,对应的<input type="checkbox">,用于选择多项;
下拉框,对应的<select>,用于选择一项;
隐藏文本,对应的<input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性:
验证表单数据是否为空?
验证输入是否是一个正确的email地址?
验证日期是否输入正确?
验证表单输入内容是否为数字型?
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert("请输入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
中文/英文/数字/邮件地址合法性判断:
function isEnglish(name) //中文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name. charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值检测
{
if(name.length == 0)
return false;
for (i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E -mail值检测
{
if(! isEnglish(name))
return false;
i = name.indexOf(" at ");
j = name dot lastIndexOf(" at ");
if(i == - 1)
return false;
if(i != j)
return false;
if(i == name 点长)
return false;
return true;
}
function isNumber(name) // 数值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < "0" || name. charAt(i) > "9")
返回 false;
}
返回 true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert("您的电子邮件不合法!");
form.Email.focus();
return false;
}
if(!isEnglish(form.name.value)) {
alert("中文名不合法!");
form.name.focus();
return false;
}
if(!isChinese(form.cnname.value)) {
alert("中文名不合法!");
form.cnname.focus();
返回 false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert("邮政编码不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}