PROMULGATOR

    重故余温

    广东省广州市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
<form action="" autocomplete="off">
    <input type="text" name="" id="phone" placeholder="手机号"><img src="" alt=""><br>
    <p id="phoneP">请填写正确的手机号码</p><br>
    <input type="text" name="" id="yzm" placeholder="请输入短信验证码" maxlength="6"><br>
    <p id="yzmP">请填写手机验证码，不区分大小写</p>
    <button id="btn">获取验证码</button>
</form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body {
    margin:0;
    padding:0;
    font-size:16px;
}
form {
    margin:0 auto;
    width:305px;
    transition:all 1s ease-out 0s;
}
input {
    font-size:16px;
    height:25px;
    width:280px;
    margin-top:40px;
    color:#333;
    outline:none;
    border-radius:5px;
    border:1px solid #ccc;
}
input:focus {
    border:1px solid #09f;
}
p {
    display:inline-block;
    font-size:12px;
    color:#ccc;
    margin:0;
    margin-right:6px;
}
img {
    height:20px;
    position:relative;
    top:3px;
}
.f {
    border:1px solid #fa290d;
}
.r {
    border:1px solid #04f014;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var phone = document.querySelector('#phone');
var btn = document.getElementById('btn');
var phoneP = document.querySelector('#phoneP');
var yzmP = document.querySelector('#yzmP');
var ph;
phone.onmouseover = function() {
    phoneP.style.color = "#000";
    this.nextSibling.src = ''; 
} 
phone.onblur = function() { //手机号判断
    var reg = /^1[3|4|5|7|8]\d{9}$/;
    function z(re, e) { //封装函数判断传入的数据
        if (e.value != '') {
            if (re.test(e.value)) {
                e.className = "r";
                e.nextSibling.src = 'img/d.svg';
                phoneP.style.color = "#04f014";
                phoneP.innerHTML = "";
                ph = true;
            } else {
                e.className = "f";
                e.nextSibling.src = 'img/c.svg';
                phoneP.style.color = "#f00";
                phoneP.innerHTML = "请填写正确的手机号码";
                ph = false;
            }
        } else {
            e.className = "f";
            e.nextSibling.src = 'img/c.svg';
            phoneP.style.color = "#f00";
            phoneP.innerHTML = "不能为空";
            ph = false;
        }
    }
    z(reg, this);
}
btn.onclick = function() { //获取验证码
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

验证手机号码发送短信

更新时间：2021-11-30 22:17:07

0