使用Javascript进行表单验证(通过所选选项验证输入文本)

时间:2014-02-05 16:32:46

标签: javascript forms

我有这样的表格:

<form accept-charset="UTF-8" action="type.php" id="form" method="post">

    <label id="type" for="type" class="">Type</label>
    <select class="" id="Type" name="type">
        <option id="a" value="A">Type A</option>
        <option id="b" value="B">Type B</option>
        <option id="c" value="C">Type C</option>
        <option id="d" value="C">Type D</option>
        <option id="e" value="C">Type E</option>
    </select>

        <label for="type_number" class="inner_text">Type Number</label>
        <input name="type_number" type="text" class="false" id="type_number">
        <input type="submit" value="Confirm">
</form>

我需要做的是验证类型编号。类型编号必须以我选择的编号开头。例如:

A - 1234

B型 - 2234

C - 3234

D型 - 4234

E型 - 5234

因此,类型A必须以1开头,B类型必须以2开头,依此类推。我只需要检查第一个数字。

我必须提一下,我在这里有一个类似的问题:Redirect to 3 pages depending of selected option with validation,它不是一回事,但是很相似,我也没有在那里得到一个好的答案来解决这个问题

我赞成任何和所有评论,谢谢。

P.S。请原谅我的英语。

2 个答案:

答案 0 :(得分:1)

检查以下代码,这将对您有所帮助。

网页代码

  <form accept-charset="UTF-8" action="verify.php" id="form" method="post">
 <label id="type" for="type" class="">Type</label>
 <select class="" id="Type" name="type">
 <option id="a" value="1">Type A</option>
 <option id="b" value="2">Type B</option>
 <option id="c" value="3">Type C</option>
 <option id="d" value="4">Type D</option>
 <option id="e" value="5">Type E</option>
 </select>
 <label for="type_number" class="inner_text">Type Number</label>
 <input name="type_number" type="text" class="false" id="type_number">
 <input type="button" id="Confirm" value="Confirm" >
 </form>

<强>脚本

 document.getElementById('Confirm').onclick = function () {

    var letter =document.getElementById("type_number").value.match(document.getElementById("Type").value);
    if (letter !== null) {
        letter = letter[0].toLowerCase();
        this.value = letter + this.value.substring(1);
    }
    else {
    alert('Number is not correct!');
    }
  }

答案 1 :(得分:1)

你可以这样做。

var startNumbers = {'A': 1, 'B': 2, 'C': 3, 'D': 4, 'E': 5};

function validate() {
   // get type
   var type = document.getElementById('type').value;

   // get number
   var number = document.getElementById('number').value;

   // get first digit
   while (number > 0) {
      nr = number;
      number = Math.floor(number / 10);
   }

   // validate
   if (nr != startNumbers[type])
      return false;
   else
      return true;
}

在您需要时调用验证(onkeyup,提交,等等)。

注意......此脚本直接写为答案,因此可能需要进行一些调整。