jQuery表单正则校验(邮箱、手机号、身份证)

→邮箱校验需输入@.符号        例如:@Gmail.com

→手机号校验需开头以1开头的11位纯数字

→身份证校验需18位纯数字

★效果图如下

→ NO : 提交按钮

→ OFF :清空输入框内容

★CSS

<style>
    ul li{
        list-style-type: none;
        height: 50px;
    }
    form ul:last-child input{
        background-image: -webkit-linear-gradient(darksalmon,#527590);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border: none;
    }
    form ul:first-child input{
        background-image: -webkit-linear-gradient(darksalmon,#527590);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-radius: 10px;
        border: 1px #527590 solid;
    }
    span{
        background-image: -webkit-linear-gradient(darksalmon,#527590);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 13px;
    }
    </style>

★HTML

<form>
    <ul class="ul_one">
        <li>
            <input type="text" placeholder="邮箱校验" id="first"> 
            <span id="checkfirst"> </span>
        </li>
        <li>
            <input type="text" placeholder="手机号校验" id="second"> 
            <span id="checksecond"> </span>
        </li>
        <li>
            <input type="text" placeholder="身份证号校验" id="third">
            <span id="checkthird"> </span>
        </li>
    </ul>
    <ul>
        <li>
            <input type="submit" value="NO">
        </li>
        <li>
            <input type="button" value="OFF" id="OFF">
        </li>
    </ul>
</form>

★jQurey

<script>
    $(function () {
        $("#first").blur(checkfirst);
        $("#second").blur(checksecond);
        $("#third").blur(checkthird);
        $('#OFF').click(function () {
        $('.ul_one input').val("")
        })
        $("form").submit(function () {
            let flag = true;
            if (!checkfirst()){
                flag = false;
            }
            if (!checksecond()){
                flag = false;
            }
            if (!checkthird()){
                flag = false;
            }return flag;
        });
        function checkfirst() {
            let  first = $("#first");
            let checkfirst = $("#checkfirst");
            let one =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            checkfirst.html("");
            if (first.val() === ""){checkfirst.html("非空");
                return false;
            }
            if (one.test(first.val()) === false){
                checkfirst.html("邮箱格式错误");
                return false;
            }
            return true;
        }
        function checksecond() {
            let second = $("#second");
            let checksecond = $("#checksecond");
            checksecond.html("");
            let two = /^1\d{10}$/;
            if (second.val() === ""){
                checksecond.html("非空");
                return false;
            }
            if (two.test(second.val()) === false){
            checksecond.html("手机号格式错误");
            return false;
            }
            return true;
        }
        function checkthird(){
            let third = $("#third");
            let checkthird = $("#checkthird");
            let three =/^\d{18}$/;
            checkthird.html("");
            if (third.val() === ""){
            checkthird.html("非空");
            return false;
            }
            if (three.test(third.val()) === false){
                checkthird.html("身份证号格式错误");
            return false;
            }
            return true;
        }
    })
</script>

 Ps : 不要忘记引入jQuery