• 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
  • 相关阅读:
    Qwik开发使用入门
    salesforce零基础学习(一百二十)快去迁移你的代码中的 Alert / Confirm 以及 Prompt吧
    c 技巧 之 ungetc 函数 回退字符
    Weblogic各版本历史
    windows 环境 Redis 搭建 Sentinel( 哨兵模式集群 )
    nessus安装使用过程
    win11+WSL2安装visdom
    感受Vue (1) —— Hello world
    docker更新正在运行中的容器内存
    4.7拆解复杂问题-实现计算器
  • 原文地址:https://blog.csdn.net/cdcdhj/article/details/133442037