js手机端简单实现表单验证

先上一个写好的toast函数

//提示框插件
//str（提示的字符串）
//msec（提示框消失的时间，默认3秒）
//noMask（是否去除遮罩）
function alerts(str, msec, noMask) {
    var oMask = document.createElement('div');
    var oWrap = document.createElement('div');
    var msec = msec || 3000;

    oMask.style.cssText = 'width:100%;height:100%;position:fixed;left:0;top:0;z-index:99999;';
    oWrap.style.cssText = 'box-sizing:border-box;min-width:140px;max-width:100%;padding:0 20px;height:50px;line-height:50px;text-align:center;border-radius:5px;background:rgba(0,0,0,0.6);color:#fff;font-size:14px;position:fixed;top:50%;left:50%;z-index:99999;transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,0,0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity 3s ease-in 0s;-webkit-transition:opacity 3s ease-in 0s;opacity:1;';
    oWrap.innerHTML = str;
    oWrap.style.transitionDuration = (msec / 1000 / 2) + 's';

    if (!noMask) {
        oMask.appendChild(oWrap);
        document.body.appendChild(oMask);
    } else {
        document.body.appendChild(oWrap);
    }

    setTimeout(function () {
        oWrap.style.opacity = 0;
    }, msec / 2);

    setTimeout(function () {
        if (!noMask) {
            document.body.removeChild(oMask);
        } else {
            document.body.removeChild(oWrap);
        }
    }, msec);
}

下面是我积累的一些正则，可以配合和表单验证一起使用，先上代码再说明用法

//所有积累正则
//reg（验证正则）
//iReg（输入正则）
//tReg（替换正则）
var regJson = {
    int: {
        name: '整型',
        reg: /^[0-9]+$/,
        iReg: /^[0-9]*$/,
        tReg: /[0-9]+/g,
    },
    number: {
        name: '数字',
        reg: /^[0-9]+\.?[0-9]*$/,
        iReg: /^[0-9]*\.?[0-9]*$/,
        tReg: /[0-9\.]+/g,
    },
    aa: {
        name: '小写字母',
        reg: /^[a-z]+$/,
        iReg: /^[a-z]*$/,
        tReg: /[a-z]+/g,
    },
    AA: {
        nmae: '大写字母',
        reg: /^[A-Z]+$/,
        iReg: /^[A-Z]*$/,
        tReg: /[A-Z]+/g,
    },
    aA: {
        name: '字母',
        reg: /^[a-zA-Z]+$/,
        iReg: /^[a-zA-Z]*$/,
        tReg: /[a-zA-Z]+/g,
    },
    aa1: {
        name: '小写字母或数字',
        reg: /^[a-z0-9]+$/,
        iReg: /^[a-z0-9]*$/,
        tReg: /[a-z0-9]+/g,
    },
    AA1: {
        name: '大写字母或数字',
        reg: /^[A-Z0-9]+$/,
        iReg: /^[A-Z0-9]*$/,
        tReg: /[A-Z0-9]+/g,
    },
    aA1: {
        name: '字母和数字',
        reg: /^\w+$/,
        iReg: /^\w*$/,
        tReg: /\w+/g,
    },
    zh: {
        name: '中文',
        reg: /^[\u2E80-\u9FFF]+$/,
        iReg: /^[\u2E80-\u9FFF]*$/,
        tReg: /[\u2E80-\u9FFF]+/g,
    },
    zhEn: {
        name: '中文或英文',
        reg: /^[\u2E80-\u9FFFa-zA-Z]+$/,
        iReg: /^[\u2E80-\u9FFFa-zA-Z]*$/,
        tReg: /[\u2E80-\u9FFFa-zA-Z]+/g,
    },
    mobile: {
        name: '手机号',
        reg: /^1[3-9]{1}\d{9}$/,
        iReg: /^[0-9]{0,11}$/,
        tReg: /[0-9]+/g,
    },
    identity: {
        name: '身份证号码',
        reg: /^[1-8]\d{5}[1-9]\d{3}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/,
        iReg: /^[\dxX]{0,18}$/,
        tReg: /[\dxX]+/g,
    },
    bankCard: {
        name: '银行卡号',
        reg: /^[0-9]{8,28}$/,
        iReg: /^[0-9]{0,28}$/,
        tReg: /[0-9]+/g,
    },
    user: {
        name: '用户名',
        reg: /^[\w-]{3,16}$/,
        iReg: /^[\w-]{0,16}$/,
        tReg: /[\w-]+/g,
    },
    password: {
        name: '密码',
        reg: /^[^\u2E80-\u9FFF\s]{6,20}$/,
        iReg: /^[^\u2E80-\u9FFF\s]{0,20}$/,
        tReg: /[^\u2E80-\u9FFF\s]+/g,
    },
    email: {
        name: '邮箱',
        reg: /^([\w\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
        iReg: /^([\w\.-]*)@([\da-z\.-]*)\.([a-z\.]{0,6})$/,
        tReg: /[\w\.-@]+/g,
    },
    verifyCode: {
        name: '6位数字验证码',
        reg: /^[0-9]{6}$/,
        iReg: /^[0-9]{0,6}$/,
        tReg: /[0-9]+/g,
    },
};

//提示框带多条件阻止
//优先级reg>type>if（校验类型只生效一个）
//arr[{if:'','reg':/^$/,type:'number','value':,'hint':''}]
//if（提示触发的条件）
//reg（正则匹配）
//type（已定义类型正则匹配）
//value（正则验证的值）
//hint（提示的字符串）
//endFn（全部验证通过后才走的回调函数）
//errorFn（参数中返回错误条件的索引）
//msec（提示框消失的时间，默认3秒）
function alertss(arr, endFn, errorFn, msec) {
    var onOff = true;
    var errorIndex = -1;

    for (var i = 0; i < arr.length; i++) {
        var condition = !('if' in arr[i]) || arr[i].if;

        if (arr[i].reg) {
            if (condition && !arr[i].reg.test(arr[i].value)) {
                alerts(arr[i].hint, msec);
                onOff = false;
                errorIndex = i;
                break;
            }
        } else if (arr[i].type) {
            if (condition && regJson[arr[i].type] && !regJson[arr[i].type].reg.test(arr[i].value)) {
                alerts(arr[i].hint || '请输入有效的' + regJson[arr[i].type].name, msec);
                onOff = false;
                errorIndex = i;
                break;
            }
        } else if (arr[i].if) {
            alerts(arr[i].hint, msec);
            onOff = false;
            errorIndex = i;
            break;
        }
    }

    errorFn && errorFn(errorIndex);
    onOff && endFn && endFn();
}

先引入上面所有函数

1、普通用法

var arr=[{if:true,hint:'普通用法'}];

alertss(arr,function(){
  //通过验证执行该函数
});

2、使用已有正则

var arr=[{type:'mobile',value:123456,hint:'手机号校验失败'}];

alertss(arr,function(){
  //通过验证执行该函数
});

3、自定义正则

var arr=[{reg:/^[a-z]+$/,value:123456,hint:'自定义正则校验失败'}];

alertss(arr,function(){
  //通过验证执行该函数
});

4、可以自己扩展已有正则，就可以使用type方便校验了