JavaScript表单验证 javascript表单验证|JavaScript

本文概要

JavaScript的表单验证实例
JavaScript的重新输入密码验证
JavaScript的号验证
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="http://www.srcmini.com/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的号验证【JavaScript表单验证】让我们验证了只有数值文本字段。在这里，我们使用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="http://www.srcmini.com/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='http://www.srcmini.com/unchecked.gif'/> Please enter your name"; status=false; }else{ document.getElementById("nameloc").innerHTML=" < img src='http://www.srcmini.com/checked.gif'/>"; status=true; } if(password.length< 6){ document.getElementById("passwordloc").innerHTML= " < img src='http://www.srcmini.com/unchecked.gif'/> Password must be at least 6 char long"; status=false; }else{ document.getElementById("passwordloc").innerHTML=" < img src='http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/register"> < /form>