Question

html判断输入框是否为空

Answer 1

• 新建一个 html页面，命名为test.html，用于讲解js怎么判断输入框输入的内容全部为空或空格。

  

  请点击输入图片描述

• 在test.html页面，使用input标签创建一个输入框，用于内容的输入，并设置其id属性为name，方便下面通过id来获得该对象。

  

  请点击输入图片描述

• 在test.html页面，使用button标签创建一个按钮，并给按钮绑定onclick点击事件，当按钮点击时，执行isNull()函数。

  

  请点击输入图片描述

• 在isNull（）函数内，使用document.getElementById()方法通过id来获得input对象，并通过value属性来获得input输入框的内容。

  

  请点击输入图片描述

• 在isNull（）函数内，通过if来判断输入框的内容是否为空，如果为空，则弹出“输入内容为空”的提示信息。

  

  请点击输入图片描述

• 编写判断空格的正则表达式"^[ ]+$"，通过test（）方法利用正则表达式来判断输入框输入内容是否为空格，如果为空格，则提示“输入内容为空格”。

  

  请点击输入图片描述

• 在浏览器打开test.html文件，当输入框不输入内容时，点击按钮，弹出“输入内容为空”的提示信息，当输入框输入空格时，点击按钮，弹出“输入内容为空格”的信息提示。成功实现了输入框输入内容为空或空格的判断。

  

  请点击输入图片描述

  

  请点击输入图片描述