JavaScript表单验证
JavaScript表单验证
验证用户提交的表单很重要，因为它的值可能不合适。因此，必须通过验证来验证用户身份。
JavaScript提供了在客户端验证表单的功能，因此数据处理将比服务器端验证更快。大多数Web开发人员更喜欢JavaScript表单验证。
通过JavaScript，我们可以验证名称，密码，电子邮件，日期，手机号码和更多字段。
JavaScript表单验证示例
在此示例中，我们将验证名称和密码。名称不能为空，密码不能少于6个字符。
在这里，我们正在验证表单提交时的表单。在给定值正确之前，不会将用户转发到下一页。
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
输出：
JavaScript重新输入密码验证
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
JavaScript Number验证
让我们仅针对数字值验证文本字段。在这里，我们正在使用isNaN()函数。
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
带有图像的JavaScript验证
让我们看一个交互式JavaScript表单验证示例，该示例在输入正确或不正确的情况下显示正确和不正确的图像。
<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;
if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='unchecked.gif'/> Please enter your name";
status=false;
}else{
document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
status=true;
}
if(password.length<6){
document.getElementById("passwordloc").innerHTML=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
}else{
document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
}
return status;
}
</script>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>
JavaScript电子邮件验证
我们可以借助JavaScript来验证电子邮件。
验证电子邮件ID需要遵循许多标准，例如：
电子邮件ID必须包含@和。字符
@前后必须至少有一个字符。
之后必须至少有两个字符。 (点)。
让我们看一下验证电子邮件字段的简单示例。
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
输出：