JS正则表达式验证表单

我们通常写的表单中,往往要判断用户填的是否符合要求,那么可以通过js的正则式来验证。js的正则式语法可参考菜鸟教程:JS正则表达式
下面是我的表单页面:
在这里插入图片描述

在点击下一步的时候,可以通过JS来控制下,如果不符合要求,则不进行跳转。下面代码中的变量名都是输入框所填项的英文,应该没歧义吧,我就不展示HTML部分了,直接给出js判断。

$(document).ready(function() {

        /*
            Fullscreen background
        */
        $.backstretch("assets/img/backgrounds/1.jpg");

        $('#top-navbar-1').on('shown.bs.collapse', function(){
            $.backstretch("resize");
        });
        $('#top-navbar-1').on('hidden.bs.collapse', function(){
            $.backstretch("resize");
        });

        /*
            Form
        */
        $('.registration-form fieldset:first-child').fadeIn('slow');

        $('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
            $(this).removeClass('input-error');
        });

        // next step
        $('.registration-form .btn-next').on('click', function() {
            var parent_fieldset = $(this).parents('fieldset');
            var next_step = true;

            //账号判断开始
            var user_id = $("#user-id");
            var length_userid = user_id.val().length;
            console.log(length_userid);
            if( length_userid > 16 || length_userid < 6 || !/^\w+$/.test(user_id.val())){
                user_id.addClass('input-error');
                $.jGrowl("账号填写错误!", {position:'bottom-right'});
                next_step = false;return;
            }else{
                $.ajaxSettings.async = false;
                $.post("postFunction.php?action=checkUser",{user_id:user_id.val()}, function (data) {
                    console.log(data);
                    if($.trim(data) === "error"){
                        user_id.addClass('input-error');
                        $.jGrowl("该账号已被注册!", {position:'bottom-right'});
                        next_step = false;return;
                    }else{
                        user_id.removeClass('input-error');
                    }

                    //昵称判断开始
                    var nick = $("#nick");
                    var length_nick = nick.val().length;
                    console.log(length_nick);
                    if( length_nick > 10 || length_nick < 1 || /[\s>?<]/.test(nick.val())){
                        $.jGrowl("昵称填写错误!", {position:'bottom-right'});
                        nick.addClass('input-error');
                        next_step = false;return;
                    }else{
                        user_id.removeClass('input-error');
                    }
                    //昵称判断结束

                    //学校判断开始
                    var school = $("#school");
                    var length_school = school.val().length;
                    console.log(length_school);
                    if( length_school < 1){
                        $.jGrowl("学校填写错误!", {position:'bottom-right'});
                        school.addClass('input-error');
                        next_step = false;return;
                    }else{
                        school.removeClass('input-error');
                    }
                    //学校判断结束

                    //班级判断开始
                    var class1 = $("#class");
                    var length_class = class1.val().length;
                    console.log(length_class);
                    if( length_class < 1){
                        $.jGrowl("班级填写错误!", {position:'bottom-right'});
                        class1.addClass('input-error');
                        next_step = false;return;
                    }else{
                        class1.removeClass('input-error');
                    }
                    //学校判断结束


                    //密码判断开始
                    var password = $("#password"), repeat_password = $("#repeat-password");
                    var length_password = password.val().length;
                    console.log(length_password);
                    if( length_password < 6 || length_password > 16 || password.val() !== repeat_password.val()){
                        $.jGrowl("密码填写错误!", {position:'bottom-right'});
                        password.addClass('input-error');
                        repeat_password.addClass('input-error');
                        next_step = false;return;
                    }else{
                        password.removeClass('input-error');
                        repeat_password.removeClass('input-error');
                    }
                    //密码判断结束

                    //邮箱判断开始
                    var email = $("#email");
                    var length_email = email.val().length;
                    console.log(length_email);
                    if( length_email < 1 || !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email.val())){
                        $.jGrowl("邮箱填写错误!", {position:'bottom-right'});
                        school.addClass('input-error');
                        next_step = false;return;
                    }else{
                        email.removeClass('input-error');
                    }
                    //邮箱判断结束

                    //手机号判断开始
                    var tel = $("#tel");
                    var length_tel = tel.val().length;
                    console.log(length_tel);
                    if( length_tel != 11 || !/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel.val())){
                        $.jGrowl("手机号填写错误!", {position:'bottom-right'});
                        tel.addClass('input-error');
                        next_step = false;return;
                    }else{
                        $.ajaxSettings.async = false;
                        var params = {
                            user: '新用户',
                            template:489148,
                            tel:tel.val(),
                            type:'register'
                        };
                        $.post("duanxin/sendSMS.php",params, function (data) {
                            console.log(data);
                            if($.trim(data) !== "success"){
                                $.jGrowl(data, {position:'bottom-right'});
                                tel.addClass('input-error');
                                next_step = false;return;
                            }else{
                                tel.removeClass('input-error');
                            }
                        });
                        $.ajaxSettings.async = true;
                    }
                    //手机号判断结束

                    if( next_step ) {
                        parent_fieldset.fadeOut(400, function() {
                            $(this).next().fadeIn();
                        });
                    }
                });
                $.ajaxSettings.async = true;
            }
            //账号判断结束


        });

        // previous step
        $('.registration-form .btn-previous').on('click', function() {
            $(this).parents('fieldset').fadeOut(400, function() {
                $(this).prev().fadeIn();
            });
        });

        // submit
        $('.registration-form').on('submit', function(e) {
            //判断短信验证码,此处判断貌似无效,改放到后台操作
            var sms = $("#sms");
            var length_sms = sms.val().length;
            if( length_sms !== 6 || !/^\d{9}$/.test(sms.val())){
                $.jGrowl("验证码填写错误!", {position:'bottom-right'});
                sms.addClass('input-error');
                next_step = false;
            }else{
                $.ajaxSettings.async = false;
                $.post("postFunction.php?action=checkSMS",{sms:sms.val()}, function (data) {
                    console.log(data);
                    if(!data) {
                        e.preventDefault();
                        $.jGrowl("验证码填写错误!", {position:'bottom-right'});
                        sms.addClass('input-error');
                        $("#pre").click();
                    }
                    else {
                        sms.removeClass('input-error');
                    }
                });
                $.ajaxSettings.async = true;
            }
        });


    });

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值