JavaScript表单验证与交互_js input表单验证

JavaScript是一种高级编程语言，可以用于编写交互式的网页，并与 HTML 和 CSS 一起创建完整的网站。在网页中通常需要进行表单验证和交互操作，以确保用户输入的数据符合特定的要求，并且能够与用户进行实时交互。本文将介绍使用JavaScript进行表单验证和交互的方法。

一、表单验证

表单验证是一种技术，可以检查用户输入数据的有效性和规范性。使用表单验证技术可以避免错误数据的输入，提高数据的准确性和完整性。

1.1.表单元素

在HTML中，表单是通过什么来定义的？表单元素，常见的表单元素有input,textarea,select等，其中input元素分别有text、password、email、number等不同的类型，可以通过type属性指定。

1.2.验证方法

在JavaScript中，可以使用以下方法对表单进行验证：

1、required 属性：在以下表单元素中，添加required属性可以设置该元素为必填项。

<input type="text" name="name" required>

 

2、pattern 属性：添加 pattern 属性，可以设置正则表达式来验证输入值。

例如，以下代码将验证用户输入是否为邮箱格式。

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>

 

3、JavaScript验证：可以使用JavaScript编写自定义验证函数，通过验证返回 true 或 false，来判断输入是否正确。

<script>
function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    if (name == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
<form name="myForm" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

 

在此，我们可以使用HTML属性 onsubmit 和 JavaScript 函数 validateForm() 来实现表单验证，当用户提交表单时，如果 validateForm() 函数返回为 false，则提交会被阻止。

4、 jQuery验证插件：除了自己编写验证方法外，还可以使用jQuery验证插件来验证表单。它是一种常用的JavaScript库，专门用于管理用户交互。

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.min.js"></script>

 

在头部引入jQuery和jQuery Validate这两个文件后，就可直接使用，以下是一个简单的例子。

<form id="myform">
  <label for="field">Required: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>
<script>
  $(document).ready(function() {
    $("#myform").validate({
      rules: {
        field: {
          required: true
        }
      },
      messages: {
        field: {
          required: "Please enter some data"
        }
      }
    });
  });
</script>

 

上面的代码中，使用了 jQuery Validate 插件来验证输入值，当用户不输入任何内容时，将显示错误消息“Please enter some data”。

1.3.实时验证

实时验证是一种技术，可以在用户输入数据时检查数据的有效性和规范性。这种技术可以减少用户输入错误数据的机会，并且可以让用户更快地发现错误。

以下是实现实时验证的方法：

1、onblur 事件：当用户把焦点移开表单输入框时，将触发 onblur 事件。可以使用该事件实现输入框实时验证。

<input type="text" name="name" onblur="myFunction()">

 

2、onkeyup 事件：当用户按下键盘时，将触发 onkeyup 事件。可以使用该事件实现实时验证，而不必等到用户移开焦点。

<input type="text" name="name" onkeyup="myFunction()">

 

3、jQuery validate 插件：上面已经提到过该插件。通过添加一些配置参数，可以实现快速而准确的实时验证。

<form id="myform">
  <label for="field">Required: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>
<script>
  $(document).ready(function() {
    $("#myform").validate({
      rules: {
        field: {
          required: true
        }
      },
      messages: {
        field: {
          required: "Please enter some data"
        }
      }
    });
  });
</script>

 

1.4.提示信息

提示信息可以帮助用户了解他们的输入是否正确，以及如何进行正确的输入。以下是实现提示信息的方法：

1、HTML 提示信息：在输入框中添加 placeholder 属性，可以在输入框中显示默认文本。

<input type="text" name="name" placeholder="Enter your name">

 

2、JavaScript 提示信息：在验证函数中添加 alert() 函数，可以弹出一个警告框来提示用户输入错误。

<script>
function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    if (name == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
<form name="myForm" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

 

3、jQuery 提示信息：使用jQuery Validate插件的 messages属性，可以设置提示信息。

<form id="myform">
  <label for="field">Required: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>
<script>
  $(document).ready(function() {
    $("#myform").validate({
      rules: {
        field: {
          required: true
        }
      },
      messages: {
        field: {
          required: "Please enter some data"
        }
      }
    });
  });
</script>

 

二、交互操作

JavaScript可以使网页实现动态效果，比如当用户点击按钮时，会有反应，当用户鼠标移到图片上时，图片会放大等。

2.1.按钮点击

在HTML中，按钮通常使用input或button元素定义，当用户点击按钮时，可以触发JavaScript函数，实现交互效果。

以下是一个例子：

<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
    alert("Hello World!");
}
</script>

 

当用户点击按钮时，将弹出一个警告框，显示“Hello World!”。

2.2.鼠标移动

可以使用JavaScript实现当用户将鼠标移到图片上时，图片放大的效果。

以下是实现方法：

<img src="image.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
<script>
function bigImg(x) {
    x.style.height = "64px";
    x.style.width = "64px";
}
function normalImg(x) {
    x.style.height = "32px";
    x.style.width = "32px";
}
</script>

 

这里使用了 mouseover 和 mouseout 事件来实现鼠标移动效果。当用户将鼠标移动到图片上时，将触发 bigImg() 函数，图片会变为64x64像素的大小。当用户将鼠标移开时，将触发 normalImg() 函数，图片恢复为32x32像素。

2.3.下拉菜单

下拉菜单是一个常见的页面元素，用户可以从菜单中选择选项。下拉菜单可以使用HTML select元素来定义。

以下是一个例子：

<select onchange="myFunction(this)">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<script>
function myFunction