常用的JS表单验证

Posted 2020-12-22 杵臼

1. 验证只能是数字

<input type="number" onblur="checkNumber(this.value)" placeholder="请输入数字！" />
<script type="text/javascript" charset="utf-8">
    //验证只能是数字 
    function checkNumber(obj) {
        var reg = /^[0-9]+$/;
        if (obj != "" && !reg.test(obj)) {
            alert(‘只能输入数字！‘);
            return false;
        }
    }
</script>

 

2. 验证只能是字母

<input type="text" onblur="checkZm(this.value)" placeholder="请输入字母！" />
<script type="text/javascript" charset="utf-8">
    //验证只能是字母
    function checkZm(zm) {
        var reg = /^[a-zA-Z]*$/;
        if (zm != "" && !reg.test(zm)) {
            alert("只能是英文字母！");
            return false;
        }
    }
</script>

 

3. 验证只能是中文

<input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" />
<script type="text/javascript" charset="utf-8">
    function isChinese(obj) {
        //验证只能是中文
        var reg = /^[u0391-uFFE5]+$/;
        if (obj != "" && !reg.test(obj)) {
            alert(‘必须输入中文！‘);
            return false;
        }
    }
</script>

 

4. 验证只能是字母和数字

<input type="text" onblur="checkZmOrNum(this.value)" placeholder="请输入字母或者数字！" />
<script type="text/javascript" charset="utf-8">
    //验证只能是字母和数字 
    function checkZmOrNum(zmnum) {
        var zmnumReg = /^[0-9a-zA-Z]*$/;
        if (zmnum != "" && !zmnumReg.test(zmnum)) {
            alert("只能输入是字母或者数字,请重新输入");
            return false;
        }
    }
</script>

 

5. 邮箱验证

<input type="text" onblur="test(this.value)" placeholder="请输入电子邮件！" />
<script type="text/javascript" charset="utf-8">
    //对电子邮件的验证
    function test(obj) {
        var myreg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
        if (!myreg.test(obj)) {
            alert(‘请输入有效的邮箱！‘);
            return false;
        }
    }
</script>

 

6. 手机号验证

<input type="text" onblur="validatemobile(this.value)" placeholder="请输入手机号码！" maxlength="11" />
<script type="text/javascript" charset="utf-8">
    //对手机号码的验证
    function validatemobile(mobile) {
        if (mobile.length == 0) {
            alert(‘手机号码不能为空！‘);
            return false;
        }
        if (mobile.length != 11) {
            alert(‘请输入有效的手机号码，需是11位！‘);
            return false;
        }

        var phone = /^1[3456789]d{9}$/;
        if (!phone.test(mobile)) {
            alert(‘请输入有效的手机号码！‘);
            return false;
        }
    }
</script>

 

7. 身份证号码验证

