【JavaScript】两种常见的验证提示的效果

最新推荐文章于 2022-02-19 22:15:37 发布

言曦

最新推荐文章于 2022-02-19 22:15:37 发布

阅读量180

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/wangke1998/article/details/122941166

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

innerHTML表示起始标签和结束标签中的内容。这个属性可读可写。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>



<script type="text/javascript">

   function onClickFun(){

  var username=document.getElementById("username");

  var usernameText=username.value;

  var patt=/^\w{5,12}$/;

  var spanObj=document.getElementById("span01");

  if (patt.test(usernameText)){

//alert("用户名合法！");

//spanObj.innerHTML="用户名合法"

spanObj.innerHTML="<img src=\"D:/java/Javaweb/img/right.png\" width=\"10\" height=\"10\">"//需要进行转译

  }else{

//alert("用户名不合法!");

//spanObj.innerHTML="用户名不合法"

spanObj.innerHTML="<img src=\"D:/java/Javaweb/img/wrong.png\" width=\"15\" height=\"15\">"//需要进行转译

  }

   }

   

</script>

</head>



<body>

      用户名:<input type="text" id="username">

      <span id="span01" style="color:red;">

      </span>

  <button onclick="onClickFun();">提交</button>



</body>

</html>