srcmini本文概要
它以验证用户提交的，因为它可以有不当值的形式是非常重要的。所以，验证是必须进行身份验证的用户。
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的号验证
让我们验证了只有数值文本字段。在这里，我们使用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>
评论前必须登录！
注册