天天看点

表单验证(输入完成,手机号,金额)

基础函数

  • 金额验证
// 正小数,小数点后两位,数值最前不能有0。
//'(\.[0-9]{1,2})?$)'修改其中的'2',可以改变小数点后位数的验证
var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
var money = "520.100";
console.log(reg.test(money));//true
//000 错
//0 对
//0. 错
//0.0 对
//050 错
//00050.12错
//70.1 对
//70.11 对
//70.111错
//500 正确
           
  • 金额数值保留两位小数,一位自动补零
//round() 方法可把一个数字舍入为最接近的整数:
//parseFloat() 函数可解析一个字符串,并返回一个浮点数。
   function returnFloat(value) {
       var value = Math.round(parseFloat(value) * ) / ;//舍入为小数点后两位
       var xsd = value.toString().split(".");//分割成数组
       //小数点后没有值,就添加'.00'
       if (xsd.length == ) {
           value = value.toString() + ".00";
           return value;
       }
       //小数点后只有1位,就添加'0'
       if (xsd.length > ) {
           if (xsd[].length < ) {
               value = value.toString() + "0";
           }
           return value;
       }
   }
           
  • 手机号码验证
//验证phoneNum,正确返回true,错误返回false
function checkMobile(phoneNum) {
   var reg_phone = /^[1][0-9][0-9]{9}$/;
    var regPhone = new RegExp(reg_phone);
    if (regPhone.test(phoneNum)) {
        return true;
    } else {
        return false;
    }
}
           
  • 发送验证码,倒计时
/*发送验证码倒计时*/
var countdown = ;//倒计时为60秒
function settime(obj) {//obj为获取验证码按钮
    if (countdown == ) {//如果倒计时为0,重置倒计时为60秒,恢复按钮功能和文字
        // obj.attr('disabled',false);
        obj.removeAttr("disabled").removeClass('weui-btn_disabled').text("获取验证码");
        countdown = ;
        return;
    } else {//如果倒计时不为0,禁用按钮,显示倒计时,倒计时自减1
        obj.attr('disabled', true).addClass('weui-btn_disabled').text("重新发送(" + countdown + ")");
        countdown--;
    }
    // 每1000毫秒执行一次settime(obj)
    setTimeout(function () {
        settime(obj);
    }, );
}
$(".js-btn-get-code").on('click', function () {
    var $btn = $(this);
    var tel_val=$("#mobile").val();
    if(checkMobile(tel_val)===true){
        settime($btn);
    }
});
           

判断输入完成

  • 每次输入都进行判断,(可用于验证成功时,执行其他函数,比如给成功提示,或者改变状态)
因为正则的关系且是每次输入完成就验证,导致输入到小数点’.’的时候就会报错。(解决办法是修改正则,可惜本人正则方面的知识很捉急)
//.bind('input propertychange',function(){//do something})//每次输入完成后执行do something
$("#moneyCustom").bind('input propertychange', function () {
        var moneyCustom = $(this).val();
        var moneyCustom_end = returnFloat(moneyCustom);
        console.log(moneyCustom);
        if (moneyCustom) {
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!reg.test(moneyCustom)) {
                $.alert({
                    title: '提示信息',
                    text: '赞赏金额的输入格式不正确,请确认!'
                });
                $(this).val("");
                $("#moneyTotal").val("0.00");
                changeNum();
                return;
            }
            $("#moneyTotal").val(moneyCustom_end);
            //金额的正则表达式验证
        } else {
            $("#moneyTotal").val("0.00");
        }
        $(".js-reward-list").find("li.active").removeClass("active").end().find(".iconfont").remove();
        changeNum();
    });
           
  • 输入后延迟一段时间进行验证
假设用户输入完成后,一段时间没操作,就判断为输入完成
var queue;
   $("#moneyCustom").on('keyup', function (e) {
       var $this=$(this);
       clearTimeout(queue);
       //键盘输入离开后,1000毫秒后执行
       queue = setTimeout(function () {
           var moneyCustom = $this.val();
           var moneyCustom_end = returnFloat(moneyCustom);
           console.log(moneyCustom);
           if (moneyCustom) {
               var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
               //金额的正则表达式验证
               if (!reg.test(moneyCustom)) {
                   $.alert({
                       title: '提示信息',
                       text: '打赏金额只能保留小数点后两位哦~'
                   });
                   $this.val("");
                   $("#moneyTotal").val("0.00");
                   changeNum();
                   return;
               }
               $("#moneyTotal").val(moneyCustom_end);

           } else {
               $("#moneyTotal").val("0.00");
           }
           $(".js-reward-list").find("li.active").removeClass("active").end().find(".iconfont").remove();
           changeNum();
       }, );
   });