JS正则表达式验证表单

最新推荐文章于 2022-11-20 22:39:57 发布

原创

最新推荐文章于 2022-11-20 22:39:57 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #正则表达式

本文介绍了如何在JavaScript中使用正则表达式来验证表单输入，确保用户填写的内容符合要求。通过在点击下一步时运行JS代码，不符合条件的输入将阻止表单的进一步操作。建议参照JS正则表达式菜鸟教程来学习相关语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们通常写的表单中，往往要判断用户填的是否符合要求，那么可以通过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"