今天休息 !给大家手撕正则写个验证一般会用到的!js

最新推荐文章于 2025-05-10 15:06:27 发布

闵先生1

最新推荐文章于 2025-05-10 15:06:27 发布

阅读量128

点赞数 1

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/weixin_55973231/article/details/114761045

版权

本文介绍了一个表单验证脚本，详细说明了邮箱、手机、账号和密码的验证规则。其中包括正则表达式的使用方法，确保输入符合特定格式要求。

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

邮箱： * 邮箱名称允许汉字、字母、数字、下划线，域名只允许英文域名
手机： * 手机的格式：允许13、14、15、17，18开头的手机号
账号： * 账号格式：包含数字，字母，下划线，长度在6-15
密码： * 密码格式：必须大写字母，小写字母，数字，长度在6-12
登录

<script>

    form1.onsubmit = function (e) {
        e.preventDefault();

        var emailReg = /^[A-Za-z0-9\u4e00-\u9fa5_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

        if (!emailReg.test(email.value)) { // 推荐这种写法
            // console.log(email.nextElementSibling);
            email.nextElementSibling.style.display = 'inline';
            return;
        } 
        email.nextElementSibling.style.display = 'none';


        var phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[6|7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (!phoneReg.test(phone.value)) {
            phone.nextElementSibling.style.display = 'inline';
            return;
        }
        phone.nextElementSibling.style.display = 'none';

        var accReg = /^[0-9a-zA-Z_]{6,15}$/;
        if (!accReg.test(account.value)) {
            account.nextElementSibling.style.display = 'inline';
            return;
        }
        account.nextElementSibling.style.display = 'none';


        var pwdReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,12}$/;
        if (!pwdReg.test(password.value)) {
            password.nextElementSibling.style.display = 'inline';
            return;
        }
        password.nextElementSibling.style.display = 'none';

        // 客户端验证通过后，再处理其他的业务逻辑。
        // 比如：将来还要把数据传递给服务器，让服务器那端再验证一次数据。双端验证，数据更安全。
        // 服务器验证成功后，返回相应的成功结果，如果验证不成功，返回不成功的结果。
        // 客户端根据客户端返回的结果做进一步的处理，如果验证不成功，不让登录，验证成功，跳转到登录后的主页。

    }

</script>