- 1.验证表单数据类型
在提交表单前，我们需要验证表单输入的数据类型是否正确。例如，我们可以使用正则表达式来验证输入的邮件地址是否符合规范。
functionvalidateEmail(email) { varreg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; returnreg.test(email); } varemail=document.getElementById("email").value; if (!validateEmail(email)) { alert("请输入正确的邮箱地址！"); returnfalse; }
- 2.验证表单数据的必填项
除了验证数据类型，我们还需要验证必填项是否填写。例如，我们可以在提交表单前判断表单是否为空。
functionvalidateForm() { varname=document.forms["myForm"]["name"].value; varemail=document.forms["myForm"]["email"].value; varmessage=document.forms["myForm"]["message"].value; if (name==""||email==""||message=="") { alert("请填写所有必填项！"); returnfalse; } }
- 3.验证表单数据的长度
表单数据的长度也需要进行验证。例如，我们可以限制输入字符的长度。
functionvalidateLength() { varmessage=document.getElementById("message").value; if (message.length>100) { alert("留言内容不能超过100个字符！"); returnfalse; } }
- 4.验证表单数据的范围
对于数字类型的表单数据，我们需要进行范围验证。例如，我们可以限制输入年龄的范围在18到60岁之间。
functionvalidateAge() { varage=document.getElementById("age").value; if (age<18||age>60) { alert("年龄必须在18到60岁之间！"); returnfalse; } }
- 5.实时验证表单数据
为了提高用户体验，我们可以使用实时验证表单数据。例如，在用户输入邮箱地址时，我们可以实时验证邮箱地址的格式是否正确。
functionvalidateEmailRealtime() { varemail=document.getElementById("email"); varemailValue=email.value; varreg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if (!reg.test(emailValue)) { email.style.border="1px solid red"; } else { email.style.border="1px solid green"; } }
在以上的例子中，我们使用JavaScript实现了常见的表单验证功能。
