Javascript表单验证案例
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Javascript表单验证案例
一、前期准备
站点目录:E:\Mywebsite
站点中的页面:
E:\Mywebsite\reg.html 用户注册的表单页面
E:\Mywebsite\getData.html 点击“注册”按钮后跳转的用于模拟接收数据的页面reg.html效果图:
getData.html效果图:
运行效果图:
二、表单验证页面(reg.html)完整代码
function checkReg()
{
if(!document.getElementById("username").value.match(/^[a-zA-Z_][a-z0-9A-Z_]{2,7}$/))
{
alert("用户名填写不正确!");
document.getElementById("username").focus();
return false;
}
if(document.getElementById("psw1").value.length>16||document.getElementById("psw1").value.length <6)
{
alert("密码长度为6-16个字符!");
document.getElementById("psw1").focus();
return false;
}
if(document.getElementById("psw1").value!=document.getElementById("psw2").value)
{
alert("两次密码不匹配!");
document.getElementById("psw1").focus();
return false;
}
if(!document.getElementById("mobilephone").value.match(/^(180|181|189)\d{8}$/))
{
alert("手机号码填写有误!");
document.getElementById("mobilephone").focus();
return false;
}
if(!document.getElementById("qq").value.match(/^[1-9]\d{2,}$/))
{
alert("QQ号码填写有误!");
document.getElementById("qq").focus();
return false;
}
if(!(document.getElementById("email").value.match(/^\w+@\w{2,63}\.(com|org|net|edu|mil|cn)$/)|| document.getElementById("email").value.match(/^\w+@\w{2,63}\.(com|org|net|edu|mil|cn)\.cn$/))) {
alert("电子邮件填写不正确!");
document.getElementById("email").focus();
return false;
}
}