表单验证js代码

简介:
+关注继续查看

请转载此文的朋友务必附带原文链接,谢谢。

原文链接:http://xuyran.blog.51cto.com/11641754/1861926

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form class="mui-input-group">
        <div class="mui-input-row">
            <input type="tel"  placeholder="手机" required="required">     
        </div>
        <div>请输入正确的手机号码</div>
        <div class="mui-input-row ss">
            <input type="text"  placeholder="验证码" id="yzm" required="required">
            <button type="button" class="btn" id="getCode">发送</button>
        </div>
        <div>验证码必须为6位数字</div>
        <div class="mui-input-row" >
            <input type="password"  placeholder="限制6-20位字符,区分大小写" name="password" required="required">
        </div>
        <div>密码不得小于6或大于20个字符</div>
        <div class="mui-input-row" >
            <input type="password"  placeholder="确认密码" name="password-sure" required="required">
        </div>
        <div>两次密码输入不一致</div>
        <div class="mui-input-row" id="submit">
             <button type="button" class="btn">提交</button>
        </div>
    </form>

jquery代码如下:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
$(function(){
    //手机号检查
    $("input[type='tel']").keyup(function(){
        var reg = /^\d*$/;
        if(this.value.length > 11){
            this.value = this.value.substr(0,11);
            $(this).focus();
        }
        else if(!reg.test(this.value)){
            $(this).parent().next().show().html("手机号码只能为数字");  
            $(this).focus();
        }else{
            $(this).parent().next().hide();
        }  
    }).blur(function(){
        if(this.value == ""){
            $(this).parent().next().show().html("手机号码不能为空");
            $(this).focus();
        }
        else if(!/^1[3|4|5|8]\d{9}$/.test(this.value)){
            $(this).parent().next().show().html("请输入正确的手机号码"); 
            $(this).focus();
        }else{
            $(this).parent().next().hide();
             
        }  
    })
    //获取短信验证码
    $("#getCode").click(function(){
        $("input[type='tel']").trigger('blur');
        var time = 120;
        var error = $(this).parent().prev().css("display");
        alert(error);
        alert(error != "block");
        var phoneNum = $("input[type='tel']").val();
        if(phoneNum != ""&& error != "block"){
            $.ajax({
                type:"post",
                url:"/Ajax/VerificationCode.ashx",
                dataType:"json",
                data:{
                    method:"SendCode",
                    Phone:phoneNum 
                },
                success:function(data){
                if(data.reslut.msg == 1){        
                var t = setInterval(function(){
                    time--;
                    $(this).attr("disabled",true).addClass("grey")
                    .html(time+"s<p style='font-size:10px'>已发送</p>")
                    if(time == 0){
                        clearInterval(t);
                        $("#getCode").removeAttr("disabled").removeClass("grey").html("重新获取验证码");
                    }
                },1000);
                }else{
                    alert(data.result.msbox);
                }
                }  
            });
        }
 
    })
    //验证码检查
    $("#yzm").keyup(function(){
        var reg = /^\d*$/;
        if(this.value.length > 6){
            this.value = this.value.substr(0,6);     
        }
        else if(!reg.test(this.value)){
            $(this).parent().next().show();
            $(this).focus();
        }else{
            $(this).parent().next().hide();
        }  
    }).blur(function(){
        if(this.value == ""){
            $(this).parent().next().show().html("验证码不能为空");
        }else if(this.value.length < 6){
            $(this).parent().next().show().html("验证码必须为6位数字");
        }
    })
    //密码检查
    $("input[name = 'password']").blur(function(){
         
    if(this.value.length < 6||this.value.length > 20){
        $(this).parent().next().show();
    }else{
        $(this).parent().next().hide();
    }
    })
    //确认密码
    $("input[name= 'password-sure']").keyup(function(){
        var password = $("input[name = 'password']").val();
        if(this.value != password){
        $(this).parent().next().show();
        }else{
            $(this).parent().next().hide();
        }
    }).blur(function(){
        if(this.value == "") {
            $(this).parent().next().show().html("密码不能为空"); 
        }
    })
    //整个表单验证
    $("#submit").click(function(){
                $(".mui-input-row input").triggerHandler('blur');
                var numError = $('.mui-input-row + div').css("display");
                if(numError == "block"){
                    return false;
                }
                $.ajax({
                    type:"post",
                    url:"/Ajax/User.ashx",
                    dataType:"json",
                    data:{
                        method:"Reg",
                        Phone: $("input[type = 'tel']").val(), 
                        Pwd: $("input[name = 'password']").val(), 
                        Code: $("#yzm").val()
                    },
                    success:function(data){
                        var result = data.split("|");
                        if (result[0] == "error") {
                           alert(result[1]);
                            //location.reload();
                        }
                              if (result[0] == "success") {
                              alert(result[1]);
                            window.location.href="registerSuccess.html";
                        }
 
                    }
 
                })
                
    })
 
})

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1861926
相关文章
|
19小时前
|
前端开发 开发者
|
3天前
|
JavaScript
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码
|
3天前
|
JavaScript
分享一个页面访问计数的js代码给大家
分享一个页面访问计数的js代码给大家
|
6天前
|
前端开发 JavaScript 开发者
javascript实现黑客帝国代码雨特效背景效果
javascript实现黑客帝国代码雨特效背景
15 0
javascript实现黑客帝国代码雨特效背景效果
|
14天前
|
JavaScript
js随机飘动的广告图片代码demo效果示例(整理)
js随机飘动的广告图片代码demo效果示例(整理)
|
14天前
|
JavaScript
手机移动端返回顶部js代码demo效果示例(整理)
手机移动端返回顶部js代码demo效果示例(整理)
|
29天前
|
设计模式 JavaScript 前端开发
全能指挥官:玩转JavaScript命令模式,让代码听你的话!
全能指挥官:玩转JavaScript命令模式,让代码听你的话!
|
1月前
|
JavaScript 前端开发 安全
js 代码中的 “use strict“; 是什么意思 ?
js 代码中的 “use strict“; 是什么意思 ?
33 1
|
1月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
43 0
|
1月前
|
Web App开发 人工智能 JavaScript
Javascript写代码时容易犯的错误
Javascript写代码时容易犯的错误
相关产品
云迁移中心
推荐文章
更多