美文网首页
input框各种验证

input框各种验证

作者: 我是隔壁老陈 | 来源:发表于2019-01-02 12:00 被阅读0次

一、 数字部分

1. 验证只能输入两位小数

<input type="text" class="layui-input" 
                            id="aaa" name="aaa"
                            autocomplete="off" onkeyup="clearNoNum(this)" onblur="clearNoNum(this)"/>
//限制输入两位小数
        function clearNoNum(obj){
            //先把非数字的都替换掉,除了数字和.
            obj.value = obj.value.replace(/[^\d.]/g,"");
            //保证只有出现一个.而没有多个.
            obj.value = obj.value.replace(/\.{2,}/g,".");
            //必须保证第一个为数字而不是.
            obj.value = obj.value.replace(/^\./g,"");
            //保证.只出现一次,而不能出现两次以上
            obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
            //只能输入两个小数
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
        }

//保留两位小数
        $(".two-decimal").on("input",function(e){
            e.target.value = e.target.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
            e.target.value = e.target.value.replace(/^\./g,""); //验证第一个字符是数字而不是.
            e.target.value = e.target.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的.
                e.target.value = e.target.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只允许输入一个小数点
            e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        });

2. 验证只能输入数字

//限制只能输入数字
onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"

二、 邮箱验证

<input type="text" name="abc" id="abc">
<input type="button" value="验证" onclick="check();">
function check(){
            var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
              var obj = document.getElementById("abc"); //要验证的对象
              if(obj.value.trim() === ""){ //输入不能为空
                alert("输入不能为空!");
                return false;
              }else if(!reg.test(obj.value.trim())){ //正则验证不通过,格式不对
                alert("验证不通过!");
                return false;
              }else{
                alert("通过!");
                return true;
              }
        }

三、 电话号码验证

<input type="tel" placeholder="请输入您注册的手机号!" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')">
function check(){
            //固定电话
            var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
            //手机号码
            var isMob=/^1(3|4|5|6|7|8|9)\d{9}$/;
            var obj = document.getElementById("abc"); //要验证的对象
          if(obj.value.trim() === ""){ //输入不能为空
            alert("输入不能为空!");
            return false;
          }else if(!isMob.test(obj.value.trim())){ //正则验证不通过,格式不对
            alert("验证不通过!");
            return false;
          }else{
            alert("通过!");
            return true;
          }
}

感谢读到这里的朋友。祝大家2019年新年快乐。
以上

相关文章

网友评论

      本文标题:input框各种验证

      本文链接:https://www.haomeiwen.com/subject/kncocqtx.html