zoukankan      html  css  js  c++  java
  • 表单验证

    html文件//(这里只大致写一下用户名密码文本框,其他的文本框用到的函数都是一样)

      <form action="#" mothed="post">

          用户名:<input type="text" id="user"/></br>

          密码:<input type="password" id="pwd"/>

          <input type="submit" value="注册"/>

      </form>

    正常情况下我们需要点击注册按钮,这样表单就会收集所有表单内的信息,然后发送的后台与数据库进行比较,可是大多数情况下,用户更希望在输入信息的时候就可以出现提示文本,比如当用户名文本框获得输入焦点时,出现提示文本:必填,如果文本框内容为空时,红色警示字体提示:用户名不能为空;代码如下:

      <form action="#" mothed="post">

          input标签后加span标签,内部写红色警文本;

          警示文本及标签id都以参数的形式传递给函数

          用户名:<input type="text" id="user" onfocus="showAlert('user','用户名必填')"  onblur="hiddenAlert('user','用户名不能为空')"/><span id="userspan"></span></br>

          密码:<input type="password" id="pwd" onfocus="showAlert('pwd','密码必填')"  onblur="hiddenAlert('pwd','密码不能为空')"/><span id="pwdspan"></span></br>/>

          <input type="submit" value="注册"/>

      </form>

        onfocus="';当元素获得焦点时,也就是当这个文本框被选中输入内容时

        onblur="'   当元素失去焦点时,就是当文本框输入完成,切换到下一个文本框时

      <script>

        //当获得焦点时,显示红色 必填  文本

        function showAlert(id,info){

          document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; //获得id名为  变量id+span  的标签元素,并修改文本内容为传递过来的内容info

        }

        //当失去焦点时,先判断文本框的值是否为空,如果为空,显示文本   ***不能为空!;显示的文本及文本框的id都以参数的形式传递给函数

        function hiddenAlert(id,info){

          var txt=document.getElementByid(id).value;   //获取输入框的文本值,

          //判断文本框的值是否为空;如果为空,警示文本内容设置为参数值;否则,span文本设置为空,不显示警示文本;

          第一个文本框为例:hiddenAlert('user','用户名不能为空'

          if(txt==""){

            document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";

          }else{

            document.getElementById(id+"span").innerHTML="";//设置span标签内容为空

          }  

        }

      </script>

  • 相关阅读:
    201706120024 编译原理第一次作业
    P2014 选课 题解(树形DP)
    基础算法·二分答案
    P4285 [SHOI2008]汉诺塔 题解 (乱搞)
    2018.12-2019.1 TO-DO LIST
    记录一枚蒟蒻的成长(持续更新)
    P3796 【模板】AC自动机(加强版) 题解(Aho-Corasick Automation)
    BuaacodingT651 我知道你不知道圣诞节做什么 题解(逻辑)
    P2766 最长不下降子序列问题 题解(网络流)
    P2516 [HAOI2010]最长公共子序列 题解(LCS)
  • 原文地址:https://www.cnblogs.com/Zs-book1/p/10458423.html
Copyright © 2011-2022 走看看