表格验证

时间:2012-04-21 04:49:44

标签: javascript

validate document.forms()



if document.forms[0].userAge.value =="" 

    alert("Age field cannot be empty."
        return false;


if document.forms[0].userAge.value<5

   alert"Your age input is not correct."
    return false;


if userage==isNumber

   alert"Your age input is not correct."
    return false;



   alert"Name and Age are valid."

   return true





     <label for="userAge">Age:</label>

    <input type="text" name="userAge" id="userAge" />

 </div>

如果这是我的代码,我该如何制作,以便如果有人在年龄文本框中输入一个非数字,会出现一条警告,说“您的输入不正确”?

4 个答案:

答案 0 :(得分:0)

我建议您使用以下Javascript,它不允许在文本字段中使用非数字字符。

function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {
        return false;
    }
    return true;
}

<input type="text" id="userAge" name="userAge" onkeypress="return isNumberKey(event);">

答案 1 :(得分:0)

试试这个解决方案

   <script language="javascript">
   function validate(){
  alert("validate ..."+document.forms[0].userAge.value);
  if (document.forms[0].userAge.value == ""){ 
    alert("Age field cannot be empty.");
    return false;
  }

  if (document.forms[0].userAge.value<5){
    alert("Your age input is not correct.");
    return false;
  }
   //provide a way to validate if its numeric number..maybe using regexp
   //if (isNumeric(userAge)){
   //   alert("Your age input is not correct.");
   //   return false;
   //}
   //alert"Name and Age are valid."
   return true;
  }
    </script>

HTML应为

<form>
<div><label for="userAge">Age:</label>
<input type="text" name="userAge" id="userAge" onblur="validate()"/>
</div>
</form>

答案 2 :(得分:0)

编辑:我最初建议使用parseInt和isNaN()来测试输入是否为非数字。好吧,似乎使用正则表达式不仅可以正确地格式化像“4a”这样的情况,而且在许多情况下它实际上更快(惊喜!)。

我用一个按钮来模拟一些HTML来说明。

HTML:

<form>
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge" />
    <input type="button" id="test" name="test" value="Test" />
</form>

JavaScript的:

function validateForm() {

    // get the input value once and use a variable
    // this makes the rest of the code more readable
    // and has a small performance benefit in retrieving
    // the input value once
    var userAge = document.forms[0].userAge.value;

    // is it blank?
    if (userAge === "") {
        alert("Age field cannot be empty.")
        return false;
    }

    // is it a valid number? testing for positive integers
    if (!userAge.match(/^\d+$/)) {
        alert("Your age input is not correct.")
        return false;
    }

    // you could also test parseInt(userAge, 10) < 5
    if (userAge < 5) {
        alert("Your age input is not correct.")
        return false;
    }

    alert("Name and Age are valid.");
    return true;
}

// trigger validateForm() however you want, I did this as an example
document.getElementById("test").onclick = validateForm;

这是一个证明:http://jsfiddle.net/willslab/m2spX/6/

的jsFiddle

关于正则表达式:如果userAge只包含正整数,则userAge.match(/ ^ \ d + $ /)返回true。开头/结尾/表示正则表达式文字。 \ d表示仅ASCII码。 +匹配前一个模式的一个或多个匹配项(在这种情况下为数字)。 ^表示从头开始匹配,$表示匹配到结束。所以/ ^ \ d + $ /是一个正则表达式文字,从头到尾只匹配ASCII数字!

另请注意,您可以使用OR运算符(||)组合最后两个if语句。如果你想给每个人一个独特的验证信息,我就把它们隔离开了。

看起来像这样:

if (!userAge.match(/^\d+$/) || userAge < 5) {
    alert("Your age input is not correct.")
    return false;
}

随意询问有关代码的任何问题,我会解释。我希望有所帮助!

答案 3 :(得分:0)

使用以下代码

  if(isNaN(document.forms[0].userAge.value)){
     alert('This is not a number');


  }