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

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

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

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

★效果图如下

→ NO : 提交按钮

→ OFF :清空输入框内容

★CSS

1.  
   <style>
2.  
   ul li{
3.  
   list-style-type: none;
4.  
   height: 50px;
5.  
   }
6.  
   form ul:last-child input{
7.  
   background-image: -webkit-linear-gradient(darksalmon,#527590);
8.  
   -webkit-background-clip: text;
9.  
   -webkit-text-fill-color: transparent;
10.  
    border: none;
11.  
    }
12.  
    form ul:first-child input{
13.  
    background-image: -webkit-linear-gradient(darksalmon,#527590);
14.  
    -webkit-background-clip: text;
15.  
    -webkit-text-fill-color: transparent;
16.  
    border-radius: 10px;
17.  
    border: 1px #527590 solid;
18.  
    }
19.  
    span{
20.  
    background-image: -webkit-linear-gradient(darksalmon,#527590);
21.  
    -webkit-background-clip: text;
22.  
    -webkit-text-fill-color: transparent;
23.  
    font-size: 13px;
24.  
    }
25.  
    </style>

★HTML

1.  
   <form>
2.  
   <ul class="ul_one">
3.  
   <li>
4.  
   <input type="text" placeholder="邮箱校验" id="first">
5.  
   <span id="checkfirst"> </span>
6.  
   </li>
7.  
   <li>
8.  
   <input type="text" placeholder="手机号校验" id="second">
9.  
   <span id="checksecond"> </span>
10.  
    </li>
11.  
    <li>
12.  
    <input type="text" placeholder="身份证号校验" id="third">
13.  
    <span id="checkthird"> </span>
14.  
    </li>
15.  
    </ul>
16.  
    <ul>
17.  
    <li>
18.  
    <input type="submit" value="NO">
19.  
    </li>
20.  
    <li>
21.  
    <input type="button" value="OFF" id="OFF">
22.  
    </li>
23.  
    </ul>
24.  
    </form>

★jQurey

1.  
   <script>
2.  
   $(function () {
3.  
   $("#first").blur(checkfirst);
4.  
   $("#second").blur(checksecond);
5.  
   $("#third").blur(checkthird);
6.  
   $('#OFF').click(function () {
7.  
   $('.ul_one input').val("")
8.  
   })
9.  
   $("form").submit(function () {
10.  
    let flag = true;
11.  
    if (!checkfirst()){
12.  
    flag = false;
13.  
    }
14.  
    if (!checksecond()){
15.  
    flag = false;
16.  
    }
17.  
    if (!checkthird()){
18.  
    flag = false;
19.  
    }return flag;
20.  
    });
21.  
    function checkfirst() {
22.  
    let first = $("#first");
23.  
    let checkfirst = $("#checkfirst");
24.  
    let one =/^[a-zA-Z0-9_-] @[a-zA-Z0-9_-] (\.[a-zA-Z0-9_-] ) $/;
25.  
    checkfirst.html("");
26.  
    if (first.val() === ""){checkfirst.html("非空");
27.  
    return false;
28.  
    }
29.  
    if (one.test(first.val()) === false){
30.  
    checkfirst.html("邮箱格式错误");
31.  
    return false;
32.  
    }
33.  
    return true;
34.  
    }
35.  
    function checksecond() {
36.  
    let second = $("#second");
37.  
    let checksecond = $("#checksecond");
38.  
    checksecond.html("");
39.  
    let two = /^1\d{10}$/;
40.  
    if (second.val() === ""){
41.  
    checksecond.html("非空");
42.  
    return false;
43.  
    }
44.  
    if (two.test(second.val()) === false){
45.  
    checksecond.html("手机号格式错误");
46.  
    return false;
47.  
    }
48.  
    return true;
49.  
    }
50.  
    function checkthird(){
51.  
    let third = $("#third");
52.  
    let checkthird = $("#checkthird");
53.  
    let three =/^\d{18}$/;
54.  
    checkthird.html("");
55.  
    if (third.val() === ""){
56.  
    checkthird.html("非空");
57.  
    return false;
58.  
    }
59.  
    if (three.test(third.val()) === false){
60.  
    checkthird.html("身份证号格式错误");
61.  
    return false;
62.  
    }
63.  
    return true;
64.  
    }
65.  
    })
66.  
    </script>

 Ps : 不要忘记引入jQuery

这篇好文章是转载于：学新通技术网