首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用getElementById在javascript中使用正则表达式验证Html表单?

使用getElementById在javascript中使用正则表达式验证Html表单?
EN

Stack Overflow用户
提问于 2018-06-17 02:33:50
回答 1查看 728关注 0票数 2

我想使用正则表达式为这个示例模式验证一个html表单:AAA.111#2222_aa-1234

目前,我的代码要么对所有输入返回“正确”,要么对所有输入返回“不正确”,我不知道问题出在哪里。

代码语言:javascript
复制
  var x = document.getElementById("myForm");

function regExp(courseNum) {
  var vCourse = /([A-Z]{3})\.(\d{3})#(\d{4})_([a-z]{2})-(\d{4})/;
  return (vCourse.test(courseNum));
}

function isValid() {
    if (regExp(x)) {
      document.getElementById("demo").innerHTML = "Correct Format";
    } else {
      document.getElementById("demo").innerHTML = "Incorrect Format";
    }
}
代码语言:javascript
复制
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>

<body>
  <h3>Please enter your course number below</h3>

<form id="myForm">
  Course: <input type="text" name="course" id="course"><br>
</form>
</br>
  <button onclick="isValid()">Validate</button>

<p id="demo"></p>

<script src="course.js"></script>

</body>
</html>

我正在学习一门javascript课程,还没有讲到很多javascript概念,所以我想用一下到目前为止我们已经讲过的知识。

这方面的任何帮助都是非常感谢的!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-17 02:42:21

你已经很接近了!只需要两个改变就可以让事情正常工作。首先,您要选择要获取值的表单。您希望选择输入,因此将"myForm"更改为"course"。第二件事是您需要获取输入的值。现在,您正在尝试验证DOM元素本身,但您应该验证输入元素的value属性。因此,将regExp(x)更改为regExp(x.value)

代码语言:javascript
复制
var x = document.getElementById("course"); // First Change

function regExp(courseNum) {
  var vCourse = /([A-Z]{3})\.(\d{3})#(\d{4})_([a-z]{2})-(\d{4})/;
  return (vCourse.test(courseNum));
}

function isValid() {
    if (regExp(x.value)) { // Second Change
      document.getElementById("demo").innerHTML = "Correct Format";
    } else {
      document.getElementById("demo").innerHTML = "Incorrect Format";
    }
}
代码语言:javascript
复制
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>

<body>
  <h3>Please enter your course number below</h3>

<form id="myForm">
  Course: <input type="text" name="course" id="course"><br>
</form>
</br>
  <button onclick="isValid()">Validate</button>

<p id="demo"></p>

<script src="course.js"></script>

</body>
</html>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50890663

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档