• javascript验证表单字段有效性,使用checkValidity()方法和他的属性


     <script type="text/javascript">
          function LoginCheckValidity()
          {
            var txt="";
            var rmb1=document.getElementById("rmb1");
            if(rmb1.checkValidity()==false)
            {
              if(rmb1.validitionMessage==undefined)
              {
                txt="输入金额有误,金额10-200之间";
              }
            }else
            {
              txt="转账成功!";
            }
    
            document.getElementById("rmb1msg").innerHTML=txt;
            
    		//setCustomValidity()为自定义信息
            var rmb2=document.getElementById("rmb2");
            rmb2.setCustomValidity("");
            if(rmb2.value==null || rmb2.value=="")
            {
              rmb2.setCustomValidity("请输入金额!");
            }else if(rmb2.validity.rangeUnderflow)
            {
              rmb2.setCustomValidity("金额不小于10元");
            }else if(rmb2.validity.rangeOverflow)
            {
              rmb2.setCustomValidity("金额不大于200万");
            }else 
            {
              rmb2.setCustomValidity("转账成功!");
            }
            document.getElementById("rmb2msg").innerHTML=rmb2.validationMessage;
            rmb2=null;
            rmb1=null;
          }
    
          var input=document.getElementsByName("submit1")[0];
          EventUtil.addHandler(input,"click",LoginCheckValidity);
          input=null;
          
        </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    //html部分

    <div style="width:500px">
            <div style="width:250px;height:30px;line-height:30px;float:left;background:green;text-align:right;">
                转账金额1:<input id="rmb1" type="number"  min="10" max="200" name="rmb1" required="" size="20"/>
            div>
            <div style="width:250px;height:30px;line-height:1px;float:left;background:black;color:red;">
                <p id="rmb1msg">p>
            div>
        div>
        <div style="clear:both;">div>
        <div style="width:500px;margin-top:10px;">
            <div style="width:250px;height:30px;line-height:30px;float:left;background:green;text-align:right;">
                转账金额2:<input id="rmb2" type="number"  min="10" max="200" name="rmb2" required="" size="20"/>
            div>
            <div style="width:250px;height:30px;line-height:1px;float:left;background:black;color:red;">
                <p id="rmb2msg">p>
            div>
        div>
        <div style="clear:both;">div>
        <div style="float:left;margin-top:10px;"><input type="submit" name="submit1" value="验证" />div>
        
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
  • 相关阅读:
    [EIS 2019]EzPOP
    C++教程笔记链接推荐
    C++:函数指针进阶二:指向对象成员函数的指针
    [云原生] Prometheus理论知识及系统搭建
    删除表中的数据
    MYSQL入门与进阶(十)
    python3.11教程2:基础数据类型(数字和字符串)、组合数据类型(集合、元组、列表、字典)
    通过python实现分析出生日期辨识你的星座 出生日期判断星座
    flutter开发实战 - inappwebview设置cookie
    Windows网络服务综测刷题
  • 原文地址:https://blog.csdn.net/cdcdhj/article/details/133442037