javascript 验证

来源:互联网 发布:java中过滤器的作用 编辑:程序博客网 时间:2024/05/22 05:36

转自:http://blog.sina.com.cn/s/blog_6abf4a740100ysb5.html

1、验证邮箱的格式

 <script type="text/javascript">
           function isEmailAddr(elem){
                 var str=elem.value;
                 var re=/^[\w-]+(\.[\w]+)*@([\w-]+\.)+[a-zA-z]{2,7}$/;
                 if(!str.match(re)){
                       alert("这个不是电子邮件");
                       return false;
                     }
                  else{
                       return true;
                      }
               }
    </script>
    <input type="text" name="email" onchange="isEmailAddr(this)" />

 

2、验证输入是否为一个正的或着是负的数字 

 <form name="form1">
    <input type="text" id="number" name="number" onchange="isNumber(this)"/>
    </form>
  <script type="text/javascript">
        function focusElement(form,elementname){
      var elem=document.forms[form].elements[elementname];
      elem.focus();
      elem.select();
      
   }
       function isNumber(elem){
        var str=elem.value;
     var re=/^[-]?\d*\.?\d*$/;
     if(!str.match(re)){
        alert("输入不是一个正的或负的数字");
       setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;         

 }
      else{

        return true;

   }


  </script>

 

3、检验输入的值的长度是否为16个字符

<form name="form1">
    <input type="text" id="len" name="len" onchange="isLen16(this)"/>
    </form>
  <script type="text/javascript">
        function focusElement(form,elementname){
      var elem=document.forms[form].elements[elementname];
      elem.focus();
      elem.select();
      
   }
       function isLen16(elem){
        var str=elem.value;
     var re=/\b.{16}\b/;
     if(!str.match(re)){
        alert("您输入的长度没有达到16字符长");
       setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;     

     }

  else{

        return true;

   }


     }
  </script>

 

4、检查文本域中是否有一个或者多个字符

<form name="form1">
    <input type="text" id="enpty" name="empty" onchange="isEmpty(this)"/>
    </form>
  <script type="text/javascript">
       function focusElement(form,elementname){
      var elem=document.forms[form].elements[elementname];
      elem.focus();
      elem.select();
      
   }
       function isEmpty(elem){
        var str=elem.value;
     var re=/.+/;
     if(!str.match(re)){
        alert("输入不为空");
       focusing("form1","empty")
     return false;
      }
     }
  </script>

 

 

完整例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
     Example File From "JavaScript and DHTML Cookbook"
     Second Edition
     Published by O'Reilly Media
     Copyright 2007 Danny Goodman
-->
<html>
<head>
<title>Recipes 8.2, 8.3, and 8.4</title>
<link rel="stylesheet" id="mainStyle" href="../css/cookbook.css" type="text/css" />
<script type="text/javascript">
// validates that the field value string has one or more characters in it
function isNotEmpty(elem) {
 var str = elem.value;
    var re = /.+/;
    if(!str.match(re)) {
        alert("Please fill in the required field.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
//validates that the entry is a positive or negative number
function isNumber(elem) {
 var str = elem.value;
    var re = /^[-]?\d*\.?\d*$/;
    str = str.toString();
    if (!str.match(re)) {
        alert("Enter only numbers into the field.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    }
    return true;
}
// validates that the entry is 16 characters long
function isLen16(elem) {
 var str = elem.value;
    var re = /\b.{16}\b/;
    if (!str.match(re)) {
        alert("Entry does not contain the required 16 characters.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
// validates that the entry is formatted as an e-mail address
function isEMailAddr(elem) {
 var str = elem.value;
    var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
    if (!str.match(re)) {
        alert("Verify the e-mail address format.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
// validate that the user made a selection other than default
function isChosen(select) {
    if (select.selectedIndex == 0) {
        alert("Please make a choice from the list.");
        return false;
    } else {
        return true;
    }
}

// validate that the user has checked one of the radio buttons
function isValidRadio(radio) {
    var valid = false;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert("Make a choice from the radio buttons.");
    return false;
}

function focusElement(formName, elemName) {
    var elem = document.forms[formName].elements[elemName];
    elem.focus();
    elem.select();
}

// batch validation router
function validateForm(form) {
    if (isNotEmpty(form.name1)) {
        if (isNotEmpty(form.name2)) {
            if (isNotEmpty(form.eMail)) {
                if (isEMailAddr(form.eMail)) {
                    if (isChosen(form.continent)) {
                        if (isValidRadio(form.accept)) {
                            return true;
                        }
                    }
                }
            }
        }
    }
    return false;
}
</script>
</head>
<body>
<h1>Form Validations</h1>
<hr />
<form method="GET" action="cgi-bin/register.pl"
    name="sampleForm" onsubmit="return validateForm(this)">
First Name: <input type="text" size="30" name="name1" id="name1"
    onchange="isNotEmpty(this)" /><br>
Last Name: <input type="text" size="30" name="name2" id="name2"
    onchange="isNotEmpty(this)" /><br>
E-mail Address: <input type="text" size="30" name="eMail" id="eMail"
    onchange="if (isNotEmpty(this)) {isEMailAddr(this)}" /><br>
Your Region: <select name="continent" id="continent">
    <option value="" selected>Choose One:</option>
    <option value="Africa">Africa</option>
    <option value="Asia">Asia</option>
    <option value="Australia">Australia/Pacific</option>
    <option value="Europe">Europe</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
</select><br>
Licensing Terms:
    <input type="radio" name="accept" id="accept1" value="agree" />I agree
    <input type="radio" name="accept" id="accept2" value="refuse" />I do not agree
<br>
<input type="reset" /> <input type="submit" />
</form>
</body>
</html>