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>

//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>
    

你可能感兴趣的:(javascript学习日记,javascript,开发语言,ecmascript)