js实现用正则表达式验证身份证，手机号，邮箱，

你非柠檬为何心酸142

于 2022-10-18 17:18:16 发布

阅读量615

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_69218754/article/details/127392644

版权

HTML代码

<body class="body">

    <div class="warp">

        <form>
            <div class="form" id="form" name="myform" action="#" method="get">
                <div class="form-title">
                    <span>注册账号</span>
                </div>
                <div class="form-main">
                    <div class="form-list">
                        <span>昵称</span>
                        <div class="form-text">
                            <input type="text" id="user" />
                        </div>
                        <b id="user_msg"></b>
                    </div>
                    <div class="form-list">
                        <span>邮箱</span>
                        <div class="form-text">
                            <input type="text" id="email">
                        </div>
                        <b id="email_msg"></b>
                    </div>
                    <div class="form-list">
                        <span>密码</span>
                        <div class="form-text">
                            <input type="password" id="password" />
                        </div>
                        <b id="password_msg"></b>
                    </div>

                    <div class="form-list">
                        <span>再次密码</span>
                        <div class="form-text">
                            <input type="password" id="password1" />
                        </div>
                        <b id="password1_msg"></b>
                    </div>

                    <div class="form-list gender">
                        <span>性别</span>
                        <div class="form-text">
                            <label><input type="radio" value="男" name="gender" checked> 男</label>
                            <label><input type="radio" value="女" name="gender"> 女</label>
                        </div>
                    </div>

                    <div class="form-list">
                        <span>生日</span>
                        <div class="form-text">
                            <select>
                                <option>2021年</option>
                            </select>
                            <select>
                                <option>1月</option>
                            </select>
                            <select>
                                <option>22日</option>
                            </select>
                        </div>

                    </div>
                    <div class="form-list">
                        <span>爱好</span>
                        <div>
                            <div class="ortherinput">
                                <input type="checkbox" />读书
                                <input type="checkbox" />编程
                                <input type="checkbox" />运动
                            </div>
                        </div>
                    </div>
                    <div class="form-list">
                        <span>头像</span>
                        <div>
                            <div class="ortherinput">
                                <input type="image" src="images/default.jpg" width="90px" height="80px" />
                                <input type="file" />
                            </div>
                        </div>
                    </div>
                    <div class="form-list">
                        <span>所在地</span>
                        <div class="form-text">

                            <select>
                                <option>河北省</option>
                            </select>
                            <select>
                                <option>秦皇岛市</option>
                            </select>
                            <select>
                                <option>北戴河区</option>
                            </select>
                        </div>

                    </div>

                    <div class="form-list">
                        <span>手机号</span>
                        <div class="form-text">
                            <input type="text" id="mobile">
                        </div>
                        <b id="mobile_msg"></b>
                    </div>

                    <div class="prompt">
                        <p>可通过该手机号码快速找回密码</p>
                        <p> 中国大陆地区以外手机号码 <a href="javascript:void(0);" id="showcode"> 点击这里</a></p>
                    </div>
                    <div class="code">
                        <input type="text" /><span>获取短信验证码</span>
                    </div>
                    <div class="submit">
                        <input type="button" id="submit" value="注册" />
                        <input type="reset" id="reset" value="重置" />
                    </div>

                    <div class="deal">
                        <p><label><input type="checkbox" class="acc" id="deal" checked />我已阅读并同意相关服务条款和隐私政策</label> </p>
                        <span></span>
                        <div class="deal-list">
                            <a href="#">《账户规则》</a>
                            <a href="#">《服务协议》</a>
                            <a href="#">《隐私政策》</a>
                        </div>
                    </div>
                </div>
        </form>
    </div>
    </div>
</body>

//jQuery代码
<script>
    $(function () {
        //手机验证
        $("#mobile").blur(function (){
           var aaa=$("#mobile_msg");
           var bbb=$("#mobile").val();
           var zz =/^(13|14|15|18)\d{9}$/;
           if (!zz.test(bbb)){
               aaa.html("手机格式不正确");
           }else {
               aaa.html("");
           }
        })


        //昵称验证
        $("#user").blur(function (){
            var user=$("#user_msg");
            var user1=$("#user").val();
            var user2 =/^[0-9a-z_]{6,15}$/;
            if (!user2.test(user1)){
                user.html("昵称格式不正确");
            }else {
                user.html("");
            }
        })

//邮箱验证
        $("#email").blur(function (){
            var email=$("#email_msg");
            var email1=$("#email").val();
            var email2 =/^\w{6,12}@\w{2,5}\.[a-z]{3}$/;
            if (!email2.test(email1)){
                email.html("邮箱格式不正确");
            }else {
                email.html("");
            }
        })

        //密码验证
        $("#password").blur(function (){
            var password=$("#password_msg");
            var password1=$("#password").val();
            var password2 =/^[a-zA-Z0-9_]{8,15}$/;
            if (!password2.test(password1)){
                password.html("密码格式不正确");
            }else {
                password.html("");
            }
        })

        //再次密码
        $("#password1").blur(function (){
            var password_1=$("#password1_msg");
            var pass=$("#password").val();
            var password1_1=$("#password1").val();
            var password2_1 =/^[a-zA-Z0-9_]{9}$/;
            if (!password2_1.test(password1_1)){
                password_1.html("再次密码不正确");
            }else if (!password1_1==(pass)){
                password_1.html("密码不一致");
            }else {
                password_1.html("");
            }
        })


    })
</script>