<input value="11010119900101100X" type="text" onblur="valiIdCard(this.value)" placeholder="请输入身份证号码！" maxlength="18" />
<script type="text/javascript" charset="utf-8">
    // 构造函数，变量为15位或者18位的身份证号码
    function clsIDCard(CardNo) {
        this.Valid = false;
        this.ID15 = ‘‘;
        this.ID18 = ‘‘;
        this.Local = ‘‘;
        if (CardNo != null) this.SetCardNo(CardNo);
    }

    // 设置身份证号码，15位或者18位
    clsIDCard.prototype.SetCardNo = function(CardNo) {
        this.ID15 = ‘‘;
        this.ID18 = ‘‘;
        this.Local = ‘‘;
        CardNo = CardNo.replace(" ", "");
        var strCardNo;
        if (CardNo.length == 18) {
            pattern = /^d{17}(d|x|X)$/;
            if (pattern.exec(CardNo) == null) return;
            strCardNo = CardNo.toUpperCase();
        } else {
            pattern = /^d{15}$/;
            if (pattern.exec(CardNo) == null) return;
            strCardNo = CardNo.substr(0, 6) + ‘19‘ + CardNo.substr(6, 9)
            strCardNo += this.GetVCode(strCardNo);
        }
        this.Valid = this.CheckValid(strCardNo);
    }

    // 校验身份证有效性
    clsIDCard.prototype.IsValid = function() {
        return this.Valid;
    }

    // 返回生日字符串，格式如下，1981-10-10
    clsIDCard.prototype.GetBirthDate = function() {
        var BirthDate = ‘‘;
        if (this.Valid) BirthDate = this.GetBirthYear() + ‘-‘ + this.GetBirthMonth() + ‘-‘ + this.GetBirthDay();
        return BirthDate;
    }

    // 返回生日中的年，格式如下，1981
    clsIDCard.prototype.GetBirthYear = function() {
        var BirthYear = ‘‘;
        if (this.Valid) BirthYear = this.ID18.substr(6, 4);
        return BirthYear;
    }

    // 返回生日中的月，格式如下，10
    clsIDCard.prototype.GetBirthMonth = function() {
        var BirthMonth = ‘‘;
        if (this.Valid) BirthMonth = this.ID18.substr(10, 2);
        if (BirthMonth.charAt(0) == ‘0‘) BirthMonth = BirthMonth.charAt(1);
        return BirthMonth;
    }

    // 返回生日中的日，格式如下，10
    clsIDCard.prototype.GetBirthDay = function() {
        var BirthDay = ‘‘;
        if (this.Valid) BirthDay = this.ID18.substr(12, 2);
        return BirthDay;
    }

    // 返回性别，1：男，0：女
    clsIDCard.prototype.GetSex = function() {
        var Sex = ‘‘;
        if (this.Valid) Sex = this.ID18.charAt(16) % 2;
        
        return Sex;
    }

    // 返回15位身份证号码
    clsIDCard.prototype.Get15 = function() {
        var ID15 = ‘‘;
        if (this.Valid) ID15 = this.ID15;
        return ID15;
    }

    // 返回18位身份证号码
    clsIDCard.prototype.Get18 = function() {
        var ID18 = ‘‘;
        if (this.Valid) ID18 = this.ID18;
        return ID18;
    }

    // 返回所在省，例如：上海市、浙江省
    clsIDCard.prototype.GetLocal = function() {
        var Local = ‘‘;
        if (this.Valid) Local = this.Local;
        return Local;
    }

    clsIDCard.prototype.GetVCode = function(CardNo17) {
        var Wi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
        var Ai = new Array(‘1‘, ‘0‘, ‘X‘, ‘9‘, ‘8‘, ‘7‘, ‘6‘, ‘5‘, ‘4‘, ‘3‘, ‘2‘);
        var cardNoSum = 0;
        for (var i = 0; i < CardNo17.length; i++) cardNoSum += CardNo17.charAt(i) * Wi[i];
        var seq = cardNoSum % 11;
        return Ai[seq];
    }

    clsIDCard.prototype.CheckValid = function(CardNo18) {
        if (this.GetVCode(CardNo18.substr(0, 17)) != CardNo18.charAt(17)) return false;
        if (!this.IsDate(CardNo18.substr(6, 8))) return false;
        var aCity = {
            11: "北京",
            12: "天津",
            13: "河北",
            14: "山西",
            15: "内蒙古",
            21: "辽宁",
            22: "吉林",
            23: "黑龙江",
            31: "上海",
            32: "江苏",
            33: "浙江",
            34: "安徽",
            35: "福建",
            36: "江西",
            37: "山东",
            41: "河南",
            42: "湖北",
            43: "湖南",
            44: "广东",
            45: "广西",
            46: "海南",
            50: "重庆",
            51: "四川",
            52: "贵州",
            53: "云南",
            54: "西藏",
            61: "陕西",
            62: "甘肃",
            63: "青海",
            64: "宁夏",
            65: "新疆",
            71: "台湾",
            81: "香港",
            82: "澳门",
            91: "国外"
        };
        if (aCity[parseInt(CardNo18.substr(0, 2))] == null) return false;
        this.ID18 = CardNo18;
        this.ID15 = CardNo18.substr(0, 6) + CardNo18.substr(8, 9);
        this.Local = aCity[parseInt(CardNo18.substr(0, 2))];
        return true;
    }

    clsIDCard.prototype.IsDate = function(strDate) {
        var r = strDate.match(/^(d{1,4})(d{1,2})(d{1,2})$/);
        if (r == null) return false;
        var d = new Date(r[1], r[2] - 1, r[3]);
        return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[2] && d.getDate() == r[3]);
    }


    function valiIdCard(idCard) {
        var checkFlag = new clsIDCard(idCard);
        if (!checkFlag.IsValid()) {
            alert("输入的身份证号无效,请输入真实的身份证号！");
            // document.getElementByIdx("idCard").focus();
            return false;
        } else {
            alert("是有效身份证！");
            console.log(checkFlag);
            console.log(typeof(checkFlag));
        }
    }
</script>

 

8. 两次输入密码是否相同

<form onsubmit="return check()">
    <input type="text" name="input1" value="input1"/>
    <input type="text" name="input2" value="input2"/>
    <input type="submit" name="Submit" value="提交">
</form>
<script type="text/javascript" charset="utf-8">
    function check() {
        with(document.all) {
            if (input1.value != input2.value) {
                alert("密码不一致")
                input1.value = "";
                input2.value = "";
            } else {
                alert("密码一致");
                document.forms[0].submit();
            }
        }
    }
</script>